Patterns API expanded to include template_types property

The Patterns APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. is a powerful feature in WordPress that allows developers to create pre-designed blocks of content that can be easily inserted into posts, pages, custom post types, and templates. With the introduction of WordPress 6.2, the Patterns API has been expanded to include a template types property. The property allows pattern developers to specify which templates their patterns fit in. For example, a pattern can declare its purpose is to be used on 404 templates or as author templates, etc. Any template in the WordPress hierarchy is supported.

This is a backend-only update. The work on the UXUX User experience parts is ongoing and will be available in future GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases – it is expected to arrive at the Site Editor in WordPress 6.3. The API provides WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. information on the patterns and template relationships. This information could be used for multiple purposes. The first usage, in thinking for WordPress 6.3, is to show the user some patterns that make sense on a template when the user starts creating a template. Users can start from a pattern instead of “blank” or the fallback template.

Technical details

The Patterns API’s register_block_pattern() function was updated to include a new template_types parameter. This parameter is an array of strings containing the names of the templates the template is intended for, e.g., 404, author, etc. The parameter template_types is optional, and using it is not mandatory to register a pattern.

The REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. was also extended to return the template types of a pattern in case there is one defined.

Testing

  1. Activate the Twenty Twenty-One theme.
  2. In the theme’s inc/block-patterns.php file, after the existing calls to register_block_pattern(), add the sample test pattern with the snippet below (Figure 1). Save the file.
  3. Open the post editor and then the browser’s Developer Tools (Chrome) or Web Developer Tools (Firefox) console.
  4. In the console, enter the following to retrieve the registered patterns: wp.apiFetch( { path: '/wp/v2/block-patterns/patterns' } ).then( console.log );
  5. Verify that the API response includes the pattern query/template-type-test, and template_types has 404 listed (Figure 2).

Figure 1: Twenty Twenty-One Test Code Snippet

register_block_pattern(
    'query/template-type-test',
    array(
        'title'      => __( 'Template type test', 'twentytwentyone' ),
        'templateTypes' => array( '404' ),
        'content'    => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
                        <p class="has-text-align-center has-x-large-font-size">404</p>
                        <!-- /wp:paragraph -->',
    )
);

Figure 2: API response output in Developer Tools Console tab

Screenshot of the Developer Tools console output of the example code

Props to @ironprogrammer for writing these detailed instructions, @bph and @webcommsat for review

#6-2, #dev-notes, #dev-notes-6-2