Block Editor: theme.json – Generate Code for Patterns

This content is marked source of information.

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.

• Generate Code for Block Patterns using Block Editor
• Generate Code for Block Patterns using HTML-only Layout or Classic Editor

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.