Fränk Klein, a Principal Engineer at Human Made, is now the second theme developer to release a block-based theme to the WordPress theme directory. Block-Based Bosco is a recreation of his Bosco theme, which he released in 2014.
Block-based themes, also called FSE (full-site editing) themes, are currently experimental. They require the use of the Gutenberg plugin, which will automatically detect their structure and activate the beta version of the site editor. This system allows users to experience a WordPress install that is comprised entirely of blocks. Widgets, nav menus, and the customizer screens are out. Everything from posts to site headers to navigation is handled through HTML templates, which users can customize via the site editor. It is still a raw experience but continually improves with each update of the Gutenberg plugin.
Just over a month ago, Themes Team representative Ari Stathopoulos released the first block-based theme, named Q, to the official theme directory. It was both a milestone in WordPress theming history and an invitation for developers to follow his lead.
We have since seen the initial work toward a block-based version of the upcoming Twenty Twenty-One default theme. It is not yet in the directory, but the community should expect it soon.
Developers like Klein and Stathopoulos are paving the way for others. For those who do not have the time or the inclination to scour the Gutenberg plugin’s code or follow dozens of tickets, they can take the easy route. Study the code of people who have done the legwork.
Klein has also written a detailed post titled What I Learned Building a Full-Site Editing Theme in which he goes into detail about his experience. Despite his optimism for the future of theming, he does not shy away from the problems he stumbled upon. It is a must-read for any theme author who is preparing to take the plunge into block-based theme building.
One thing that some developers may find surprising or may even make them feel slightly uncomfortable is that Klein spent much of his development time working from the site editor rather than in a code editor. “It’s likely that this will be the future workflow for creating themes,” he wrote. “Because not only can you edit a theme visually, but it’s also much more practical than writing block markup by hand. Especially because the interface makes it easy to discover the different options offered by blocks, so that you can adjust them as needed for your desired theme design.”
About the Theme
Block-Based Bosco is relatively simple. It is a one-column, no-sidebar theme, which is what most block-based themes will look like at the moment.
“Full-site editing themes are still missing a lot of essential features,” wrote Klein. “Therefore it’s important to choose a theme design that fits with these constraints. Else you’re going to have a very frustrating experience.”
Unlike Q, which is a bare-bones theme primarily for testing theme-related features, Block-Based Bosco is based on a design that users might want to actually use on a site, at least someday. Currently, full-site editing is not yet ready for use with production sites. The theme design holds up well for a simple personal blog.
There are things the theme could do better in the short term. Offering support for wide and full alignments would be ideal, particularly for a one-column theme. The editor and front-end content width also do not match, so it is not a perfect what-you-see-is-what-you-get experience. These are not make-or-break features for these types of experimental themes at this point. We are simply in the testing ground stage.
Right now, end-users need to start tinkering with themes like Block-Based Bosco — please do so on a test install and not a live site — and offering feedback. They also allow other developers to get more comfortable with a new system before it suddenly feels like it comes crashing down in 2021.
Opening Up the Theme Directory
One thing is obvious at this point. The WordPress theme directory needs to allow theme authors to upload block-based themes without hacks or other workarounds. Block-Based Bosco and similar themes are currently being shipped with dummy files, such as header.php and footer.php, and unnecessary PHP code in functions.php to bypass the Theme Check system. With these extra files and code removed, block-based themes are minuscule in comparison to traditional WordPress themes.
There is an open ticket on the WordPress Meta Trac and a patch for the Theme Check plugin. Someone needs to pull the trigger and make it happen.
I may be misinterpreting the end result here, but… in the first conversion example Fränk provides he poses the question, “why do I need this tag?”, in relation to the HEADER landmark element. He decides to conceptually reduce the HEADER tag to being “a container” and replaces it with a DIV.
This is obviously disappointing for a11y reasons, but the immediate issue is this sets a terrible precedent when it’s likely these early FSE themes in the directory will become a model for others to follow.
*sorry for ALLCAPS above, not sure if/how HTML tags can be added in comments here.