Just revamped. Got feedback? Share now.

Privacy
Subscribe

Block Editor: theme.json – Generate Code for Patterns

By Aqsa Jamil Published 21 Nov, 2022 Modified 22 Nov, 2022 Viewed 59 times Read in 2m 6s
Experience Based
Content Validity: Valid and Applicable Comprehension: Level 2 – For Professionals

Generate code for patterns registered via theme.json easily via 2 methods.

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.

×

Your feedback matters.

Our standardized editorial process ensures right, timely, and healthy updates to our content. Your honest opinion drives significant improvement to our content. We appreciate you are taking time to share that.

×