Experimental: Introduction to block patterns


Block patterns is one of my favorite new features.

They require Gutenberg to be installed, but you do not need to have full site editing enabled.

Block patterns, are blocks that are combined together to create layout elements.

So they are much easier to create than custom blocks, but they are also limited to existing blocks.

They can include core blocks, or blocks or shortcodes from plugins.

For example, you can have a cover block with a beautiful background and a header, and then you can add your contact form inside of it.

[Screen: The block and pattern selector panel is opened by selecting the Add block button. ]

When you turn this into a pattern, your user or your site creator,
can go into this panel and just select the pattern and place it anywhere they want.

There are some basic patterns that are already included in Gutenberg,
you can preview them here.

In a way, patterns work a little bit like reusable blocks.

Once a pattern is added to the content, you can change everything.

You will still be able to go to the panel and select and add a copy of the original pattern.

You can have multiple copies of the same pattern but with different styling.

[Screen: The width and background color of the pattern is changed, and a new copy of the pattern is added to the same post.]

While testing, however, I did learn that we are not able to place patterns inside group blocks, columns or cover blocks. Basically, they can’t be inner blocks.

You want to design your pattern with that in mind.

So how do you design a pattern?
It is really just putting blocks together inside the editor.

Perhaps adjust some styles to make the pattern look great,
and then you go to the code editor mode, and copy the whole block pattern.