This tool is not yet available on WordPress.org. Download the plugin from this website, upload it to your WordPress site and then activate it! You’ll find all the new helpful bits that Pattern Builder offers in the WordPress Editor (both the Site Editor and the Page Editor).

WordPress comes with tools to browse and insert patterns, including patterns created with Pattern Builder. You can’t choose to edit patterns from that interface but it’s still useful for inserting them if that’s a workflow you’re already familiar with. Just click the ‘Block Inserter’ button (the blue Plus at the top-left of the Editor) and choose the ‘Patterns’ tab. You’ll be able to browse and insert all of your patterns from there by clicking or dragging them onto your workspace.

Additionally you can use the new Pattern Builder Browser by clicking the icon in the top-right of the Editor. You’ll likewise be able to click or drag to insert patterns onto your workspace. Alternately you can drag a pattern directly into the ‘List View’ instead of the Editor Workspace for easier placement of your patterns.

From the WordPress Full Site Editor you can use the Patterns option to browse all of your patterns just like before. Only now you will notice that ALL of the patterns are considered ‘My Patterns’ (not just ‘User Patterns’). Most importantly none of them are ‘locked’ and you can select any of them to open them in the WordPress Editor to make changes.

There are Three Ways to create new patterns.

The first is to use the ‘Add Pattern’ in the Site Editor. You’ll be presented with an option to name your pattern, assign it to categories and make it a ‘Synced’ pattern or not. Creating a pattern in this way will create a User Pattern, but you can change this later.

A ‘User Pattern’ stores the content of the pattern in the WordPress database as a ‘wp_block’ Post Type. It is available only on the site that it was created on (or imported into). They are instantiated as ‘wp:block’ in Gutenberg block markup and reference the ID of their Post. Without the aid of something like Pattern Builder this is the only type of Pattern that can be created or edited in the WordPress Editor. User Patterns have the option of being ‘Synced’ or ‘Unsynced’. User patterns cannot have any dynamic (PHP) logic.

<!-- wp:block {ref:123} /-->

A ‘Theme Pattern’ is stored as a PHP file in your Theme’s ‘/patterns’ folder. They have special metadata that defines their categories, associations, etc. Since they are PHP files they can use PHP logic to do special things (like reference resources like images from your Theme or localize content to make the pattern internationalization ready). Pattern Builder makes use of this by writing PHP logic to make Theme Patterns more powerful. By default Theme Patterns can ONLY be ‘Unsynced Patterns’ but with tools like Pattern Builder and Synced Patterns for Themes a pattern can include additional metadata that allows it to be treated like a ‘synced’ pattern.

<!-- wp:pattern {"slug":"SLUG"} /-->

<?php
/**
* Title: Theme Image Test
* Slug: simple/theme-image-test
* Description: A simple pattern
* Categories: media
* Synced: yes
*/
?>
<!-- wp:group -->
  <div class="wp-block-group">
  <!-- wp:heading -->
                      ...

An ‘Unsynced’ pattern is a starting place for content. When you add an unsynced pattern to your content it’s the same as ‘copy’ and ‘pasting’ content. You’re free to make changes or additions to these patterns without effecting anything else on the site.

When building Theme Patterns you may be using image assets that will need to be included when distributing your theme. In the Pattern Builder Browser selecting ‘Configuration’ will bring you to a screen that gives you the option to ‘Import Images to Theme’. With this selected any time you save a Theme Pattern the images used in that pattern are downloaded to your Theme’s asset folder and referenced from there. Because referencing images in this way is dynamic a small amount of PHP is used in your pattern to reference those images.

Any block that uses images (such as the Cover, Image, Group, etc) works to import the image.

Since your use-case might be referencing images from a CDN or something this is an optional step (though it is enabled by default).

<!-- wp:image {"id":1309,"sizeSlug":"large","linkDestination":"none"} -->
  <figure class="wp-block-image"><img src="<?php echo get_stylesheet_directory_uri() . '/assets/images/twenty_bellows_logo.png'; ?>" alt="" class="wp-image-1309"/></figure>
<!-- /wp:image -->

Some themes (especially those made available for wide distribute) need to have their content localized so that it is available for international distribution.

From the Pattern Builder Browser select the ‘Configuration’ option and make sure the ‘Localize Patterns’ option is checked. When enabled, any Theme Pattern that is saved will localize the content in any of the blocks. Any block with text (including blocks that can only be customized via code such as the label of Query Pagination blocks) will be localized with a small amount of PHP code.

<blockquote class="wp-block-quote">
  <!-- wp:paragraph -->
    <p><?php echo wp_kses_post( 'This is a paragraph in a quote', 'simple-theme' ); ?></p>
  <!-- /wp:paragraph -->
  <!-- wp:heading -->
    <h2 class="wp-block-heading"><?php echo wp_kses_post( 'And this is a heading in one', 'simple-theme' ); ?></h2>
  <!-- /wp:heading -->
</blockquote>