{"id":240,"date":"2019-08-19T13:05:12","date_gmt":"2019-08-19T18:05:12","guid":{"rendered":"http:\/\/twocarrs.com\/scarr\/?p=240"},"modified":"2021-09-20T07:50:35","modified_gmt":"2021-09-20T11:50:35","slug":"the-death-of-themes-as-we-know-them","status":"publish","type":"post","link":"https:\/\/twocarrs.com\/scarr\/the-death-of-themes-as-we-know-them\/","title":{"rendered":"The Death of Themes as We Know Them"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"426\" src=\"https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-640x426.jpg\" alt=\"Marc Antony's Oration at Caesar's Funeral\" class=\"wp-image-243\" srcset=\"https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-640x426.jpg 640w, https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-160x107.jpg 160w, https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-768x511.jpg 768w, https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-1024x682.jpg 1024w, https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/MarcAntonysOrationatCaesarsFuneral-272x182.jpg 272w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><figcaption>Shakespeare: Julius Caesar: Act 3 Scene 2 Page 4<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><em>I Come to Bury Themes Not to Praise Them.<\/em><\/h2>\n\n\n\n<p>Themes and Plugins have been an integral part of the WordPress community pretty much from its inception. But, with the advent of the Gutenberg editor and the associated blocks, themes, as we previously understood them, are changing in dramatic ways.<\/p>\n\n\n\n<p>Selecting a WordPress theme will become a UX (user experience) choice and largely irrelevant to the aesthetic (user interface or UI) choices. We developers will customize the visual aspects of our web properties with pre-built Gutenberg blocks, JavaScript code snippets, and custom CSS frameworks instead of what we think of today as themes. These visual artifacts are currently available as plugins &#8211; thereby making plugins as relevant to your site\u2019s look-n-feel as any theme used to.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blocks as Plugins<\/h2>\n\n\n\n<p>Here is a sampling of available Gutenberg blocks available as plugins:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"Atomic Blocks \u2013 Gutenberg Blocks Collection (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/atomic-blocks\/\" target=\"_blank\">Atomic Blocks \u2013 Gutenberg Blocks Collection<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Ghost Kit (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/ghostkit\/\" target=\"_blank\">Ghost Kit<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Stackable \u2013 Gutenberg Blocks (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\">Stackable \u2013 Gutenberg Blocks<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Ultimate Addons for Gutenberg (opens in a new tab)\">Ultimate Addons for Gutenberg<\/a><\/li><\/ul>\n\n\n\n<p>As plugins, these UI elements transcend a specific theme choice. As the popularity of these plugins grow, next generation themes will have to take such third-party influences into account. This frees the custom developer to make a theme choice based on the structural elements it provides (page layout, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Wayfinding\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"wayfinding (opens in a new tab)\">wayfinding<\/a>, etc.) and less on the aesthetic <a rel=\"noreferrer noopener\" aria-label=\"affordances  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Affordance\" target=\"_blank\">affordances <\/a>which dominate theme choices today.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Structural Reorganization<\/h2>\n\n\n\n<p>Historically, when organizing custom code,  we\u2019ve thought of themes as the place we store logic specific to the site\u2019s aesthetics (UI) and wayfinding (UX). And, plugins as the place where we put site-independent, functional logic. It&#8217;s becoming more important to think in terms of WHEN we want to execute our custom code.<\/p>\n\n\n\n<p>If we look at the WordPress file, wp-settings.php in your WordPress root folder, you\u2019ll find the primary hooks for plugins and themes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Plugin Hooks \u2013 <ul><li> 329     <code>do_action( 'muplugins_loaded' );<\/code><\/li><li> 371     <code>do_action( 'plugin_loaded', $plugin );<\/code><\/li><li> 394     <code>do_action( 'plugins_loaded' );<\/code><\/li><\/ul><\/li><li> Theme Hooks \u2013 <ul><li> 463     <code>do_action( 'setup_theme' );<\/code><\/li><li> 509     <code>do_action( 'after_setup_theme' );<\/code><\/li><\/ul><\/li><\/ul>\n\n\n\n<p>As we move forward, the decision as to whether your logic belongs with the plugin or theme hooks will depend more on where WordPress Core is in its loading sequence than our traditional thinking of look-n-feel versus functionality driving that decision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example Theme<\/h2>\n\n\n\n<p>Imagine, if you will, using the very basic \u201cUnderscore S\u201d theme structure as your actual parent theme. This could become the parent theme for EVERY website you develop, regardless of differences in the actual UI. <\/p>\n\n\n\n<p>I believe the Underscore S <a rel=\"noreferrer noopener\" aria-label=\"website (opens in a new tab)\" href=\"https:\/\/underscores.me\/\" target=\"_blank\">website<\/a> statement, \u201cI&#8217;m a theme meant for hacking so don&#8217;t use me as a Parent Theme.\u201d is pre-Gutenberg thinking. And, as such, is no longer accurate. <\/p>\n\n\n\n<p>In fact, Underscore S is the <a rel=\"noreferrer noopener\" aria-label=\"archetypal  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Archetype\" target=\"_blank\">archetypal <\/a>example of future themes. It is focused exclusively on providing a specific UX, and, was developed explicitly to NOT provide UI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Framework Themes<\/h2>\n\n\n\n<p>Theme frameworks, like Genesis, will need to increase their focus on performance and structural flexibility as well as easily incorporating third party blocks, plugins and JavaScript snippets. Historically, these frameworks required third-party developers to adopt \u201ctheir way\u201d of doing things. That will change with this decentralized theme structure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Not Quite Dead&#8230;<\/h2>\n\n\n\n<p>The non-coding website development community will continue to demand traditional \u201cfinished\u201d themes. And so, there will continue to be demand for such themes. But, there will be less interest in these themes from the coding community. Instead, we\u2019ll be able to pick and choose individual transitions and block-level behaviors to include in our new-style theme. If developed properly, these UI components become building blocks of reusable functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Uncertain Replacement<\/h2>\n\n\n\n<p>In these new-style themes, all of the website&#8217;s aesthetic choices will be set in a Controller-style interface. But, this is where WordPress has yet to provide clear direction. We have the Customizer, the Block Toolbar and the Settings Sidebar. All three include Controls for setting and tuning the user interface. The Customizer seems to be setup for overall styling while the Block Toolbar and Settings Sidebar are for block specific changes.<\/p>\n\n\n\n<p>Accessing the Controls for these &#8220;editors&#8221; are in separate locations. The Customizer interaction is relatively stand-alone as is Gutenberg. There is no direct interaction between them. This appears to be more of a historical evolution in thinking rather than an intentional design decision. Shouldn&#8217;t we address all user-interface related Controls from a common place? Or, at a minimum, be able to effortlessly move between them?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Controlled Vocabularies and  Wayfinding<\/h2>\n\n\n\n<p>Both the Customizer and Gutenberg were designed to be as flexible as possible for the designers\/developers of panels and blocks. This has been good for the tool developer community, but will create confusion as we move forward.<\/p>\n\n\n\n<p>Those from the design community understand the value of a <a rel=\"noreferrer noopener\" aria-label=\"controlled vocabulary (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Controlled_vocabulary\" target=\"_blank\">controlled vocabulary<\/a>. In particular, the value it brings to <a rel=\"noreferrer noopener\" aria-label=\"wayfinding (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Wayfinding\" target=\"_blank\">wayfinding<\/a>. <\/p>\n\n\n\n<p>The lack of guidance on what to name panels and what controls to include in them has created something of a &#8220;wild west&#8221; as far as the Customizer goes. Theme developers have felt free to organize the Customizer in whatever manner made sense to them. Not unreasonable when it only impacts your theme. Unfortunately, for the consumer of themes, this has led to an inconsistent Customizer experience.<\/p>\n\n\n\n<p>For example, as a WordPress administrator, I should be able to interact with the Customizer in exactly the same way if I want to change the default font family. This wayfinding exercise should  be common across ANY theme choice I&#8217;ve made. Today, this is not the case.<\/p>\n\n\n\n<p>I fear the same is happening in the burgeoning block developer community. Blocks performing the same function have different names. The grouping of blocks is organized around the vendor rather than by common function.<\/p>\n\n\n\n<p>It remains unclear to me if WordPress recognizes this issue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>Replacing themes with blocks of repeatable UI elements; reusable JavaScript code snippets defining transitions; and immutable plugin functions all lends to the integration of modern practices into the product design\/development lifecycle. But, we must develop a common organizational structure and naming convention for accessing these tools.<\/p>\n\n\n\n<p>I am optimistic and see great opportunity for the custom development community. Perhaps, less optimistic for companies who made their living selling themes. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selecting a WordPress theme will become a UX (user experience) choice and largely irrelevant to the aesthetic (user interface or UI) choices. We developers will customize the visual aspects of our web properties with pre-built Gutenberg blocks, JavaScript code snippets, and custom CSS frameworks instead of what we think of today as themes. These visual artifacts are currently available as plugins &#8211; thereby making plugins as relevant to your site\u2019s look-n-feel as any theme used to.<\/p>\n","protected":false},"author":1,"featured_media":242,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[4],"tags":[13,9,19,23,22,16],"class_list":{"0":"post-240","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blog","8":"tag-customizer","9":"tag-design","10":"tag-development","11":"tag-gutenberg","12":"tag-themes","13":"tag-wordpress","14":"entry"},"featured_image_urls_v2":{"full":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315.jpg",1280,858,false],"thumbnail":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315-160x107.jpg",150,100,true],"medium":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315-640x429.jpg",640,429,true],"medium_large":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315-768x515.jpg",768,515,true],"large":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315-1024x686.jpg",1024,686,true],"1536x1536":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315.jpg",1280,858,false],"2048x2048":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315.jpg",1280,858,false],"bsg-featured-image":["https:\/\/twocarrs.com\/scarr\/wp-content\/uploads\/black-and-white-cemetery-christ-208315.jpg",940,630,false]},"post_excerpt_stackable_v2":"<p>Selecting a WordPress theme will become a UX (user experience) choice and largely irrelevant to the aesthetic (user interface or UI) choices. We developers will customize the visual aspects of our web properties with pre-built Gutenberg blocks, JavaScript code snippets, and custom CSS frameworks instead of what we think of today as themes. These visual artifacts are currently available as plugins &#8211; thereby making plugins as relevant to your site\u2019s look-n-feel as any theme used to.<\/p>\n","category_list_v2":"<a href=\"https:\/\/twocarrs.com\/scarr\/category\/blog\/\" rel=\"category tag\">Blog<\/a>","author_info_v2":{"name":"Steven Carr","url":"https:\/\/twocarrs.com\/scarr\/author\/admin\/"},"comments_num_v2":"0 comments","_links":{"self":[{"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":0,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/media\/242"}],"wp:attachment":[{"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/twocarrs.com\/scarr\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}