Introduction to WordPress Block Themes


The components that make up a typical WordPress theme have not changed much in recent years. So much so that project co-founder Matt Mullenweg noted that the old-school Kubrick theme (released in 2005) still works with modern versions of the content management system.

Sure, theme developers have come up with their own additions. We’ve seen everything from complex UI settings to integrated page builders. But at its core, themes have maintained a consistent structure. That is, until the block themes are introduced.

Block themes are set to become the future of WordPress. They will change the way we build and maintain websites. In addition, they are more closely integrated with the Gutenberg block editor than their “classical” counterparts.

Are you wondering what all the fuss is about? Today, we will introduce you to the basics of WordPress block themes. In this way, we will explore how they compare and contrast with traditional themes. Forward with us!

Why Themes Block?

In the first few years of its life, the block editor was a primary means of styling and building content. When combined with a classic theme, this means that pages and posts can be crafted to your heart’s desire.

When it comes to making changes that affect the overall theme, WordPress Customizer remains the access resource. This tool provides access to design and layout settings provided by the theme author. If it’s not in the Customizer, you probably need to dig a code.

However, one of the key principles of the block editor was to create a more unified interface within the WordPress dashboard. We have already seen this with the Widgets screen moving to block-based UI. The Customizer does not fit this model.

The next step in this process is the introduction of Full Site Editing (FSE). It goes beyond just styling our pages and posts. Now all aspects of theme design (header, footer, page templates, etc.) can be managed directly within WordPress.

Block themes serve as a gateway to this functionality. So they are built exclusively with blocks in mind.

WordPress Block Theme Theme Works

There are few similarities between classic and block themes. But they both have a set of basic rules that guide their makeup. If you were to download a block theme and navigate its file structure, there may be a few key contrasts.

Template Files are HTML, not PHP

In a classic theme, you will find template files with names like index.php and header.php. Block themes outperform PHP and instead carry the .html file extension.

Inside, a template file contains a combination of HTML and blockmarks. For example, let ‘s take a look at this template from the official WordPress documentation:

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"}  -->
<figure class="wp-block-image size-large">
    <img  src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!--  wp:post-title /-->
    <!--  wp:post-content /-->
</div>
<!-- /wp:group -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:heading  -->
     <h2>Footer</h2>
    <!--  /wp:heading -->
</div>
<!-- /wp:group -->

Blockmarking is very similar to HTML comments. But it includes syntax to call specific blocks into the template. The WordPress Full Site Editing website has a handy reference that includes marking for each default block.

And if this type of code seems familiar, you may have seen something similar inside the Gutenberg code editor view.

Use Folder

Classic themes are able to store templates within folders, but it is not necessary. Blocking themes require a few subfolders:

/parts
Items are reusable such as the header, footer and sidebar.

/templates
Home templates for different types of content. Common examples are items such as pages, post archives, and singular posts. Note that their naming convention follows the hierarchy of WordPress templates – another similarity to classic themes.

One of the positive side effects of this arrangement is that better themes will be organized. Having a standardized folder structure means less time searching for specific files.

Style Theme.json

The IS theme.json the file is used to assign default settings to the block editor. This means, among other things, that default color palettes, typography and spacing can be set. Settings can be made site-wide or applied to specific blocks.

Since theme.json It will automatically generate the appropriate CSS based on its configuration, you may not need to fill in a theme style.css so many files. In that case, the stylesheet is used to define some basic features, and everything else depends on this newly enclosed file.

An example of a WordPress block theme structure.

Creating and Editing Templates

WordPress has long had the ability to edit theme template files directly within the desktop. This is often discouraged, as even a small coding error can make a website inaccessible. Not to mention the possibility of overwriting changes when a theme is updated (hence part of the reason for using a child theme). Some developers turn off the feature altogether to avoid even remote chances of disaster.

But block themes are related to editing within the desktop. Templates that include a theme can be tweaked through the block editor, and new custom templates can also be created.

As you would expect, code is completely optional in this case. Everything can be edited through the new Site Editor (Appearance > editorWordPress 5.9 or higher required) replaces the legacy Customizer when a block theme is activated. And, just like pages or posts, the Site Editor uses the familiar Block Interface.

And that is not all. Any changes you make within WordPress can be exported. This would allow you to use your custom block theme on multiple websites.

This reduces the barrier to entry for those who want to customize themes or even create themes. Now, a custom website can lead to a basic eye for design and working knowledge of blocks.

List of templates inside the Full WordPress Site Editor.

Things to Keep in Mind

Before you dive in and move all your websites to use block themes, there are a few things you should be aware of.

First of all, blockchain themes are a modern technology. Not all aspects have been finalized and some good practice needs to be resolved. In addition, we are just beginning to see how these themes work in a production environment. Expect some changes as things unfold.

If you build client sites and want to retain some flexibility in the future, hybrid themes there may be interest. They allow the use of FSE features while maintaining a classic themed PHP structure. You can even retrofit an existing theme to use this function.

Finally, block themes na eliminate classic themes – not least for a long time. With that, the transition to this new themed route does not have to be immediate. It’s okay, for example, to experiment with blocks in a local environment while still relying on your favorite classic themes in production.

Example from the Twenty Two theme.

Block Theme Resources

If you want to learn more about WordPress block themes, there are some outstanding resources available. Here are some of our favorites:



Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *