Development of Block-based Themes for WordPress

The release of Gutenberg block editor on December 6, 2018, was the breakthrough development in the era of WordPress. The Gutenberg blocks introduced a dynamic dimension to the world of content management.

WordPress has been evolving since then with the latest WordPress 5.4 available for beta testing. With so many advancements reshaping the WordPress landscape, the Gutenberg headed towards full site editing. It has since then continuously pushing its limits, from allowing content editing to fully-fledged site editing.

The blocks allow customization of every aspect of a website, allowing users to build a complete website or landing page with the dynamic Gutenberg blocks.

Since the block editor, the WordPress themes were definitely going to evolve in a year or two. The idea of block development was first discussed in the year 2019. The idea of block-based theme development has now, became a hot topic of discussion along with other focus areas in 2020; where the WordPress theme review team reached a common agreement that the development of block-based themes would be the focus area of WordPress for 2020. A couple of contributors even came up with some working block-based themes to keep the ball rolling.

What is a block-based theme?

A block-based theme is a WordPress theme that offers a template that is entirely composed of blocks. It offers different post types such as pages, posts etc. to manage post content. It also allows editing all areas of the site such as headers, footers, sidebars, etc. The block-based themes can serve as a solid base for building your WordPress website with ease. It offers more flexibility and allows you to exercise more customization

The Structure of a block-based theme

The proposed structure does not look much different from the current WordPress themes. The difference with existing WordPress themes is that the template hierarchy and template parts consist of block templates rather than PHP files.

The HTML templates would work to become the placeholder of blocks and the WordPress admin will allow the users to edit or completely overwrite individual templates. The best part is that there is absolutely no need for code as the templates are made up of blocks. All the functionality can be performed using simple insert, or remove blocks or just the ‘drag and drop’ functionality. In other words, block templates within themes are the best starting point for even the beginners to build their sites.

Besides, the underlying architecture of the theme is still the same as the most ones found in the official WordPress theme directory. It is built up of HTML and CSS. The PHP aspect of theming combined the PHP function calls within some structured HTML markup. The blocks rather set up standard elements for building themes.

The following is the very simple proposed block-based theme is structured:

theme

|__ style.css

|__ functions.php

|__ block-templates

|__ index.html

|__ single.html

|__ archive.html

|__ …

|__ block-template-parts

|__ header.html

|__ footer.html

|__ sidebar.html

|__ …

Introducing block templates

A block template is made up of a list of blocks. Any WordPress block can be used in a template. Templates can also reuse parts of their content using “Template Parts”. For example, all the block templates can have the same header included from a separate header.html template part.

Here’s an example of a block template:

<!– wp:site-title /–>

<!– wp:image {“sizeSlug”:”large”} –>

</figure>

<!– /wp:image –>

<!– wp:group –>

<!– wp:post-title /–>

<!– wp:post-content /–>

</div>

<!– /wp:group –>

<!– wp:group –>

<!– wp:heading –>

<h2>Footer</h2>

<!– /wp:heading –>

</div>

<!– /wp:group –>

Anyone can build themes

As the end goal of Gutenberg is to provide the users with the ability to customize every aspect of their site via the block system. Similarly, with the block-based theme development, anyone can build themes.

As per the outline developed for Block based themes, the idea goes:

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 them as a theme.

The idea aligns perfectly with the WordPress goals and provides everyone with the ability to export their customizations, a platform to contribute to keeping the non-coders in mind. This is where the proposed system could reform website building. Those without the coding skills to create a WordPress theme today could have the tools to contribute something back tomorrow.

Contribute to the Theme-based blocks

So, the power of Gutenberg for website building can be fully utilized with the development of theme based on blocks. With the block-based themes, the website building technology would be revolutionized. You can also provide your ideas and contribute to the development by participating in open discussions.