How to Create Block Theme Patterns in WordPress 6.0

WordPress 5.5 introduces the block mode (also commonly referred to as "blocks") that allows users to create and share predefined block layouts. These layouts are stored in the schema directory and contain various schemas designed by the WordPress community. These modes use a simple copy-paste format without any coding knowledge, which greatly saves users time.

While there are already a lot of articles on patterns, there is a lack of comprehensive and latest pattern creation articles covering the latest enhancements. This article aims to fill this gap, highlighting recent enhancements such as creating patterns without registration, and providing new and experienced authors with a step-by-step guide to creating and using patterns, especially in block topics.

The use of block mode in block themes has surged since the release of WordPress 5.9 and Twenty Twenty-Two (TT2) default themes. I've always been a big fan of block patterns and have created and used them in my block themes.

WordPress 6.0 provides authors with three main mode feature enhancements:

• Allows registration mode through the /patterns folder (similar to /parts, /templates, and /styles).
• Use theme.json to register the schema from the public mode directory.
• Adds a pattern that can be provided to users when creating a new page.

In the introductory video "Exploring WordPress 6.0", Automattic Product Liaison Ann McCathy highlighted some of the new enhanced mode features (starting at 15:00) and discussed future mode enhancement plans—including modes as section elements, options for selecting modes when page creation, integrated mode directory search, and more.

Prerequisites

This article assumes that readers have basic knowledge of WordPress Site-wide Editing (FSE) interface and block themes. The Block Editing Manual and the Site-Wide Editing Website provide the latest tutorial guides for learning all FSE features, including the block topics and patterns discussed in this article.

Section 1: Evolution Methods for Creating Block Patterns

The initial method to create a block pattern requires the use of the block pattern API, which can be used as a custom plugin or directly registered in the functions.php file to bundle with the block theme. The newly released WordPress 6.0 introduces several new and enhanced features for use with patterns and themes, including the /patterns folder registration mode and page creation mode modality.

As a background, let's start with a brief overview of how the schema registration workflow evolved from using the register schema API to load directly without registration.

Use Case Example 1: Twenty Twenty-One

The default Twenty Twenty-One theme (TT1) and TT1 Blocks themes (TT1 sister themes) show how to register block mode in the theme's functions.php. In the TT1 Blocks experimental topic, a single block-pattern.php file containing eight block patterns is added to functions.php as an inclusion file, as shown below.

You need to register a custom block pattern using the register_block_pattern function, which receives two parameters - the title (the name of the pattern) and the attribute (the array describing the pattern properties).

Here is an example of a simple "Hello World" paragraph pattern registered according to Theme Shaper article:

 register_block_pattern(
    'my-plugin/hello-world',
    array(
        'title' => __( 'Hello World', 'my-plugin' ),
        'content' => "\n<p> Hello World</p> \n",
    )
);

After registration, the register_block_pattern() function should be called from the handler attached to the init hook, as described below.

 function my_plugin_register_my_patterns() {
    register_block_pattern( ... );
}

add_action( 'init', 'my_plugin_register_my_patterns' );

After registering block modes, they are visible in the block editor. More detailed documentation can be found in Block Mode Registration.

Block Mode Properties

In addition to the required title and content properties, the Block Editor manual also lists the following optional mode properties:

• title (Required) : Human-readable title for the pattern.
• content (required) : Block HTML tag for the pattern.
• description (optional) : Visually hidden text used to describe the pattern in the inserter. Description is optional, but it is highly recommended to use when the title does not fully describe the functionality of the mode. Description will help users discover patterns while searching.
• categories (optional) : an array of registered schema categories used to group block schemas. Block mode can be displayed in multiple categories. Category must be registered separately to be used here.
• keywords (optional) : Helps users discover alias or keyword arrays that pattern when searching.
• viewportWidth (optional) : Specifies an integer of the expected width of the mode to preview the mode proportionally in the inserter.
• blockTypes (optional) : an array of block types that the pattern expects to use. Each value needs to be the name of the declared block.
• inserter (optional) : By default, all modes appear in the inserter. To hide the mode so that it can be inserted programmatically, set inserter to false.

Here is an example of a reference pattern plugin code snippet taken from the WordPress blog.

 /*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
    'my-plugin/my-quote-pattern',
     array(
      'title' => __( 'Quote with Avatar', 'my-plugin' ),
      'categories' => array( 'text' ),
      'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
      'content' => ' <div><div>
<hr>
<div><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p> "Contributing makes me feel like I\'m being useful to the planet."</p> <cite>— Anna Wong, <em>Volunteer</em></cite>
</blockquote>
<hr>
</div></div> ',
      )
);

Using patterns in template files

After creating the pattern, you can use them in the theme template file using the following block tags:

An example from this GitHub repository shows the use of the "footer-with-background" pattern slug with the "tt2gopher" prefix in the TT2 Gopher block theme.

Early adopters of block themes and Gutenberg plug-ins also took advantage of the patterns in classic themes. The default Twenty Twenty and my favorite Eksell theme (here is the demo site) are good examples to show how to add the schema functionality to a classic theme.

Use Case Example 2: Twenty Twenty-Two

If the topic contains only a small number of patterns, development and maintenance are fairly easy to manage. However, if the block theme contains many patterns, such as the TT2 theme, the pattern.php file becomes very large and difficult to read. The default TT2 theme bundled with more than 60 schemas, demonstrating a refactored schema registration workflow structure that is easier to read and maintain.

Taking the TT2 topic as an example, let's briefly discuss how this simplified workflow works.

2.1: Registration Mode Category

For demonstration purposes, I created a TT2 subtopic and set it up on my local test site using some virtual content. Following TT2's method, I registered footer-with-background in its block-patterns.php file and added to the following array of schema categories.

 /**
* Registers block patterns and categories.
*/
function twentytwentytwentytwo_register_block_patterns() {
    $block_pattern_categories = array(
        'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ),
        'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ),
        'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ),
                // ...
    );

    /**
     * Filters the theme block pattern categories.
     */
    $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories );

    foreach ( $block_pattern_categories as $name => $properties ) {
        if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
            register_block_pattern_category( $name, $properties );
        }
    }

    $block_patterns = array(
        'footer-default',
        'footer-dark',
        'footer-with-background',
        //...
        'header-default',
        'header-large-dark',
        'header-small-dark',
        'hidden-404',
        'hidden-bird',
        //...
    );

    /**
     * Filters the theme block patterns.
     */
    $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns );

    foreach ( $block_patterns as $block_pattern ) {
        $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' );

        register_block_pattern(
            'twentytwentytwo/' . $block_pattern,
            require $pattern_file
        );
    }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

In this code example, each pattern listed in $block_patterns = array() is called by the foreach() function, which requires a schema directory file containing the schema names listed in the array, which we will add in the next step.

2.2: Add pattern files to /inc/patterns folder

Next, we should have all the listed schema files in $block_patterns = array() . Here is an example of a schema file footer-with-background.php:

 /**
 * Dark footer wtih title and citation
 */
return array(
    'title' => __( 'Footer with background', 'twentytwentytwo' ),
    'categories' => array( 'footer' ),
    'blockTypes' => array( 'core/template-part/footer' ),
  'content' => '
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>'.
      sprintf(
        /* Translators: WordPress link. */
        esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
        ' <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> | a modified TT2 theme.'
      ) . '</p>
      </div>
          ',
);

Let's reference the pattern in the footer.html template part:

This is similar to adding a title or footer part to a template file.

You can similarly add the pattern to the parts/footer.html template by modifying it to reference the slug of the theme pattern file (footer-with-background):

Now if we access the block editor's mode inserter, we can use "Footer with background".

The following screenshot shows the newly created footer pattern with background on the front end.

Now that the pattern has become an integral part of the block theme, many of which are bundled in the block theme—such as Quadrat, Seedlet, Mayland, Zoologist, Geologist—follow the above workflow. This is an example of the Quadrat theme /inc/patterns folder that contains a block pattern registration file and a series of files containing the content source and the required pattern title in the return array() function.

Section 2: Create and load patterns without registration

Please note that this feature requires WordPress 6.0 or Gutenberg plug-in 13.0 or higher to install in your site.

This new WordPress 6.0 feature allows for standard file and folder registration modes, bringing conventions similar to /parts, /templates, and /styles.

This process, as described in this article, involves the following three steps:

• Create a pattern folder in the root directory of the theme
• Add plugin style pattern title
• Mode source content

The typical pattern title tags obtained from the article are as follows:

 <?php /**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
??>

As mentioned in the previous section, only the title and Slug fields are required and other fields are optional.

Referring to the examples in a recently published topic, I refactored the schema registration in the TT2 Gopher Blocks demo topic prepared in a previous article on CSS-Tricks.

In the following steps, let's explore how to refactor the footer-with-background.php pattern registered with PHP and used in the footer.html template.

2.1: Create a /patterns folder in the root directory of the theme

The first step is to create a /patterns folder in the root directory of the TT2 Gopher theme, and move the footer-with-background.php pattern file to the /patterns folder and refactor it.

2.2: Add schema data to file title

Next, create the following schema title registration field.

 <?php /**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
??>

The schema file has a top title field written as a PHP comment. followed by block-content written in HTML format.

2.3: Add schema content to the file

For the content part, let's copy the code snippet in single quotes (for example, '...'), start with the content part of footer-with-background, and replace:

    <div style="padding-top:35px;padding-bottom:30px">
    <p>Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
    </div>

The complete code snippet of the patterns/footer-with-background.php file can be viewed on GitHub.

Note that /inc/patterns and block-patterns.php are extras , not required in WordPress 6.0 and are included only for demonstration purposes.

2.4: Reference pattern slug in template

Adding the footer-with-background.php pattern of the above refactored footer-with-background.php template to the footer.html template is exactly the same as described in the previous section (Section 1, 2.2).

Now, if we view the site in the footer part of the site in the block editor or in the browser, the footer part is displayed.

Pattern category and type registration (optional)

To classify block patterns, you should register the schema categories and types in the functions.php file of the topic.

Let's consider an example of registering a block pattern category from the TT2 Gopher topic.

After registration, the mode will be displayed in the Mode Insert along with the core default mode. To add topic-specific category tags in the pattern inserter, we should modify the previous code snippet by adding the topic namespace:

 /**
* Registers block categories, and type.
*/

function tt2gopher_register_block_pattern_categories() {

$block_pattern_categories = array(
  'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ),
  'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ),
  'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ),
  // ...
);

/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories );

foreach ( $block_pattern_categories as $name => $properties ) {
  if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
    register_block_pattern_category( $name, $properties );
  }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

footer-with-background mode is displayed in its preview (if selected) with the mode inserter:

This process greatly simplifies the process of creating and displaying block patterns in block themes. It is available in WordPress 6.0 without the need for the Gutenberg plug-in.

Sample topics without mode registration

Early adopters have started using this feature in their block themes. Some of the topic examples provided in the topic directory that can load patterns without registration are shown below:

• Archeo – 12 modes
• Pendant – 13 modes
• Remote – 11 modes
• Skatepark – 10 modes
• Stewart – 17 modes
• Livro – 16 modes
• Avant-Garde – 14 modes

Section 3: Creating and Using Patterns with Low Code

The official schema catalog contains creative designs contributed by the community and can be copied and customized as needed to create content. Using patterns in the block editor has never been easier!

Any pattern from growing directories can also be added to the block theme by simply "copy and paste" or including them in the theme.json file by referencing its directory pattern slug . Next, I'll briefly explain how to easily implement this with very limited code.

Add and customize schemas from schema directories

3.1: Copy the mode from the directory to the page

Here I am using FirstWebGeek for the footer part pattern from the schema directory. Copy mode by selecting the Copy Mode button and paste it directly into the new page.

3.2: Make the required customization

I only made some changes to the color of the font and button background. Then copy the entire code from the code editor to the clipboard.

If you are new to using the Code Editor, go to the options (with three dots, top right corner), click the Code Editor button, and copy the entire code from here.

3.3: Create a new file in the /patterns folder

First, let's create a new /patterns/footer-pattern-test.php file and add the required schema title section. Then paste the entire code (step 3, above). Patterns are classified in the footer area (line 5), and we can view newly added patterns in the Pattern Insert.

 <?php /**
 * Title: Footer pattern from patterns library
 * Slug: tt2gopher/footer-pattern-test
 * Categories: tt2gopher-footer
 * Viewport Width: 1280
 * Block Types: core/template-part/footer
 * Inserter: yes
 */
??><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>



<p style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>



<ul></ul>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>



<p style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[email protected]</p>



<p style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>



<p style="font-size:16px">Lorem ipsum dolor sit amet, consistetur ut laborer et dolore magna aliqua ipsum dolor sit</p>


</div>
</div>
</div>

3.4: View new mode in the inserter

To view the newly added Footer Mode from the Pattern Library, go to any post or page and select the Insert icon (the blue plus sign in the upper left corner) and select the TT2 Gopher – Footer category. The newly added mode appears on the left panel, as well as other footer modes and their preview to the right (if selected):

Register the mode directly in the theme.json file

In WordPress 6.0, you can use the following syntax to register any required schema from the schema directory in the theme.json file. The 6.0 development note states that "the pattern field is an array of [ Schema Slug ] in the schema directory. The pattern slug can be extracted from [URL] in a single schema view in the schema directory."

 {
    "version": 2,
    "patterns": ["short-text", "patterns-slug"]
}

This short WordPress 6.0 feature video demonstrates how to register a pattern in the /patterns folder (at 3:53) and how to register the pattern in the mode directory in the theme.json file (at 3:13).

The registered mode can then be used in the Mode Insert search box, and then it can be used like the theme-bound mode library.

 {
  "version": 2,
  "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

In this example, the pattern slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter from the previous example is registered via theme.json.

Page creation pattern model

As part of the Build Using Patterns program, WordPress 6.0 provides theme authors with a modal modal option to add page layout modes to block topics, allowing site users to select page layout modes (e.g., about pages, contact pages, team pages, etc.) when creating pages. Here is an example taken from the development instructions:

 register_block_pattern(
    'my-plugin/about-page',
    array(
        'title' => __( 'About page', 'my-plugin' ),
        'blockTypes' => array( 'core/post-content' ),
        'content' => '
        <p>Write you about page here, feel free to use any block</p>
        ',
    )
);

This feature is currently limited to page post types and is not applicable to "post post types".

You can also completely disable page creation mode modality by removing post-content block types for all modes. A sample sample code is provided here.

You can follow and participate in the discussions in GitHub, and the discussion links are listed in the Resources section below.

Build a page using the schema directory

Similar to the page builder, you can also use the pattern in the directory to create the desired post or page layout. The GutenbergHub team created an experimental online page builder application (introductory video) using the schemas in the schema directory. The code from the application can then be copied and pasted into the site, which greatly simplifies the process of building complex page layouts without coding.

In this short video, Jamie Marsland demonstrates (at 1:30) how to use the application to use the required page section in the directory to create an entire page layout similar to the page builder.

Summarize

Mode allows users to recreate their commonly used content layouts (e.g., hero pages, call to action, etc.) in any page and reduces the barriers to previously inability to present style content without coding skills. Just like plugins and theme directories, the new schema directory gives users the option to select various schemas from the schema directory and write and display content in style.

In fact, the block mode will change everything, which is undoubtedly a transformative feature in the WordPress theme field. When the full potential of “Use Pattern Build” work is available, this will change the way we design block themes and create beautiful content even with only low-code knowledge. For many creative designers, the pattern catalog may also provide a suitable way to demonstrate their creativity.

resource

WordPress 6.0

• WordPress 6.0 Domain Guide (WordPress Core)
• Explore WordPress 6.0: Style variations, block lock UI, writing improvements—22-minute video (Anne McCarthy)
• WordPress 6.0 features in 4 minutes (Dave Smith)
• New in WordPress 6.0: new blocks, style switching, template editing, Webfonts API, and more (Kinsta)

Create a pattern

• Introduction to Block Mode (Edited on the Site)
• Block Mode Introduction Video, 14 Minutes (Learn WordPress)
• Block Mode (Block Editor Manual)
• So you want to create a block pattern? (WordPress Blog)
• How to Create and Share Low Code Block Mode in WordPress (GoDaddy)

Mode Enhancement (GitHub)

• Use Pattern Building #38529
• Pattern as section element #39281
• Add: Option to select mode when page creation. #40034
• Block mode used for page creation. #38787
• Added: Page Start Options (Templates and Patterns) #39147

Blog Posts

• Gutenberg Mode: The Future of Page Building in WordPress (Rich Tabor)
• Speed ​​up WordPress site building using block mode (GoDaddy)
• Block mode will change everything (WP Tavern)

The above is the detailed content of How to Create Block Theme Patterns in WordPress 6.0. For more information, please follow other related articles on the PHP Chinese website!