Mayank Tripathi

Understanding Block Patterns, Templates, and Template Parts

Block themes in WordPress have revolutionized how websites are designed and managed, especially with the introduction of Full Site Editing (FSE). These themes allow users to build dynamic layouts using blocks, templates, and template parts without the need for complex coding. This post will break down the process of how block theme templates load, and explore key concepts like block patterns, templates, and template parts.

1. What is a Block Theme?

A block theme is a WordPress theme that fully embraces the block editor, allowing users to create and manage entire websites using the block interface. Unlike classic themes, block themes leverage Full Site Editing (FSE), which enables users to modify global parts of a website, like the header or footer, directly from the WordPress editor.

At the heart of this approach are templates, template parts, and block patterns. Understanding how these pieces work together can help developers and users make the most of WordPress block themes.

2. How Block Theme Templates Load

When WordPress loads a block theme, the theme’s templates and template parts are used to define the structure and layout of each page. Here’s a simplified overview of the process:

  • WordPress’s Template Hierarchy: Block themes still adhere to WordPress’s classic template hierarchy (like index.php, single.php, page.php, etc.), but with some changes. Now, instead of using PHP files for rendering parts of the site, JSON files and HTML-based templates are used to control page layouts. WordPress looks for block-based templates in the block-templates/ folder of a theme.
  • Template Loading: When a user visits a page on the site, WordPress checks the block theme’s block-templates directory to load the appropriate template (e.g., single.html for single post views, page.html for page views, and so on). If no specific template is found, WordPress falls back to more general templates in the hierarchy, just like with classic themes.
  • Template Parts Loading: Templates can reference template parts—reusable components that can be shared across multiple templates, like headers, footers, or sidebars. These are stored in the block-template-parts/ folder and are inserted into the main template where needed.

For example, a single.html template might call a header.html and a footer.html as template parts.

3. Block Patterns

Block patterns are predefined block layouts that users can insert into their content or templates. They provide a quick way to build complex layouts without starting from scratch. For instance, you can create a block pattern for a multi-column layout with text and images and then allow users to insert it in one click.

How Block Patterns Work:

  • Block patterns are registered through the theme’s functions.php file or via a block-patterns folder inside the theme.
  • Each pattern is made up of HTML and can include multiple blocks (such as a hero image, a heading, and a button).
  • Users can add block patterns directly to pages or posts, making the design process more flexible and intuitive.

Here’s an example of registering a simple block pattern:

register_block_pattern(
    'mytheme/two-columns',
    array(
        'title'       => __( 'Two Columns', 'mytheme' ),
        'description' => _x( 'Two columns with text and image', 'Block pattern description', 'mytheme' ),
        'content'     => "<!-- wp:columns -->
        <div class=\"wp-block-columns\"><!-- wp:column -->
        <div class=\"wp-block-column\"><!-- wp:paragraph -->
        <p>Your text here...</p><!-- /wp:paragraph --></div><!-- /wp:column -->
        <!-- wp:column -->
        <div class=\"wp-block-column\"><!-- wp:image -->
        <figure class=\"wp-block-image\"><img src=\"image.jpg\" alt=\"\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns -->",
    )
);

When this pattern is registered, it becomes available in the WordPress editor, allowing users to insert it anywhere.

4. Templates and Template Parts

Templates in block themes are HTML files that define the layout and structure of specific types of pages. For example:

  • index.html – for the site’s main page or blog listing.
  • single.html – for individual posts.
  • page.html – for individual pages.

These templates are populated with blocks, which can be core blocks (like paragraphs, images, and headings) or custom blocks. The blocks are used to define how the content will be presented on the front end.

Template Parts are reusable sections of a template, typically used for global areas like the header or footer. For instance:

  • header.html – defines the site’s header structure.
  • footer.html – defines the site’s footer structure.

Template parts allow for easy reusability and updating across multiple templates. When you edit a template part, the changes are reflected on every page where that template part is used.

Example of a Simple Template:

<!-- block-templates/single.html -->
<!-- wp:template-part {"slug":"header"} /-->

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

<!-- wp:post-content /-->

<!-- wp:template-part {"slug":"footer"} /-->

In this example:

  • The header.html and footer.html template parts are loaded into the single post view.
  • Between them, the post title and content blocks are placed to display the post’s information.

5. Combining Templates, Template Parts, and Block Patterns

The beauty of block themes is how these components work together:

  • Templates define the structure of different pages.
  • Template parts make common sections reusable, ensuring consistency across pages.
  • Block patterns let you easily insert predefined layouts, making page building faster and more user-friendly.

By using these elements, developers and site owners can create flexible, fully-customizable websites that are easy to manage directly from the block editor. As Full Site Editing continues to evolve, so will the potential of block themes to create even more innovative designs without complex code.

Conclusion

Block themes represent a major shift in WordPress theming by embracing the block editor and Full Site Editing. The combination of templates, template parts, and block patterns creates a more modular and flexible approach to site design. By understanding how block theme templates load, you’ll be better equipped to work with this powerful new system and unlock the full potential of WordPress’s block-based editing experience.

Thank you for reading through the post… More will be added.

by ~Leaveitblank (Mayank Tripathi)