{"id":1519,"date":"2019-07-10T10:37:25","date_gmt":"2019-07-10T08:37:25","guid":{"rendered":"https:\/\/felix-arntz.me\/?p=1519"},"modified":"2025-02-11T08:11:09","modified_gmt":"2025-02-11T16:11:09","slug":"exploring-sitewide-gutenberg-usage-today","status":"publish","type":"post","link":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/","title":{"rendered":"Exploring Sitewide Gutenberg Usage Today"},"content":{"rendered":"\n

Phase 2 of Gutenberg<\/a> is all about taking the compelling capabilities of the block editor to the site level. WordPress 5.0 introduced it as the new editor for post content, but that was only the beginning. Blocks are a powerful tool and inspired by the learnings of various other formats of editing that WordPress and other platforms have been using over the years, so it makes sense for them to provide a unified approach to reusable content. The difference between shortcodes and widgets for example has pretty much been non-existent, and it felt weird to create a certain UI component only for one of the two, or having to write some duplicate code to address both layers. With Gutenberg being expanded to become the editor for your entire WordPress site, beyond the post content bubble, this problem will be solved. Furthermore, it will bring the new editor much closer to being able to fully compete with existing layout builders.<\/p>\n\n\n\n

Each of the steps to get there (e.g. migrating widgets, menus, and possibly even other elements fully controlled by the theme today) poses several challenges, so it might still be some time until we get to experience all this functionality in its proper implementation. Therefore, inspired by a conversation with Morten<\/a> at WordCamp Europe a few weeks ago, I wrote a tiny experimental plugin that allows you to use blocks on a sitewide level and explore what the theming of tomorrow could look like already today.<\/p>\n\n\n\n\n\n\n\n

The Block Areas Plugin<\/h2>\n\n\n\n

The plugin Block Areas<\/a> allows you to define certain areas that you can then edit like a regular post, using the Gutenberg editor. These block areas are somewhat comparable to widget areas. On a technical level, they are implemented as a post type – with the key aspect that they can’t be accessed in the frontend via a certain URL, but your theme has to render them via a block_areas()->render( $slug )<\/code> method that the plugin exposes. The slug you pass to the method should match the block area slug (i.e. post slug) of one of the areas you have created in the admin.<\/p>\n\n\n\n

Here is a screenshot of the UI that the plugin makes available for managing your block areas:<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

The plugin (which is also available on GitHub under the WP Rig organization<\/a>) doesn’t do much more than this. It’s intentional to keep it lightweight – just provide a basic layer to edit sitewide content with Gutenberg in a simple way. The only extra logic it contains is for automatically adding two initial block areas for the site header and the footer, as a starting point. If you want to explore using them in your theme, you could just replace the calls to get_header()<\/code> and get_footer()<\/code> with block_areas()->render( 'header' )<\/code> and block_areas()->render( 'footer' )<\/code> respectively, with the plugin active.<\/p>\n\n\n\n

As mentioned in the plugin readme, it is explicitly of experimental nature. It provides a very simplistic approach to using Gutenberg outside of typical post content (although it technically still is post content) and will no longer be maintained once WordPress core and Gutenberg provide a proper way of accomplishing this. It’s not recommended to use it for actual production sites – you can, but if you do, be prepared to make severe changes once Gutenberg makes these features available itself. However, it is a simple and functioning way of building and testing blocks for your entire site already today.<\/p>\n\n\n\n

The plugin doesn’t bundle any blocks itself, since it should be lightweight and only provide the infrastructure, as mentioned before. That leaves it up to you to fill that gap: Think about a block that renders the site title, the custom header, a menu, the copyright information – taking Gutenberg to the site level opens up a whole new set of typical blocks that would be required. Start thinking about which blocks you would need outside of your post content bubble today!<\/p>\n","protected":false},"excerpt":{"rendered":"

Phase 2 of Gutenberg is all about taking the compelling capabilities of the block editor to the site level. WordPress 5.0 introduced it as the new editor for post content, but that was only the beginning. Blocks are a powerful tool and inspired by the learnings of various other formats of editing that WordPress and […]<\/p>\n","protected":false},"author":1,"featured_media":1521,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[72,97],"tags":[],"class_list":["post-1519","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source","category-wordpress"],"yoast_head":"\nExploring Sitewide Gutenberg Usage Today - felix-arntz.me<\/title>\n<meta name=\"description\" content=\"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring Sitewide Gutenberg Usage Today - felix-arntz.me\" \/>\n<meta property=\"og:description\" content=\"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\" \/>\n<meta property=\"og:site_name\" content=\"felix-arntz.me\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-10T08:37:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T16:11:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1362\" \/>\n\t<meta property=\"og:image:height\" content=\"833\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felix\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@felixarntz\" \/>\n<meta name=\"twitter:site\" content=\"@felixarntz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felix\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\"},\"author\":{\"name\":\"Felix\",\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"headline\":\"Exploring Sitewide Gutenberg Usage Today\",\"datePublished\":\"2019-07-10T08:37:25+00:00\",\"dateModified\":\"2025-02-11T16:11:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\"},\"wordCount\":650,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"image\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg\",\"articleSection\":[\"Open-Source\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\",\"url\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\",\"name\":\"Exploring Sitewide Gutenberg Usage Today - felix-arntz.me\",\"isPartOf\":{\"@id\":\"https:\/\/felix-arntz.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg\",\"datePublished\":\"2019-07-10T08:37:25+00:00\",\"dateModified\":\"2025-02-11T16:11:09+00:00\",\"description\":\"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.\",\"breadcrumb\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage\",\"url\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg\",\"contentUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg\",\"width\":1362,\"height\":833},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/felix-arntz.me\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Open-Source\",\"item\":\"https:\/\/felix-arntz.me\/blog\/category\/open-source\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Exploring Sitewide Gutenberg Usage Today\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felix-arntz.me\/#website\",\"url\":\"https:\/\/felix-arntz.me\/\",\"name\":\"felix-arntz.me\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felix-arntz.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\",\"name\":\"Felix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png\",\"contentUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png\",\"width\":512,\"height\":512,\"caption\":\"Felix\"},\"logo\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/\"},\"description\":\"Developer Programs Engineer at Google. WordPress Core Committer. Previously Yoast. Runner, musician, movie geek. Aprendiendo espa\u00f1ol. Fueled by Mountain Dew.\",\"sameAs\":[\"https:\/\/x.com\/felixarntz\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Exploring Sitewide Gutenberg Usage Today - felix-arntz.me","description":"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/","og_locale":"en_US","og_type":"article","og_title":"Exploring Sitewide Gutenberg Usage Today - felix-arntz.me","og_description":"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.","og_url":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/","og_site_name":"felix-arntz.me","article_published_time":"2019-07-10T08:37:25+00:00","article_modified_time":"2025-02-11T16:11:09+00:00","og_image":[{"width":1362,"height":833,"url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","type":"image\/jpeg"}],"author":"Felix","twitter_card":"summary_large_image","twitter_creator":"@felixarntz","twitter_site":"@felixarntz","twitter_misc":{"Written by":"Felix","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#article","isPartOf":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/"},"author":{"name":"Felix","@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"headline":"Exploring Sitewide Gutenberg Usage Today","datePublished":"2019-07-10T08:37:25+00:00","dateModified":"2025-02-11T16:11:09+00:00","mainEntityOfPage":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/"},"wordCount":650,"commentCount":4,"publisher":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"image":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage"},"thumbnailUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","articleSection":["Open-Source","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/","url":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/","name":"Exploring Sitewide Gutenberg Usage Today - felix-arntz.me","isPartOf":{"@id":"https:\/\/felix-arntz.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage"},"image":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage"},"thumbnailUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","datePublished":"2019-07-10T08:37:25+00:00","dateModified":"2025-02-11T16:11:09+00:00","description":"With the experimental Block Areas plugin for WordPress, you can start building and using Gutenberg blocks for your entire site today.","breadcrumb":{"@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#primaryimage","url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","contentUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","width":1362,"height":833},{"@type":"BreadcrumbList","@id":"https:\/\/felix-arntz.me\/blog\/exploring-sitewide-gutenberg-usage-today\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/felix-arntz.me\/"},{"@type":"ListItem","position":2,"name":"Open-Source","item":"https:\/\/felix-arntz.me\/blog\/category\/open-source\/"},{"@type":"ListItem","position":3,"name":"Exploring Sitewide Gutenberg Usage Today"}]},{"@type":"WebSite","@id":"https:\/\/felix-arntz.me\/#website","url":"https:\/\/felix-arntz.me\/","name":"felix-arntz.me","description":"","publisher":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felix-arntz.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55","name":"Felix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/","url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png","contentUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png","width":512,"height":512,"caption":"Felix"},"logo":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/"},"description":"Developer Programs Engineer at Google. WordPress Core Committer. Previously Yoast. Runner, musician, movie geek. Aprendiendo espa\u00f1ol. Fueled by Mountain Dew.","sameAs":["https:\/\/x.com\/felixarntz"]}]}},"jetpack_featured_media_url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2019\/07\/block-areas-admin-page.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/comments?post=1519"}],"version-history":[{"count":3,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1519\/revisions"}],"predecessor-version":[{"id":1525,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1519\/revisions\/1525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/media\/1521"}],"wp:attachment":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/media?parent=1519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/categories?post=1519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/tags?post=1519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}