Get Involved With Block-Based WordPress Theme Experiments

As the WordPress theme review team wound down their team meeting yesterday, they were finalizing what their focus area for 2020 would be. The general agreement among members was that block-based themes should be at the top of the list. There was some pushback from a minority that did not want to see block-based themes at all. The reality is that themes will be changing in the next year or two.

As a team, this is the group of people who will ultimately need to set guidelines based on something WordPress has never done before. They will also need to work diligently to bring theme authors up to speed on how themes of the future will be built.

At this point, there are many unknowns, but work on tickets for full-site editing is happening at a quick pace.

Allan Cole, Theme Imagineer at Automattic, later invited team members to get involved with the Theme Experiments project on GitHub. It is a way for developers in the WordPress community to help steer the theme-development ship. Currently, the repository is fairly bare-bones and represents only the early work toward creating themes from blocks. Each sub-directory in the repository will be an individual experiment that explores creating themes using blocks or block templates.

The initial documentation for block-based themes was introduced in early December 2019. Since then, a handful of contributors have put together some working theme examples to get the ball rolling.

The repository is open to contributions from anyone. This would be a good moment for members of the larger theme development community to start sending in pull requests to share their experiments.

To test any of the experiments in this repository, you need to be running the latest version of the Gutenberg plugin. You must also enable the “Full Site Editing” and “Full Site Editing Demo Templates” options from within the plugin’s “Experiments” screen.

Parisienne Theme

Screenshot of the Parisienne theme built from blocks.
Screenshot of the Parisienne theme.

Currently, the only approved theme experiment is the Parisienne theme. It’s a test of how block templates and template parts work. A live demo of the theme is available.

Don’t expect to be blown away. There are many missing pieces in the Gutenberg plugin, such as blocks for displaying posts and similar items. The idea is to explore how templating will work and provide feedback to the Gutenberg development team.

One major concern I have at this point is the flat nature of the two sub-directories for housing templates and template parts. With the seven template part files in this theme, I worry that we are not learning from the mistakes of the past. The sub-folders could become unruly, particularly /template-parts, and house dozens upon dozens of files in a real-world scenario. This is no different from how themes currently work other than the location of the template files. Now would be a good time to reimagine the folder structure and optimize the organization of theme templates. For example, group sidebar templates under a /template-parts/sidebar folder instead of dumping everything into one location.

Twenty Nineteen and Twenty Twenty

Screenshot of the Twenty Nineteen Blocks experimental theme.
Early look at a block-based Twenty Nineteen theme.

The repository has two open pull requests for experimenting with blocked-based versions of the Twenty Nineteen and Twenty Twenty default themes. Of the two, the Twenty Nineteen Blocks theme seemed the least broken, despite the original not being designed specifically for the block editor.

Porting the most recent default WordPress themes is important because it provides theme authors a way to compare how old methods of handling features will work in the new block system.

10

10 responses to “Get Involved With Block-Based WordPress Theme Experiments”

  1. Johannes says:

    I don’t really understand what the Gutenberg teams reasoning behind the whole “full site editing” is. Traditionally themes have worked by giving a template to the user to fill out with content. This was done by separating the content from the presentation, the user handles the content and the theme handles the presentation. This ensures that the user can’t do anything stupid and mess up the site.

    I checked the example theme and it seems like it’s a bunch of Gutenberg blocks in a HTML file that the user can edit however they want using the Gutenberg editor. I can’t get the theme working properly on my computer but presumedly these templates will be stored in the database to preserve the changes. This means that the user is able to do whatever they want to mess up the design. Want to delete the title from all blog posts? Delete the site logo? No problem.

    Rather than giving the user the possibility to “fill in the blanks” the full site editor seems to try to replicate something like Dreamweaver in the worst possible way, giving free rein to modify the entire site however they see fit.

    I have no idea what the Gutenberg team’s vision is in the end. What’s the point of a theme if you can do the same by cobbling a bunch of Gutenberg blocks together? Is it just a bunch of CSS files that maybe change the colours and fonts a bit? And some example templates the user can mess around with?

    I get that something like this will work for the casual user to compete with something like Squarespace and Vix but for custom client projects the whole thing is completely unnecessary.

    I think Gutenberg, Customizer and “block areas” that replace widgets are good ideas because the theme author ultimately controls how the content appears and they give content editors possibility to edit the site without breaking anything.

    Composing the entire site out of Gutenberg blocks seems like a crazy idea to me. I hope the “normal” PHP based themes are not going anywhere soon.

    Report

    • We’re a long way from any sort of finalization on this. And, I’d love to see more about the overall vision from the Gutenberg team. Right now, a lot of this is speculation and experimentation. The following is how I envision the system working based on what we currently know.

      The role of themes will be reduced and will cover three primary areas:

      • Themes will offer unique styles for block output. This will be the primary purpose of a theme — styling content.
      • Themes may optionally register custom block styles to offer extras to users.
      • Themes will set the default output of templates.

      The last point, which is what this post covers, is kind of a big question mark right now in terms of how it will work. The idea seems to center on templates simply being a collection of blocks. That’s not much different than the original purpose of templates. HTML is essentially blocks. What the block system does is standardize the code so that it can be interpreted by WordPress and also shared between themes.

      Where themes really come into play here is they give the user a starting point. This is where the theme designer presents their vision. Many users will simply use the theme and not change anything just like they do today (WordPress currently has a built-in theme editor). Some users will want to change minor things, such as moving the post category to output below the post title instead of after the post. Yet, other users like the general color scheme and block styles of a theme but want to change the overall layout and other major elements. Because theme templates are all built on this standardized block system, end-users can move these parts around without breaking things.

      The big change essentially comes down to themes being built in a standardized language (blocks) and end-users having the ability to make changes to templates without editing code.

      I’m still on the fence about whether this is a better direction than simply allowing themes to register custom block areas and have a little more control.

      Report

    • Bastian says:

      Rather than giving the user the possibility to “fill in the blanks” the full site editor seems to try to replicate something like Dreamweaver in the worst possible way, giving free rein to modify the entire site however they see fit.

      It’s GeoCities design all over again

      Report

  2. Jakub Mikita says:

    Taking into consideration that a simple theme gets reviewed and accepted in about 4-6 months, it’s rather optimistic that we’ll see first Gutenberg editable theme in the repository in 2 years ;)

    Report

    • That’s one reason the theme review team should focus on block-based themes this year. From my understanding, the team leads are okay with these types of themes being submitted before full-site editing lands in core WordPress. Those theme authors who get ahead may already have themes available in the directory by then.

      Report

  3. Functionality from the Beaver Builder team’s exceptionally powerful Themer product comes to mind.

    With Themer, the entire header, footer, or a “part” area can be built and customized in admin vs. PHP files.

    Filters can be applied to use alternate parts on certain pages, replacing the need to add custom PHP files in the WP template hierarchy. Unique and editable page templates can be set up for posts, archives, etc. i.e. single post pages could use a different header than pages with a secondary category navigation.

    Very powerful stuff.

    I like the comment about how a theme can provide a default view, which an administrator could add to or customize as needed.

    Report

  4. Ray Peacock says:

    I may have missed it, but is there any significant article that compares the loading time of a WordPress site with a common theme like Twenty Nineteen with and without Gutenberg? Does Gutenberg speed up loading or slow it down?

    Could make a difference.

    Report

  5. Ivan Grginov says:

    What I’m wondering is, how do dynamic blocks fit into this drastically different vision of WordPress’s future?

    Are their templates still written in php? How do you define what, for example, latest posts block looks like?

    Report

    • There would be no change with how dynamic blocks work. The new theme template system would be processed via PHP. That is necessary for all block types, not just dynamic ones.

      Report

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: