Author: Justin Tadlock
In a pull request on the Gutenberg repository yesterday, Riad Benguella created an initial document that outlines how block-based WordPress themes might work. While the document is merely a starting point for the conversation, it is a set of ideas that will likely forever reshape the WordPress landscape. It is paradigm-shifting.
For the first time, theme authors can glimpse what their future holds. Since the inception of Gutenberg, many have asked for more technical details. Particularly, they wanted to know whether themes would be reduced to a stylesheet or a stylesheet and a few PHP files. What would themes look like architecturally? Would themes exist at all?
The document, while open for changes, makes a strong case about the structure of themes going forward. It is clear that much forethought has gone into the proposal. It matches the direction of the experimental site-editing feature in Gutenberg that has already been set in motion. Even though it is subject to change, there seems to be a finality to the overarching idea. The writing has long been on the wall. Now everyone can see the wall. The missing piece is figuring out how to bring the idea to fruition.
What is Full Site Editing?
Before understanding how themes of the future might work, you must first understand the direction that Gutenberg is headed. The end goal for Gutenberg, and eventually WordPress, is for users to have the ability to customize every aspect of their site via the block system. Currently, the block system primarily handles editing post content.
To move to full-site editing, every piece of dynamic data about a site must be a block. For example, a site title block must exist as a placeholder for the site title. Users should be able to place it anywhere they desire to output the title, such as in the header.
This has left theme authors with a reasonable question: If users can move these blocks anywhere, where do themes fit into the picture?
It is easy to see how themes would become little more than a stylesheet that styles every WordPress block while also handling other necessary styles like typography and vertical rhythm. Even then, it makes one wonder if themes, at least in how we have come to know them, are necessary at all.
The Proposed Theme Structure
The proposed structure does not look much different from current WordPress themes. The big difference is that theme templates would become “block templates” and “block template parts.” These templates would be HTML files rather than PHP files.
The following is where the structure currently stands.
theme |__ style.css |__ functions.php |__ block-templates |__ index.html |__ single.html |__ archive.html |__ ... |__ block-template-parts |__ header.html |__ footer.html |__ sidebar.html |__ ...
From a templating perspective, it appears relatively normal for a WordPress theme. The files simply have a different type and are organized in specific folders.
However, the difference is how the HTML templates would work. They would essentially become placeholders for blocks. Users would also have the ability to edit or completely overwrite individual templates via the WordPress admin. Because templates are made up of blocks, no code would be necessary on the user’s part. They could simply point and click to insert or remove blocks with their mouse.
In other words, block templates within themes would be unique starting points for users to build their sites.
There are two noteworthy items about the proposed system: themes are still themes and end-users can become theme builders.
The Essence of a Theme Remains the Same
When you cut through everything else, WordPress themes have always been HTML and CSS. The PHP aspect of theming basically mixes PHP function calls (i.e., template tags) within some structured HTML markup. If you look at most themes going through the official WordPress theme directory, you will find that the underlying markup is mostly the same.
In the block template system, this idea doesn’t change. If anything, it could simplify the role of theme author by creating a set of standard elements (blocks) that themes output. If done right, it also creates a standard for class names so that styles can easily be shared across themes and all sorts of similar goodies.
Anyone Can Build a Theme
The initial outline explains the potential of exporting themes:
Ultimately, any WordPress user with the correct capabilities (example: administrator WordPress role) will be able to access these templates in the WordPress admin, edit them in dedicated views and potentially export the templates as a theme.
This is where the proposed system could revolutionize website building. Those without the coding skills to create a WordPress theme today could have the tools to contribute something back tomorrow.
The idea aligns perfectly with the open-source ethos of WordPress. By giving everyone the ability to export their customizations, it provides an avenue for contributing that we have never had before for non-coders. A free directory of customized themes created by and for the community, anyone?
The Design Side of the Equation
Block templates are merely the HTML. Themes will need to stand apart with their CSS. However, there must be standardization to pull this off.
Designers will need to shift to a block-based approach when it comes to design. Some may already be familiar with various “component-based” systems, which would work much the same way. Rather than designing from the top-down, theme authors would approach design on a more atomic level by designing each block.
There are also many unanswered questions about how styles will eventually work. Currently, there is an open ticket for discussing a style system for blocks. Much of the discussion is around how to integrate a design system with themes.
Join the Discussion
It is important to point out that nothing about this proposal is set in stone. It is a high-level outline of what the future of themes could hold. However, now is time for input from the community, especially theme authors who may have felt a bit out of the loop in the past. Now is the time to make your voice heard and to contribute ideas to the discussion.
The WordPress theme review team also has an open discussion on the future of themes that goes along with this proposal and whether themes should start taking advantage of experimental Gutenberg features.