Categories
News

Creating a new course about block based themes

I wanted to tell you what I have been working on lately: A new course about block based themes. The course will have a mix of written content and video content.

This is the first full course that I have created – it is not complete yet, but I am happy with the outcome so far.

The course will include lessons on block grammar, block styles and patterns, block based theme structure, templates and template parts and more.

Before releasing the course, -I could really use your help.

I would like to know what questions you have about full site editing, if you have tried the experimental features, and what your thoughts were; -and I would love to know what documentation or material you feel would have helped you learn about full site editing.

If you would like to help me test the new course before I release it, please email me on carolina@themesbycarolina.com.

Categories
News

Register_pattern has been renamed

In Gutenberg version 8.1, the PHP function used to create block patterns has been renamed from register_pattern to register_block_pattern.

Register_pattern is deprecated and will be removed in Gutenberg version 8.3.

Tutorials are being rewritten to match this.

Categories
Beginners Tutorials

What is a custom block pattern?

A block pattern is a group of blocks, or a block with a predefined content and style.

The purpose of a block pattern is to make it easier and faster to add common design elements and sections to a page or post.

At the time of writing, the block pattern selection is available only when the Gutenberg Plugin is installed and activated.

In the editor toolbar, you will find a new icon which opens a sidebar panel with patterns:

The Block Pattern selection tool is a sidebar in the document settings.

There are four example patterns available by default:

  • Two Columns of Text
  • Two Buttons
  • Cover
  • Two images side by side

How to regsiter a block pattern

To register a block pattern, themes and plugins can use the new PHP function called register_block_pattern.

Note that this function was renamed from register_pattern to register_block_pattern in Gutenberg version 8.1.

You can read the official documentation for the function here:

register_block_pattern accepts a name (prefix), a label, and an array with two parameters: Title and content.

  • Title is the name of the pattern that will be visible in the pattern selection panel.
  • Content is the HTML source code of your block pattern.

Example:

register_block_pattern(
    'theme-prefix/block-pattern-label',
    array(
        'title'   => __( 'Hello Quote', 'textdomain' ),
        'content' => '<!-- wp:quote --><blockquote class="wp-block-quote hello-block"><p>Hello World of Blocks</p><cite>Carolina</cite></blockquote><!-- /wp:quote -->',
    )
);

To get the correct HTML code to use for your pattern, you can do the following:

  • First, create your block pattern in the editor.
  • Then open the editor toolbar, and select Code editor.

Locate your blocks, copy the code, and add it the content parameter.

<!-- wp:quote --><blockquote class="wp-block-quote hello-block"><p>Hello World of Blocks</p><cite>Carolina</cite></blockquote><!-- /wp:quote -->

Since your HTML contains double quotes, “, make sure that the content is wrapped in single quotes, or that you replace the double quotes with \”. Otherwise your code will break.

The preview of the block is created for you automatically.

Custom CSS and identifiers for block patterns

It is worth noting that block patterns have no identifier once they are added to your content.

Even though the patterns have a name and a label, these are not applied to the code.

If you wish to add specific styles, or if you want to be able to identify your block patterns on the front, make sure that you add a custom CSS class while creating the pattern.

Naming block patterns

The name and label of the block pattern must be unique, because otherwise you will overwrite other block patterns.

The title; the visible name of the block pattern, is not unique. So to help identify your patterns, I recommend that you include your brand name, plugin- or theme in the title.