Patterns and Gutenberg block settings.

Patterns are ready made page sections you insert into your page with one click. When setting up your site, most Hestia settings are in the customiser, three overrides are in the post editor sidebar.

But you’ll spend most of your time building individual posts and pages using patterns. Hestia really excels here.

The important points are:

You can access 14 Hestia specific patterns by going to:

1. Click the blue, Block inserter, plus icon.
2. Select the Patterns tab.
3. Scroll down and select the Hestia tab.
4. Scroll the sidebar to see all the Hestia patterns.

When you find a pattern you like, click to inset it in your page at the cursor’s location.

Whenever I’m building a new web page or blog post and need more than a headline, paragraph text, or the image block, I always look for a ready made Hestia pattern before building any fancy layouts myself.

You can use these layout patterns as-is or customize them to your needs.

Hestia specific Gutenberg settings.

You build WordPress web pages and blog posts using the block editor, WordPress call this editor Gutenberg.

Unless you’ve installed a third party block plugin, such as Otter Blocks, or Orbit Fox, you use the the default WordPress block editor to insert headlines, paragraphs, lists, buttons, and images, into your page.

You can build those page elements into grids and columns using the group and column blocks.

Hestia theme provides a few extra settings that are not available when using a default WordPress theme such as Twenty Twenty theme.

Block Spacing.

One useful Hestia specific setting is block spacing. Block spacing affects top level blocks in the container you apply the setting to.

In the image below, block spacing is applied to the right hand column. So, space is applied between each of the top level blocks in that column. In this instance, the top level blocks are the group blocks. The block spacing is not applied to the individual blocks inside the group blocks because Flexbox cannot break into nested boxes, or out of the box it is applied to.

If you wanted to apply block spacing between the headlines and paragraphs, you’d have to select each group block one at a time and apply block spacing.

I also use block spacing to apply a gutter, or space between the individual columns in a columns block.

Block spacing comes from a type of computer code called Flexbox. To learn more about how Flexbox settings work read this excellent beginners Flexbox tutorial. If you do view that tutorial, pay special attention to the space-between and space-around settings.

Width settings applied to group and columns blocks.

If you build your own fancy page layouts using the group and column blocks, take care when applying the width setting.

How I apply width settings.

• I set the top level block to none, or wide.
• I set all inner blocks to none.
• I rarely, if ever, use the full width setting.

Width settings problem!

If you apply a wide or full width setting to inner, or nested blocks, your layout can break. Experiment with the width settings and get used to how they work.