Day 7: Creating Block Templates and Patterns in Gutenberg

Introduction

Welcome to Day 7 of the Gutenberg development series! So far, we’ve covered creating custom blocks and adding custom settings through Inspector Controls. Today, we’re going to take that one step further by exploring block templates and block patterns.

These features allow you to provide predefined layouts that users can insert into their posts or pages with a single click. Whether you’re building complex page layouts or reusable sections like testimonials, block templates and patterns help streamline the content creation process for your users.

What Are Block Templates and Block Patterns?

Before we dive into the implementation, let’s clarify the difference between block templates and block patterns.

• Block Templates: These are predefined sets of blocks that can be assigned to specific post types or page templates. When a user creates a new post or page, the template provides a structure for content creation, guiding them on how to organize the blocks.
• Block Patterns: Patterns are reusable layouts or combinations of blocks that users can insert anywhere within the Block Editor. Unlike templates, they are not tied to a specific post type or page and are meant to be used as flexible content-building blocks.

Step 1: Creating Block Templates for Custom Post Types

Let’s start by creating a block template for a custom post type (CPT). Block templates are especially useful when you want to ensure that users follow a specific structure when creating content for a particular post type.

Creating a Custom Post Type with a Block Template

1. Register a Custom Post Type: First, let’s create a new custom post type in your theme’s functions.php file.

function my_theme_custom_post_type() {
    $labels = array(
        'name' => __('Portfolio', 'your-theme'),
        'singular_name' => __('Portfolio Item', 'your-theme'),
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'show_in_rest' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'template' => array(
            array('core/image', array(
                'align' => 'center',
            )),
            array('core/heading', array(
                'level' => 2,
                'placeholder' => 'Enter the project title...',
            )),
            array('core/paragraph', array(
                'placeholder' => 'Describe the project...',
            )),
        ),
    );

    register_post_type('portfolio', $args);
}
add_action('init', 'my_theme_custom_post_type');

Explanation:

• template: In the args array, we define the block template for the post type. Here, the template includes an image block, a heading block, and a paragraph block. Each block has specific attributes, such as alignment and placeholder text.
• supports: The supports option enables the use of the block editor for the custom post type.

Now, when users create a new Portfolio item, they will be greeted with a predefined layout that includes an image, a heading, and a paragraph.

Step 2: Customizing Block Templates

Block templates are highly customizable. You can define any blocks you want in the template and adjust the attributes as needed.

Example: Adding More Complex Layouts

You can expand your block template to include more complex layouts. For example, you could add columns, buttons, or testimonials.

'template' => array(
    array('core/columns', array(), array(
        array('core/column', array(), array(
            array('core/image', array(
                'align' => 'center',
            )),
        )),
        array('core/column', array(), array(
            array('core/paragraph', array(
                'placeholder' => 'Add a project description...',
            )),
        )),
    )),
    array('core/button', array(
        'text' => 'View Project',
        'url' => '#',
    )),
),

In this template, we’ve added a columns block with an image in the left column and a paragraph in the right column, followed by a button block.

Step 3: Creating Block Patterns

Block patterns allow users to insert reusable block layouts anywhere in their posts or pages. Patterns are ideal for predefined sections such as testimonials, pricing tables, or call-to-action sections.

Registering a Block Pattern

To register a block pattern, add the following code to your theme’s functions.php file:

function my_theme_register_block_patterns() {
    register_block_pattern(
        'my-theme/testimonial-pattern',
        array(
            'title'       => __('Testimonial Pattern', 'your-theme'),
            'description' => __('A simple testimonial section with an image, heading, and paragraph.', 'your-theme'),
            'content'     => '<!-- wp:image {"align":"left"} -->
                <figure class="wp-block-image alignleft">
                    <img src="https://example.com/testimonial.jpg" alt="Testimonial image"/>
                </figure>
                <!-- /wp:image -->
                <!-- wp:heading -->
                <h2>Customer Testimonial</h2>
                <!-- /wp:heading -->
                <!-- wp:paragraph -->
                <p>Here’s what our customers are saying about our product...</p>
                <!-- /wp:paragraph -->',
        )
    );
}
add_action('init', 'my_theme_register_block_patterns');

Explanation:

• register_block_pattern: This function registers a new block pattern. In this example, the pattern contains an image, a heading, and a paragraph.
• content: The pattern’s content is defined using the block’s markup. This is the structure that will be inserted into the post when the pattern is selected.

Using the Block Pattern in the Editor

Once registered, users can access this pattern in the Block Editor by clicking the “Patterns” tab in the block inserter and selecting the Testimonial Pattern.

Step 4: Adding Block Patterns to the Pattern Library

You can also add your custom block patterns to the WordPress Block Pattern Directory to make them available for other users. Follow the official guidelines on how to submit your patterns to the directory.

Best Practices for Creating Block Templates and Patterns

1. Design for Reusability: Block patterns should be flexible enough to be reused across different sections or pages.
2. Keep it Simple: Templates should provide structure without overwhelming users with too many blocks or complex layouts.
3. Use Descriptive Placeholders: When defining blocks like headings or paragraphs, use clear placeholder text to guide users on what to insert.
4. Test for Theme Compatibility: Ensure that your block templates and patterns work seamlessly with the active theme’s styles and layout.

Conclusion: Streamlining Content Creation with Templates and Patterns

Block templates and patterns are powerful tools that can help developers streamline content creation for their users. With templates, you can guide users toward consistent, well-structured content, while patterns offer flexible, reusable layouts for common sections.

By mastering these features, you’ll make the content creation process easier and faster for your clients and users, while ensuring design consistency across posts and pages.

In Day 8, we’ll explore dynamic blocks, which allow blocks to fetch and display dynamic data from WordPress or external APIs.