Block Editor: theme.json – Generate Code for Patterns
Generate code for patterns registered via theme.json easily via 2 methods.
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.
Patterns are helpful in reusing theme specific or organization specific layouts. For example: you can create pattern for custom callouts, announcement, table with images, etc. or as needed.
At Digital Setups, we use patterns for callouts inside our posts.
There are 2 ways you can generate patterns and then register your pattern in theme.json to make that pattern available in inserter panel.
Method 1: Using Block Editor
Step 1: Create a new post or page from backend. Since we are about to generate pattern for block editor, therefore, make sure your post/page/post-type has block editor enabled.
Step 2: Create a layout of blocks using available blocks in your theme. If you are a theme developer and want to create ready to use patterns or layouts that are compatible with block editor, this is a great option.
For example: in our case, we added a cover block. Inside that cover block we added a column block with 2 columns; added the heading, image, paragraph, and button. We also added CSS classes via settings panel for heading, columns, and button.
Step 3: Once done, click on the 3 dots usually seen on the top-right besides settings icon in the view of post edit screen. From the ‘Editor‘ options, enable ‘Code Editor‘. This will show you the code for your generated layout of blocks. Just copy that.
Step 4: Go to the patterns directory in your theme. Create a new file under patterns directory and name it something as per your pattern recognition. It should be the PHP file. After the header, paste the copied code as your pattern code. Save the file. That’s it.
Note: Ensure that you’ve correctly added the block pattern header in the pattern file and registered the pattern properly using theme.json.
Step 5: Use your newly saved or updated pattern from inserter panel and see the output. It will be exactly same as you created earlier.
Method 2: Using Custom HTML
You can prepare a custom HTML layout anywhere or using Classic Editor (use Text view to copy code) and copy paste that layout code in your pattern file.
Once you use this HTML-only pattern, block editor will consider it as a Classic Editor block that outputs your custom HTML contents.
Tip: Use Method 1 to utilize the full potential of block editor patterns. The possibilities are unlimited and you can add as many patterns as you want based on either core blocks only or theme-specific ones.
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:
- Misleading or Clickbait Push Notification Hurts SEO
- How to Register Trademark in Pakistan: For SMCs, Entrepreneurs, & Freelancers
- Verify Company Registration Status of Any Country
- Take back your business name used by someone on Social Media
- Does daily manual or dynamically changing content on page impact SEO?
- Custom Rewrite Rules vs. REST Routes in WordPress
- What is trademark infringement in digital business?
- Block Editor: theme.json – Color Palette
- Does Add Me Fast Traffic Damage Google AdSense Account?
- Using ‘Advertisement’ or Similar Term above AdSense Ads