Blocks<\/h4>\n\n\n\n
If you\u2019ve already worked with Gutenberg (a.k.a. The block editor), you\u2019re familiar with the concept of blocks. <\/p>\n\n\n\n
Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content\u2026 – <\/em>Block Editor Handbook<\/em><\/a><\/p>\n\n\n\n Instead of creating content with freeform text, inserted media, embeds, and shortcodes, content is created in a unit of blocks. The block editor was introduced with WordPress 5.0.<\/p>\n\n\n\n It\u2019s worth mentioning that there are both static and dynamic blocks. A static block contains content that\u2019s known at the time of saving a post (for example, a Paragraph block contains whatever text has been entered). A dynamic block, however, contains content that may not be known at the time of saving a post but instead is determined when the post is shown on the front end of the site. An example might be a list of latest posts. That content is dynamic as it\u2019s determined at the time the post is displayed.<\/p>\n\n\n\n In WordPress 5.3, the Group block was introduced. This made it possible to group, or nest, child blocks within a parent container.<\/p>\n\n\n\n Block patterns take the idea of grouping blocks further and give site users a way to leverage predefined layouts on their sites. This benefits users by providing a starting point for page layout vs a blank canvas. <\/p>\n\n\n\n Block patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.<\/em><\/p>\n\n\n\n Mark Uraine, a WordPress contributor and Automattician, stated that block patterns are largely influenced<\/a> by the Atomic Blocks and Design Library plugins.<\/p>\n\n\n\n At the time of this writing, block patterns are not yet part of WordPress core. They are available with the Gutenberg plugin v7.7+. Some block patterns will exist natively in WordPress. Themes and plugins can also define block patterns via the Block Patterns API<\/a> (introduced with Gutenberg 7.8).<\/p>\n\n\n\n A template is a predefined arrangement of blocks and could include predefined attributes<\/a> or even placeholder content.<\/p>\n\n\n\n Traditionally in WordPress, template files are included in themes (and sometimes plugins) and are applied contextually to posts and pages based on the WordPress Template Hierarchy<\/a>. While template files are written in PHP, they may contain some HTML markup.<\/p>\n\n\n\n A typical theme directory structure might look like this:<\/p>\n\n\n\n \u251c\u2500\u2500 theme-name<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 template-parts<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 content.php<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 templates<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 template-cover.php<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 template-full-width.php<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 index.php<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 style.css<\/p>\n\n\n\n In terms of Full Site Editing, the concept is similar except that templates (and template parts, which we\u2019ll address shortly) are HTML files containing block markup. The modified theme structure might look like this:<\/p>\n\n\n\n \u251c\u2500\u2500 theme-name<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 block-template-parts<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 header.html<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 footer.html<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 block-templates<\/p>\n\n\n\n \u2502 \u2502 \u251c\u2500\u2500 index.html<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 index.php<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 style.css<\/p>\n\n\n\n A simple template consisting of a header, content area, and footer might look like this index.html file from the Twenty Twenty Blocks theme:<\/p>\n\n\n\n Regardless of the final implementation, block templates like their predecessor, theme templates, are used to determine layout.<\/p>\n\n\n\n Template parts are the blocks equivalent of theme template parts.They are reusable chunks of code, meaning that a single template part (i.e. footer.html) could be included in a variety of templates.<\/p>\n\n\n\n Just like block templates, block template parts include a predefined arrangement of blocks and HTML markup. Template parts are written in HTML and do not include any PHP. <\/p>\n\n\n\n Here\u2019s a an example of the header.html template part from the Twenty Twenty Blocks theme:<\/p>\n\n\n\n That template part consists of a two-column layout with the site title and description in the first column and a navigation menu in the second. It might render in the block editor like this:<\/p>\n\n\n\n While themes can define starter templates and template parts, users may want to modify them or even create new ones. <\/p>\n\n\n\n Once a template is used in a post, the content is serialized and stored in the database as post_content. At the time of this writing, it is unclear how user-defined templates behave if a new theme is activated and contains templates of the same name.<\/p>\n\n\n\n For instance, if a user has edited the header.html template part in an existing theme, that \u201ctemplate\u201d now exists in the database as serialized data. Should a user activate a new theme that includes a template part also named header.html, presumably the user-defined template would take precedence. However, the workflow around user-edited templates and template hierarchy are not documented as of yet.<\/p>\n\n\n\n Reusable blocks are a way to share a block (or a group of blocks) as reusable, repeatable pieces of content. A good use case might be a Call to Action or Email Signup form that you want to use in multiple locations on a site.<\/p>\n\n\n\n One important thing to note about reusable blocks: They are global, which means any edits to a reusable block are applied to every usage of that repeatable block on a site.<\/p>\n\n\n\n To date, a block-based theme means a theme that includes support for the block editor and includes block styles. A great example is the default Twenty Twenty theme<\/a> from WordPress. It\u2019s designed to take full advantage of the flexibility of the block editor.<\/p>\n\n\n\n Eventually, block-based themes will include support for Full Site Editing. Here\u2019s an experimental version of the Twenty Twenty theme<\/a> that supports Full Site Editing. You can check it out to get an idea of how a block-based theme of the future might be structured and coded.<\/p>\n\n\n\n The block editor currently supports style customization on a per-block basis. For instance, on a paragraph block a user could select a font color, size, and optional background color.<\/p>\n\n\n\n With Full Site Editing, global styles would enable things such as font scale, colors, buttons, etc. and universally apply those styles throughout the site.<\/p>\n\n\n\n This initiative adds an interface to apply styling when in site editing mode. The styling will initially be global but also be able to apply just to the document (e.g. a Page or a Post) or to a component itself. For example, styling an individual button, all buttons within a page, and\/or all buttons across an entire site. – WordPress Design H<\/a>andbook<\/a><\/em><\/p>\n\n\n\n As with other core concepts of Full Site Editing that we\u2019ve discussed, the interface for global styles is still in flux. To see proposed\/example interfaces for the first phase of global styles, follow this Github ticket<\/a>.<\/p>\n\n\n\n Full Site Editing is a complete paradigm shift. For content creators, it\u2019s an extension of the block-based editing experience and offers a greater level of control without the need to code.<\/p>\n\n\n\n For theme and plugin developers, it\u2019s a different approach to creating templates, applying base styles, and giving users a head start with block patterns.<\/p>\n\n\n\n While the ultimate application of Full Site Editing remains to be seen, the concept and experimental development is well underway. <\/p>\n\n\n\n The introduction of the block editor in WordPress 5.0 gave users the ability to create rich content in customizable blocks. The block editor, however, was limited to authoring pages and posts. The components of a full site layout, such as the header, sidebar, or footer were left to the theme.<\/p>\n\n\n\n With Full Site Editing, themes can still include these layout elements, however they can be edited and customized directly by the user. Blocks aren\u2019t just for content. They\u2019re used to define site layout.<\/p>\n\n\n\n Ultimately, the full site editor offers greater control for non-technical users over front-end design and display. <\/p>\n\n\n\n Want to change the background color for the header? There\u2019s no need to learn CSS — simply edit the settings for that block. Or what about changing fonts site-wide? Users won\u2019t need code to do that either.<\/p>\n\n\n\n While designers may cringe at giving users that much control, that control is what many users want. WordPress may dominate market share in the CMS space<\/a>, but the popularity of website builders such as Squarespace and Wix is evidence that people want the ability to design and build websites without knowing how to code.<\/p>\n\n\n\n Between global styles and theme-defined styles, developers can place parameters around the choices that users have. For instance, a theme can define a default color palette. While users could select any color, having a predefined color palette can help direct users to make design decisions that are in alignment with theme styles.<\/p>\n\n\n\n Eventually, user roles or permissions may also help determine which users can access these styles.<\/p>\n\n\n\n In the current world of WordPress, themes (and sometimes plugins) are used to define templates. For instance, a theme could provide a landing page template, a template for blog archives, or a front page. Plugins that register a custom post type might provide a custom template for that post type.<\/p>\n\n\n\n Block-based themes will eventually use block templates and block template parts, giving users a starting point for smart site design. Site and content creators could then fine-tune styles, layouts, etc. as needed to meet their needs.<\/p>\n\n\n\n Page builders enable non-technical users to build complex layouts for their websites with little to no code. Many page builders can control the design of an entire layout, including the header, sidebar, content area, and footer.<\/p>\n\n\n\n When Gutenberg was first released, the block-based editor only applied to the content area, making it distinct from a page builder both in terms of experience and capability. With Full Site Editing around the corner, however, the block editor becomes increasingly competitive with page builders.<\/p>\n\n\n\n Does this mean there is no future for page builders? Not necessarily. Page builders such as Elementor, Divi, and Beaver Builder enjoy widespread usage and it\u2019s not likely that their respective customer bases will bail the moment Full Site Editing is available.<\/p>\n\n\n\n Justin Tadlock has an insightful editorial on whether page builders will stay competitive in the block era<\/a>.<\/p>\n\n\n\n The block editor was introduced to WordPress core in December 2018. Many users pushed back on adopting Gutenberg and continued using the Classic Editor for various reasons, but primarily because the editor felt more like an MVP than a fully-baked feature. Since that time, the block editing experience has improved significantly.<\/p>\n\n\n\n If you (or your clients) are still relying on the Classic Editor, this is the time to make the switch to the block editor as that is the foundation for Full Site Editing.<\/p>\n\n\n\n That said, FSE is still very much in development, so how quickly you engage with it depends on how you use WordPress. According to the WordPress Roadmap<\/a>, Full Site Editing is a top priority for 2020 project development. It would not be surprising to see FSE in core by the end of 2020 or early in 2021.<\/p>\n\n\n\n For folks that use WordPress to create content, there\u2019s nothing to really \u201cadopt\u201d at this point. Other than getting comfortable using the block editor for content creation, there\u2019s nothing else you need to do right now.<\/p>\n\n\n\n Just know that the experience of creating content with WordPress will continue to improve in new and exciting ways.<\/p>\n\n\n\n This is the right time to fully embrace the block editor for your own sites and for use on new client site builds. The more comfortable you are working with blocks, the more easily you\u2019ll be able to transition to Full Site Editing when the time comes.<\/p>\n\n\n\n For now, make sure you\u2019re using Gutenberg-ready, block-based themes. These are themes built specifically with the block editor in mind. One of the biggest changes you\u2019ll notice is that widgets play a lesser role than ever before. Block-based themes enable you to create visually complex layouts, so instead of hard-coded widget areas in themes (especially on the front page), you use blocks as the foundation of your content design.<\/p>\n\n\n\n The Navigation Pro<\/a> theme from StudioPress is a nice example of this. Looking at the demo of the home page<\/a> (or the screenshot below), you\u2019ll see text overlaying images, overlapping elements, multi-column and grid layouts, etc. Each of these components is a block, some native to WordPress and some blocks provided by the free plugin Atomic Blocks.<\/p>\n\n\n\n Creating layouts with blocks instead of widgets gives you greater flexibility when it comes to delivering attractive designs for your clients. And, of course, you can make many customizations without needing to touch the code, speeding up your workflow.<\/p>\n\n\n\n If you haven\u2019t started working with block-based themes that are currently available, download a free theme from WordPress.org<\/a> or a StudioPress theme such as Navigation Pro* and start experimenting. Once you feel comfortable working with block-based content layouts, you\u2019ll be ready to embrace Full Site Editing when it\u2019s officially rolled into WordPress.<\/p>\n\n\n\n * all StudioPress theme packages are free<\/a> for WP Engine customers<\/em><\/p>\n\n\n\n The time to dive into Full Site Editing is now! <\/p>\n\n\n\n It bears repeating that these are experimental features and not intended for use on production sites. However, as you make plans for future theme development or plugin development that will leverage blocks, you\u2019ll want to be familiar with the development of Full Site Editing.<\/p>\n\n\n\n In addition to the instructions below, here is related developer documentation: <\/p>\n\n\n\n To keep track of the Gutenberg project in Github, here are two great \u201csummary\u201d tickets:<\/p>\n\n\n\n Stay tuned for the second part of this post which will offer additional detailed information about getting started with Full Site Editing. As we continue to get closer to its launch in WordPress #Core, we’ll have much more here on the WP Engine blog as well as other channels, to help you get up to speed. <\/p>\n","protected":false},"excerpt":{"rendered":" If you are tuned into WordPress news sources or online communities, you\u2019ve probably heard chatter about how Full Site Editing is coming to WordPress. What exactly does that mean and what do you need to know to be prepared for the changes ahead? Those questions (and many more) are what we\u2019ll cover in this article…<\/span><\/span><\/p>\n","protected":false},"author":295,"featured_media":105652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[372,17,81,408],"tags":[],"class_list":["post-105645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcement","category-how-to","category-wordpress-community","category-wordpress-updates"],"yoast_head":"\nBlock patterns<\/h4>\n\n\n\n
Templates<\/h4>\n\n\n\n
Block template example<\/h5>\n\n\n\n
<!-- wp:group {\"align\":\"full\",\"className\":\"site-header\"} -->\n<div class=\"wp-block-group alignfull site-header\"><div class=\"wp-block-group__inner-container\"><!-- wp:template-part {\"slug\":\"header\",\"theme\":\"twentytwenty-blocks\"} \/--><\/div><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\",\"className\":\"site-content\"} -->\n<div class=\"wp-block-group alignfull site-content\"><div class=\"wp-block-group__inner-container\"><!-- wp:post-title \/--><!-- wp:post-content \/--><\/div><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\",\"className\":\"site-footer\"} -->\n<div class=\"wp-block-group alignfull site-footer\"><div class=\"wp-block-group__inner-container\"><!-- wp:template-part {\"slug\":\"footer\",\"theme\":\"twentytwenty-blocks\"} \/--><\/div><\/div>\n<!-- \/wp:group --><\/code><\/pre>\n\n\n\nTemplate parts<\/h4>\n\n\n\n
Template part example<\/h5>\n\n\n\n
<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n\t<div class=\"wp-block-column\"><!-- wp:heading {\"level\":1,\"className\":\"is-style-header-site-title\"} -->\n\t\t<h1 class=\"is-style-header-site-title\" id=\"site-title\"><a href=\"\/\">Twenty Twenty<\/a><\/h1>\n\t\t<!-- \/wp:heading -->\n\n\t\t<!-- wp:paragraph {\"className\":\"site-description\"} -->\n\t\t<p class=\"site-description\">Just another WordPress site<\/p>\n\t\t<!-- \/wp:paragraph --><\/div>\n\t<!-- \/wp:column -->\n\n\t<!-- wp:column -->\n\t<div class=\"wp-block-column\"><!-- wp:navigation {\"className\":\"is-style-header-nav\",\"itemsJustification\":\"right\"} -->\n\t\t<!-- wp:navigation-link {\"label\":\"Home\",\"title\":\"Home\",\"type\":\"page\",\"url\":\"\/\"} \/-->\n\n\t\t<!-- wp:navigation-link {\"label\":\"About\",\"title\":\"About\",\"url\":\"\/about\"} \/-->\n\n\t\t<!-- wp:navigation-link {\"label\":\"Blog\",\"title\":\"Blog\",\"url\":\"\/blog\"} \/-->\n\n\t\t<!-- wp:navigation-link {\"label\":\"Contact\",\"title\":\"Contact\",\"url\":\"\/contact\"} \/-->\n\t\t<!-- \/wp:navigation --><\/div>\n\t<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/code><\/pre>\n\n\n\nUser-edited templates<\/h4>\n\n\n\n
Reusable blocks<\/h4>\n\n\n\n
Block-based themes<\/h4>\n\n\n\n
Global styles<\/h4>\n\n\n\n
What all is changing with FSE?<\/h3>\n\n\n\n
Blocks, blocks everywhere<\/h3>\n\n\n\n
Democratizing design<\/h3>\n\n\n\n
Custom templates<\/h3>\n\n\n\n
Do page builders have a place in a block-based world?<\/h3>\n\n\n\n
When should you adopt FSE?<\/h3>\n\n\n\n
Content Creators<\/h3>\n\n\n\n
Consultants & Site Creators<\/h3>\n\n\n\n
Theme & plugin developers<\/h3>\n\n\n\n
\n
\n
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/d7oSoNxKHtmg61qjZJ8uULhlBbdEdevhAkFmiEsBobix3yp3M7rtsjPgF0UxSdGPzJmiOD0Vl-COwEznjwR7lye9rEZ5nZas65p3N_0hGMcjO0F4pEUhol_xmnw9tlwr4whrxpsO\")
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/uxey8fe6Z83z-zMXxBjTCNC0xSRksVR5HD7P7cF38vnBjWdKeIwbNTWbPnffjPByCNftIYoRQVdkYA0x6_n5g9LlKk8QVjxoZClKIIoh7stGJ7jEPtzd0Ll8IlQrOdBHNyTkicBW\")
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/KT6RIKxuRG1mN_JrNf4A7koXV8Ya6tp58aqMQIGw_ojRi5frFigL6k-tOxqA8O8JCGPZI3b0n5l6OPjqGRKcSYFsrdLTkxECM1sVgxNgomqD5Dtc_Y_MBcMrZQ7t0hv8LkDFQkOe\")
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/l5RlzXvbP51Qbb8MHG_WqkttxV2nzASE8rJ_r0OKKdcah5AO1ejuKeL5JoJbWRCNPORkISVx6tJW8rHOOXVfKI6_5f0YrfinBisIBKeVTIXoVqq56Jx4KW-sm7HEpj0OUng6TFin\")
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/MykHRpQg23t8yC4sobwBjmL2Yo2KnDdhb_K0gryOX84ieJwt6kCfqZe-98Hu5gB7Vr1CMTqWSrD3u4-FuRcDYbvXvJGZl70pT9MSwi1wNbz_ZP4r8LiB_alQAJZfuuj4Og0Z1koy\")