New features for working with patterns and themes in WordPress 6.0

WordPress 6.0 brings three new features to Themes to offer site owners patterns. Register selected patterns from the public pattern directory, add theme patterns to a separate folder /patterns, and add patterns that can be offered to use when creating a new page. 

Pattern registration from Pattern Directory for themes

With WordPress 6.0 themes can easily register patterns from Pattern Directory through theme.json. To accomplish this, themes should use the new patterns top level key in theme.json.

Within this field, themes can list patterns to register from Pattern Directory. The patterns field is an array of pattern slugs from the Pattern Directory. Pattern slugs can be extracted by the url in single pattern view at the Pattern Directory. 

Example: This url https://wordpress.org/patterns/pattern/partner-logos the slug is partner-logos.

{
    "version": 2,
    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

Noting that this field requires using the version 2 of theme.json.

The content creator will then find the respective Pattern in the inserter “Patterns” tab in the categories that match the categories from the Pattern Directory.

Place Patterns in the subfolder /patterns of your theme

Themes can now define blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. patterns as files in the /patterns folder:

Each pattern file consists of a set of pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party-style headers followed by the pattern’s actual source:

<?php
 /**
  * Title: Hello
  * Slug: my-theme/hello
  * Categories: featured, text
  */
?>
<!-- wp:heading -->
  <h2>Hello</h2>
<!-- /wp:heading -->

Motivation

While all themes benefit from this 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., it is especially convenient for block themes, where conventional folders like templates, template-parts and now patterns reduce the role of functions.php as a control structure. This API also paves the way for any future theme-editing tools that integrate with the block editor.

Note that this is not a breaking change. Much like plugins, themes have been able to register block patterns since the introduction of register_block_pattern() in WordPress 5.5, and that interface is not expected to change.

Observations

• For now, the only format supported for these files is PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. While a simpler HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. format has been considered, PHP offers theme developers an escape hatch, should the pattern have any special content that dynamic blocks haven’t yet absorbed. For instance:

<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/hello.png">

• As a general reminder, these PHP blocks are only run upon loading the block editor in order to compute the patterns. Once inserted into a post, patterns are static.

Supported fields

• Title (required) (implicitly translatable)
• Slug (required)
• Description (implicitly translatable)
• Viewport Width
• Categories (comma-separated values)
• Keywords (comma-separated values)
• Block Types (comma-separated values)
• Inserter (yes/no)

Props to @ntsekouras.

#6-0, #dev-notes, #dev-notes-6-0