Block Editor: theme.json – Register Patterns
Register block patterns via theme.json easily. Make patterns of existing or registered block editor blocks and add them via global theme.json file.
In adherence to our rigorous editorial policy, this article's content has undergone careful testing for accuracy and trustworthiness and hence, this content is marked source of information. View editorial history of this content.
WordPress theme.json offers registeration of block patterns via theme.json. It reduces the complexity or workload of registering patterns in classic themes via functions.php. No matters your theme is classic build or based on full site editing concept, theme.json works for both builds nicely.
There are 3 steps to register or add patterns via theme.json: –
Step 1: Create a directory in theme root named as patterns
.
Since WordPress 6.0 version, WP considers all valid PHP files having pattern header, just like plugin or page templates, in patterns directory as available patterns.
Step 2: Add your first pattern file inside patterns directory in the following manner and name it as something pattern-one.php
<?php
/**
* Title: Pattern Name
* Slug: my-theme-specific-patterns/pattern-one
* Categories: custom-registered-category, featured
* Keywords: keyword1, another one, more
* Inserter: true
*/
?>
<!-- Pattern Output Starts Here -->
In this example, I added a pattern containing 2 paragraph
blocks wrapped by a group
block. This is a simple pattern. Make a pattern of blocks and name your different patterns. For each new pattern that you need, create a separate file in patterns directory and note down the pattern slug that you define.
Block Pattern File Header Parameters
Follow these guidelines to define pattern file header: –
- Title:
required
– Name of the pattern. - Slug:
required
– Unique id of this pattern. This will be used in theme.json. - Categories:
required
– Names of block editor pattern categories where you want this pattern to appear in Inserter Panel. Either use existing categories such as featured or use your theme registered categories (if available). If not available, the pattern will be shown under Uncategorized category. - Keywords:
optional
– add some keywords to search this pattern in inserter panel - Inserter:
optional
– Add a Boolean value true to show it in the inserter panel or not. You can keep it false to use pattern programmatically somewhere. - Block Types:
optional
– one or more block types separated by comma
Step 3: Add your pattern slug in theme.json in patterns (array of strings) following the below code. Patterns array is defined at top level. It is not nested under settings or styles or templateParts.
{
"version": 2,
"patterns" : [
"my-theme-specific-patterns/pattern-one",
"my-patterns/another-pattern"
],
"settings": {...},
"styles": {...},
"templateParts" : []
}
Digital Setups has enforced a strict sourcing policy. Every content piece published on our website is passed through strict editorial review for contextual correctness, communication ethics, and programmatic tests wherever required. Our team research solutions from only credible, authentic, and trustworthy sources. Learn more about our editorial process.
This article may have additional citations but they are not yet reviewed for trustworthiness. We will add them here at our earliest.
Based on our editorial policy, we update our content time to time to ensure its usefulness, reliability, and validity.
Our standardized editorial process ensures right, timely, and usefulness updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.
Readers who read this also found these helpful:
- Search Console: Fix Not Found (404) Errors in Page Indexing
- Monetize Facebook Page with Google AdSense
- Misleading or Clickbait Push Notification Hurts SEO
- Search Console: Fix “LCP issue: longer than 2.5s (mobile)” Issue
- Why my site webpages are not indexing properly in search results?
- Block Editor: Pattern vs. Variation vs. Style vs. Transformation
- How to Register Trademark in Pakistan: For SMCs, Entrepreneurs, & Freelancers
- SafePay – Payment Gateway in Pakistan
- Woo Express – How it works, Features, & Pricing
- Woo Express vs. Pressable WooCommerce Hosting