Hi everyone! I’ve seen a lot of folks asking questions about how blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based themes fit into the upcoming 5.6 release. This post is an attempt to clarify the full picture of what’s expected to be in place for block-based theming at that time.

Full-site editing is still being iterated on in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. It is expected to reach a testable state by the time WordPress 5.6 is released. You can follow the progress of the different Full-site editing sub projects on this overview issue.

It is important to note that the biggest part of the infrastructure is already in place. This means that the general structure and approach to block-based themes described below should be similar to the way it will work in the future. That said, the exact specifications are still considered experimental. Breaking changes are to be expected during this period.

The focus is now shifting towards polishing the user experience: using the site editor to create templates, using the query block, iterating on the post and site blocks, and implementing the Global Styles UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..

The main takeaway is that when 5.6 is released, the full-site editing feature set will look similar to where it is today, with added polish to the UI, and additional features in the Query block.

Existing Themes

All block-based theme features described below will be 100% opt-in when 5.6 is released. They will still only be available in the plugin, and only if users activate the Full Site Editing experiment. 

There is currently no plan to deprecate the way themes are built today. Your existing themes will continue to work as they always have for the foreseeable future. 

There have been suggestions that aim to help theme authors transition to block-based themes. This work is not expected to be completed by the time 5.6 is released. This topic could use additional feedback and discussion — check the bottom of this post for ways to get involved.

Block Templates

The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. of a block-based theme are its block templates and block template parts. To date, block-based theme templates have been HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. files of block markup that map to templates from the standard WordPress template hierarchy. This will still be the case at the time of WordPress 5.6’s release, so any templates that you build today should still be valid then. 

Much work has been done to ensure that theme authors will be able to emulate all applicable template tags in block based themes. As part of that effort, Gutenberg developers have been building a full suite of site-building blocks. At this point, most of the basics are in place: Site Title, Site Tagline, Post Title, Post Content, various metadata and Comments blocks, and more. A full list can be found in the Block Editor Handbook. 

A Query block has been added, which handles much of the heavy lifting for a block based theme. That block is functional at this point, but is not feature complete. The plan is that most of these features will be added into the plugin by the time of the 5.6 release. 

There is an open question around how dynamic content should be handled in block templates (For example: translatable elements, links to internal pages, and internal assets). There are two GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues that discuss possible solutions to this problem:

• Inline Dynamic Content Solutions (21932)
• Dynamic values in static HTML theme files (20966)

The Gutenberg team does not expect a solution to be in place by the time of the 5.6 release. Block-based themes developed today will need to rely on static block content only until this is addressed. 

Global Styles

In order to allow users to modify a theme’s global options in the full-site editor, block-based themes will need to include a global styles JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file, named experimental-theme.json. 

This file contains theme-specified settings for design “presets” like colors and default font sizes. These are equivalent to existing theme support options like editor-color-palette, editor-font-sizes, and editor-gradient-presets. 

The file also allows themes to modify some of the default block settings. For example, it’s possible to determine whether or not the paragraph block should include its drop-cap feature, whether users should be able to use custom padding in the Cover block, or whether they’ll have the option to set a custom link color. 

Gutenberg reads this file and translates it into user-editable settings in the block editor. All values entered here are compiled into CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables which can be leveraged by themes in both the editor and the front end. 

The JSON file comes with a set of default values, and also lets theme authors provide their own custom theme-specific variables. These custom variables are not editable in the editor — they are intended to allow theme developers to define all of their theme’s style variables in a single place.

Learn More & Get Involved

The Block Editor Handbook includes documentation for block-based themes and for experimental-theme.json. It also features a tutorial for building a block-based theme. All of those resources are up to date as of this writing. 

To keep up on block-based theme development, follow the Gutenberg + Themes updates, posted every Friday to make.wordpress.org/themes. 

For questions, comments, or ideas, please refer to the Gutenberg issues linked above (or open a new one!). You’re also invited to attend the Block-based Themes meeting in the #themereview slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel. This is held twice a month, on Wednesdays at 16:00 UTC.

The Core editor meeting is also useful to attend. That meeting occurs every Wednesday at 14:00 UTC, in the #core-editor slack channel. 

The theme-experiments repository on GitHub contains a series of examples that use the features described above. These experiments are ongoing, and all are welcome to contribute. 

Keep an eye out for progress on a block-based version of the Twenty Twenty-One theme. Work on this is slated to begin in earnest around the time of BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1. 

---

Many thanks to @youknowriad for help pulling this post together.

+make.wordpress.org/core/