Switching from Classic to Block-Based Themes in WordPress

That latest version of WordPress features refinements of full-site editing (FSE) and improvements to performance and accessibility. The transition from traditional classic themes to block-based themes has become not only advantageous but also a logical step. By adopting WordPress block-based themes, you ensure your website stays up-to-date with the latest innovations in the open-source platform, offering enhanced flexibility and customization options for an improved user experience.

If you’re contemplating the transition from classic to block-based themes, it’s essential to understand the key differences that distinguish these two approaches.

Classic Themes

• Classic themes rely on PHP files to manage content display and page structure.
• The template hierarchy governs the organization of template files.
• PHP functions, such as template tags, are employed to render content.

Block-Themes

• Block-based themes employ HTML files to create adaptable and flexible blocks for different parts of a website.
• While adhering to the template hierarchy, blocks form the fundamental building blocks for all content, with the post-content block taking the place of the_content().
• While text in HTML files is not natively translatable, block patterns can utilize PHP functions to address translation needs.

It’s essential to acknowledge that classic themes retain their significance within the WordPress ecosystem. However, adopting block-themes offers advantages in terms of scalability, performance, and streamlined customization without undermining the strengths of PHP.

Illustrating the Difference Between Classic and Block-Based Themes

To provide a visual representation of the distinction between classic and block-based themes, let’s take a look at two WordPress themes: TwentyTwentyOne (classic) and TwentyTwentyThree (block-based).

As you can see, there is a significant difference in the language used between a classic theme and a block-based theme. In a classic theme, all template files are in PHP, whereas in a block theme, they are not. If we take a closer look, we may wonder: where is the functions.php file? And where do all my functions go?

In block themes, the necessity for a functions.php file is no longer mandatory. However, you have the flexibility to include functions.php in your block theme if you require actions such as enqueuing stylesheets or JavaScript, adding custom block styles and image sizes, or utilizing hooks.

Now, let’s examine the updated hierarchy and template files in block themes. We’ve reorganized the index, page, single, and other templates into a tidy ‘templates’ folder. The former ‘template-parts’ directory is now ‘parts’ in the block theme.

Comparing index.php and index.html

Our focus now shifts to a side-by-side comparison of index.php and index.html files, where we encounter the most noticeable divergences.

 

Let’s break down these differences as highlighted in the image above:

1. The function get_header() has transformed into a template part, which serves as a block type for organizing your website. As a container block, it displays other blocks within specific sections like the site header or footer. In the header, you’ll find a template part where the Site Logo Block and Navigation Block are grouped and wrapped together. Begin with a blank header.html and place it in the ‘parts’ folder. WordPress programmatically generates a template part block from this file, allowing seamless utilization of your website’s design.
2. The traditional concept of the loop has evolved into a collection of blocks, granting enhanced flexibility and content control. In this code, a wp-block-query block performs a query to display specific posts based on defined parameters. Within it, a wp-block-post-template block handles the layout and structure of individual posts, comprising child blocks for featured images, titles, excerpts, and dates. For easy navigation through posts, a wp-block-query-pagination block handles pagination with navigation arrows. This new approach empowers developers to create custom layouts and designs using blocks, replacing the traditional loop and offering more granular content presentation control.
3. The get_footer(); function, which outputs the footer section of a website, can be replaced with a template part. With FSE, the footer is defined as a reusable template part that can be easily included in your block-based theme.

All About the Blocks

This is a remarkable transformation where familiar templating functions are now seamlessly replaced by blocks. The shift is evident not only in common functions but also throughout various template files, where everything now revolves around blocks. It’s clear that memorizing individual block markups can be challenging; WordPress offers some options for building block-based themes—some as easy as copy and paste!

Comparing Classic Customizer and FSE Editor

Previously, most editing tasks were concentrated within the Customizer, but with FSE and block-based themes, we now have access to the Site Editor. Let’s examine the significant differences between these two approaches and understand how styling works in the new editor.

At the core of the FSE editor lies the theme.json file, which plays a central role in styling each block. Rather than focusing on template-wide styling, FSE adopts a modular approach, enabling individual block styling. Blocks now manage every aspect, from margins and paddings to fonts and colors.

Classic themes allowed changes only in the Customizer’s global settings, affecting the entire template. However, with block-based themes, everything revolves around blocks. Each block can have its unique and personalized styles, making theme.json knowledge crucial. Luckily, there are abundant resources available to understand theme.json and master block-based theming effectively.

Hybrid Themes: Bridging the Gap

As we wrap up our discussion on switching from classic to block-based themes, it’s worth exploring hybrid themes—a middle-ground solution that combines elements of both worlds. In fact, WebDevStudios’ own wd_s Version 4.0 is a hybrid theme.

A hybrid WordPress theme adopts features of block-based themes like theme.json for defining styles and customizing the block editor, while still utilizing traditional PHP template files. It harnesses the block editor for content but not for building the theme itself. A hybrid theme presents a classic theme enriched with additional Site Editing features.

Since WordPress 6.1, classic themes can add block-based template parts. This feature enables customization of output via the Appearance > Template Parts option in the WordPress admin, offering theme authors increased control and customization capabilities. However, it’s important to note that theme authors must register support to enable this feature.

Here are some of the key advantages of hybrid themes:

• Combined Editing Experience: Hybrid themes offer the familiarity of the classic editing experience while introducing the new features of block-based themes.
• Easier Transition: For users apprehensive about fully committing to the block-based editor, hybrid themes provide a smoother transition.
• Enhanced Customization: With more options for page designs and greater control over the design and layout of posts and archives, hybrid themes offer a superior customization experience.
• Block Templates and Template Parts: Hybrid themes can enable block templates and block template parts, adding another layer of flexibility.
• theme.json Features: By adopting theme.json, hybrid themes can leverage features that were previously only available in block-based themes.

The Evolution Is Here

In conclusion, whether you choose to transition directly to block-based themes or take a more balanced approach with hybrid themes, the evolution of WordPress theming opens up new opportunities for creativity and flexibility. Hybrid themes, in particular, offer a compelling blend of traditional and new features that make them worth considering in your WordPress theme transition. As always, the key is to choose the path that best aligns with your needs and comfort level.

Thank you for taking the time to read this article. I look forward to sharing more insights and tips on WordPress development in future posts. If you have any questions or topics you’d like me to cover, please feel free to leave a comment.