Understanding the Power of Block Templates in WordPress

Block templates have already been touched on as one of the ways you can exercise layout control in the WordPress block editor. However, it’s easy to overlook just how much you can do with these templates to make it easier for your clients when adding content in WordPress. Adding informative placeholders, setting specific heading levels, automatically applying block styles or alignment, all of this can be done within templates. If you only know, and implement, them in their most basic state, you’re missing out on all those great advantages.

Block template basics

Block templates are just a predefined set of blocks that can be applied to a post type or an InnerBlocks area. Instead of starting with a blank canvas in these areas, the blocks defined within the template are initially there to work with.

Let’s say we’re setting up a post type with consistently structured content and that content will always include a heading, brief paragraph description, and then a button link with the button style of “Outline” applied.

With no template declared at all, every time you or your client go to add a post in WordPress, you will need to manually set up these same blocks every time. Not only is that not an efficient use of time, but it leaves a lot of room for error.

If block templates are used, for the above example, we could create a template a heading, paragraph, and buttons block, such as:

$template => array(
  array('core/heading'),
  array('core/paragraph'),
  array('core/buttons'),
)

This could be added to the function used when registering the post type. Then, when a client goes to add a new post type, they’ll see the correct blocks initially added, which is a huge improvement over a blank starting screen. But there’s still a lot of room for further improvement here.

• The client would need to remember to always set the correct heading level
• The client would need to remember to set the correct button style
• There are no placeholders so, while the blocks will be present, they’ll all be empty, which isn’t the most helpful

You don’t want your client to feel like they need to remember a bunch of steps when adding content to the site so as much as you can take off their plate to happen automatically, the better. So let’s improve this block template!

Including heading level in block templates

Anytime a heading is used in a template, including the heading level is recommended. This avoids the client having to remember to set the correct heading level every time and instead that will be done for them automatically. You can do this by changing:

array('core/heading')

to instead be:

array(
  'core/heading',
  array(
    'level' => 3
  )
)

You’ll see in the nested array, there is a level declaration for the heading. This example uses a 3, which means Heading 3 (h3) would be assigned. You can adjust this to a different level heading, as needed.

But wait, we’re not quite done improving the heading block within the template, let’s also add a placeholder so it doesn’t just say heading. You can do this within that same nested array.

array(
  'core/heading',
  array(
    'level' => 3,
    'placeholder' => 'Brief Headline Describing Item'
  )
)

Whether you want to use placeholders is up to you, but it can be helpful in providing insight into the type of content that should be put into each spot so it often feels better than a generic “Heading” placeholder.

How do you find out what attributes can be defined in block templates for core blocks? Looking for listed attributes in the Core Blocks Reference in the Block Editor Handbook is a good place to start. You’ll see if you go to the Heading block, it says content, level, placeholder, and textAlign are supported. There is also a great resource called the WordPress Core Blocks Explorer that can be useful in viewing available attributes for any block.

Adding placeholder content in a WordPress paragraph block

Just like with the heading block, there is opportunity with a paragraph block to provide clarity as to the type of content that should be placed within it. So let’s turn this:

array('core/paragraph')

into:

array(
  'core/paragraph',
  array(
    'placeholder' => 'A short description of this item'
  )
)

Understandably, you’d want to adjust the placeholder to what makes the most sense in any particular use case but you hopefully get the general idea. You can add additional attributes to automate selection of properties like text alignment and similar, as well, if it’s needed.

Adding button styles in a WordPress block template

Now that we’ve improved the heading and paragraph blocks used in our template, let’s turn our attention to the buttons block. The buttons block is interesting because, like the core/columns block, the core/buttons block is made up of nested blocks. The core columns block has a nested column block for each column area it has. The core buttons block is comparable is each individual button is its own block. The reason this is being called out is if you want to do something like influence the style of a particular button, it won’t work targeting the parent buttons block, you instead have to apply it to the nested individual button.

A bit confusing, so let’s first get structure in place. Our initial block template declaration was the bare minimal, just a buttons block:

array('core/buttons')

Let’s first flesh this out a bit more and get a nested array with an individual button in there:

array(
  'core/buttons',
  array(
    'contentJustification' => 'left',
  ),
  array(
    array(
      'core/button',
      array(
        'text'      => 'Button Label',
        'url'       => 'https://wordpress.org',
        'className' => 'is-style-outline',
      ),
    )
  )
)

You’ll notice in the first nested array, it’s the settings that are applicable to the overall buttons block, in this example the alignment of the buttons inside it. Next, you’ll see a nested array of the individual buttons inside the block, including an array of any attributes you want to apply to any given button.

To get the outline button style applied to the button, a class name of “is-style-outline” can be specified for the core/button block. Block styles always add a “is-style-*” class to the block, with the asterisk being swapped out for the name of the block style. By just applying the class name to the block, you achieve the same effect as selecting that block style.

Reviewing the Differences

Stringing together all of our changes, the new block template would look like:

$template => array(
  array(
    'core/heading',
    array(
      'level' => 3
    )
  ),
  array(
    'core/paragraph',
    array(
      'placeholder' => 'A short description of this item'
    )
  ),
  array(
    'core/buttons',
    array(
      'contentJustification' => 'left',
    ),
    array(
      array(
        'core/button',
        array(
          'text' => 'Button Label',
          'url' => 'https://wordpress.org',
          'className' => 'is-style-outline',
        ),
      )
    )
  ),
)

By just making a few small tweaks to your block template declarations, you can improve admin usability for your clients in WordPress. Now, instead of relying on them remembering to set the correct heading level and block style each time, it becomes more of an automated process. Placeholders provide more context for the type of content that should be used in each area, offering additional clarity. Make sure you’re taking advantage of these kinds of opportunities to create the highest levels of client satisfaction in your next WordPress project.