Block Patterns in GenerateBlocks Free

Updated November 8, 2023

The Pro version of GenerateBlocks includes block patterns but what if you don’t have GenerateBlocks Pro?

Here are two ways to create a block pattern with GenerateBlocks.

First, what is a block pattern?

A definition from WordPress,com

Block Patterns are a collection of predefined blocks that you can insert into pages and posts and then customize with your own content. Using a Block Pattern is an easy way to create beautiful layouts that combine different blocks to produce professional designs.

Why Register Block Patterns

Note: WordPress 6.3 introduced a new way to work with block patterns. Reusable blocks are now called synced patterns. When a pattern is synced, any change you make to it affects other places where it’s used. The patterns I am writing about are the ones you would use unsynced (not synced). They can be adapted and changed without affecting other places where they are used on the site.

So if you use one of these not synced patterns on a page of your website, you can change it to whatever you want. You don’t have to worry that the rest of your site will be affected because you used the pattern elsewhere and changed how it looks. With synced patterns, the pattern (the layout design) looks the same wherever the pattern is used.

To create a pattern, put the elements you want to use together. So in the case of GenerateBlocks, I have a Container, an Inner Container, a Headline and a Button.

To create this pattern, I used the List View to choose the larger container where the inner container, headline, and button were located.

I clicked on the three vertical dots. Then I chose Create pattern. I made sure the pattern was not set to Synced. Then I hit the Create button and gave the pattern a name.

If you’re using GeneratePress and GenerateBlocks, block patterns can act as mini templates for your site. When you group blocks together in reusable blocks/synced patterns, you risk problems if you accidentally change a reusable block/synced pattern before converting it to normal blocks. If you’ve used the reusable block/synced pattern somewhere else on the site and you change it, the change is shown in every instance that reusable block/synced pattern appears on your site. But after you insert an unsynced block pattern in the block editor, you can change its design without affecting other places where it’s been used and you don’t lose the original block pattern.

How to create a custom block pattern for GenerateBlocks with code

I wrote this before WordPress 6.3 introduced a new way of building patterns. Carolina Nymark offers an excellent and detailed explanation of block patterns and how to create them here.

The first thing you want to do is create a block using GenerateBlocks.

Say you want to create a block pattern that includes a box with a background colour, a headline and a button.

You’d choose a container block, add the inner container and set the background to the colour you want. Set the padding here. Then add a headline to the container, style it so you have the spacing you want. Add and style the button.

Once you’re happy with what you’ve created (I haven’t tested this example for responsiveness but you’ll want to check how your block looks on desktop, tablet and mobile screens), without leaving the page editing screen in WordPress, look for the three vertical dots on the top right of your page’s screen. Click on them and look for Code editor. Copy all the code from the block you just created. Put it in a text file (Notepad on a PC would work).

To be safe, if you paste the code between double quotes, you’ll need escape all the code before pasting it. Explanation and link here. 1

Visual Studio Code VSCodium is great for editing theme files. If you can connect your site directly to VSCodium, that is amazing. Otherwise, you’ll update your site’s code by uploading the new and/or changed files via SFTP or by using a plugin to add a code snippet to your site.

Head over to functions.php in your child theme. If you don’t have a child theme, use a plugin such as Code Snippets to add the code.

Register the new block pattern (adapt this code as you wish). Source

The code you set aside in Notepad goes between single quotes (‘ ‘) in the ‘content’ line. Where it says ‘textdomain’, write your theme’s slug.

function sohdocs_register_block_patterns() {
        register_block_pattern(
            'sohdocs/my-example',
            array(
                'title'         => __( 'Text Button Block', 'textdomain' ),
                'description'   => _x( 'A block with a headline and button, the block background is purple, and the button is red with white text.',  'textdomain' ),
                'content'       => '<!-- wp:generateblocks/container {"uniqueId":"598b959d","backgroundColor":"#8229DE","isDynamic":true,"blockVersion":3,"display":"block","sizing":{"minHeight":"300px","minWidth":"300px","maxWidth":"300px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"0efe5136","isDynamic":true,"blockVersion":3,"useGlobalMaxWidth":true,"alignment":"center","marginRight":"auto","marginLeft":"auto","className":"gb-headline gb-headline-5b8c7f79 gb-headline-text"} -->
<!-- wp:generateblocks/headline {"uniqueId":"64bd94f1","blockVersion":2,"lineHeight":1.5,"marginBottom":"60","paddingTop":"60","backgroundColor":"","textColor":"var(\u002d\u002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":""} -->
<h2 class="gb-headline gb-headline-64bd94f1 gb-headline-text">Test Box</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button {"uniqueId":"1c834e26","hasUrl":true,"target":true,"blockVersion":3,"display":"inline-flex","flexDirection":"column","alignItems":"center","paddingTop":"10","paddingRight":"20","paddingBottom":"10","paddingLeft":"20","borderRadiusTopRight":"10","borderRadiusBottomRight":"10","borderRadiusBottomLeft":"10","borderRadiusTopLeft":"10","backgroundColor":"#d2042d","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<a class="gb-button gb-button-1c834e26 gb-button-text" href="https://wbcollective.dev/" target="_blank" rel="noopener noreferrer">Click Me</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->',


                'categories'    => array( 'text' ),
                'keywords'      => array( 'cta', 'demo', 'example' ),
           
            )
        );
}
add_action( 'init', 'sohdocs_register_block_patterns' );

Then when you’re editing your site, look for your pattern when you hit the plus sign to add a block. Choose Browse all and look for the Patterns tab. Your pattern should be in the category you gave it in your code (in this case, ‘text’) or you should be able to find it by using the keywords you listed and its name should appear.

Insert the pattern wherever you want and adapt it as you see fit.

If you have any questions or need assistance with your WordPress website, please don’t hesitate to reach out to me at hello@stephohanley.wpenginepowered.com.