Patterns are pre-defined components structured from blocks. There are 2 types of patterns: block patterns and synced patterns (known as reusable components before WordPress 6.3).
A Block Pattern is a pattern you can inject into your content. It works like a dumb copy-paste. Once you inject the pattern, there is no proof it was a pattern. If you change the content or structure of one instance of this pattern, no other instances are affected.
Moreover, if you change the registered pattern itself, the already used implementations are not affected. It’s as if you pasted a set of blocks. Block patterns are commonly used for ready-to-go designs, like a testimonial card or an “about us” section.
A Synced Pattern is the counterpart to the Block Pattern. All instances of such a pattern are synchronized with the pattern’s definition. If you modify the default content or the structure of the pattern, all instances will automatically be updated.
Since WordPress 6.6, instances of Synced Patterns can have their own content, i.e., you can change the text or image displayed in a single instance of the pattern. This functionality is called “overrides” and it’s based on the Block Bindings API, which lets you bind dynamic data to blocks’ attributes (covered later).
Registering Patterns
There are 3 primary ways to register a pattern – in a PHP function, in a PHP file, and in the Block Editor.
To register a pattern in PHP, you have to call the register_block_pattern() function. This function accepts 2 parameters – the name of the pattern and an array of options. The only required options are ‘title’ and ‘content’. The title is self-explanatory. Content is a string containing the HTML for the pattern (you could copy that from the code editor). Note that you can only register standard Block Patterns this way. You can’t register Synced Patterns in code (at least not in any standard way).
Another way of registering a standard Pattern is by placing it in the /patterns folder inside your theme directory. This is mostly used for block themes, but it works in classic themes as well. WordPress scans all the files in this folder. A pattern needs to be a PHP file with correct header comments. The options looked for in the comments are almost the same as arguments accepted by the register_block_pattern() function, i.e. title, slug (name), categories, description, etc. You don’t need ‘content’, as the entire PHP file is the content.
The last way of registering a pattern is in the Block Editor itself, without any code. You can do that by selecting the blocks you wish to use in the pattern, clicking the 3 dots in the block toolbar, and clicking “Create pattern”. This will open a pop-up, allowing you to name the pattern and choose whether it should be synced or not. Patterns registered in the editor are stored in the database as posts with the wp_block post type.
Synced Pattern’s markup looks more like dynamic blocks rather than static blocks. That’s to say they don’t contain any static markup. They only include a ‘ref’ attribute, which points to the ID (post_id) of that pattern. Here’s what one might look like:
<!-- wp:block {"ref":65} /-->