Block variation examples for full site editing

Site header and footer block variations

To tie back to the introduction to block attributes, we can take this a step further and use block variations and the tagName attribute to create blocks for the header and footer.

The purpose of creating these block variations is to make it faster for theme developers to create the site structure. -Not necessarily to be used by an end user in a production version of a theme.

You will be using the same JavaScript file that you created in the previous lesson. -If you are not sure how to set up your first block variation, please go back to the previous lesson.

Open the block-variations.js file.

To create a second block variation, add a new instance of wp.blocks.registerBlockVariation below the first.

Extending the template-part block

Because your are creating a part for the site structure, you will use the
template-part block type.

If you recall, this block works as a container or wrapper for our page sections in full site editing, and it is similar to the group block. This block requires full site editing to be enabled.

wp.blocks.registerBlockVariation( 'core/template-part', { ... } );
Code language: JavaScript (javascript)

Inside the brackets, add a name, title and attributes for the site header variation. The tagName changes the block from a <div> to a <header> tag.

name: 'site-header', title: 'Site header', attributes: { align: 'full', tagName: 'header' }
Code language: JavaScript (javascript)

You can now save your JavaScript file and test the new template part in the editor:

When this block is added, the markup on the front is:

<header class="wp-block-template-part alignfull"></header>
Code language: HTML, XML (xml)

You may want to use a class name to identify this as the site header. Add the className attribute below the tagName, separated by a comma:

wp.blocks.registerBlockVariation( 'core/template-part', { name: 'site-header', title: 'Site header', attributes: { align: 'full', tagName: 'header', className: 'site-header' } } );
Code language: JavaScript (javascript)

The resulting markup is:

<header class="wp-block-template-part alignfull site-header"></header>
Code language: HTML, XML (xml)

To make a variation for the site footer, copy the registerBlockVariation and change header to footer:

wp.blocks.registerBlockVariation( 'core/template-part', { name: 'site-footer', title: 'Site footer', attributes: { align: 'full', tagName: 'footer', className: 'site-footer' } } );
Code language: JavaScript (javascript)

I will talk more about template parts when we start putting together the practice themes together.

Site header column variation

This block variation example is a shortcut to creating a 3 column site header where you can place your site logo, site title, and navigation.

Add the block type, core/columns:

wp.blocks.registerBlockVariation( 'core/columns', { ... } );
Code language: JavaScript (javascript)

Secondly, add the name, title, and the basic attributes:

  • align: ‘full’ that makes it a full width block
  • tagName: ‘header’ that turns the wrapper from a div to a header tag
  • className: ‘site-header’ that adds the css class to the wrapper.
wp.blocks.registerBlockVariation( 'core/columns', { name: 'site-header-columns', title: 'Site header columns', attributes: { align: 'full', tagName: 'header', className: 'site-header' } } );
Code language: JavaScript (javascript)

Next, define the three inner columns blocks using innerBlocks:

innerBlocks: [ [ 'core/column' ], [ 'core/column' ], [ 'core/column' ], ]
Code language: JavaScript (javascript)
wp.blocks.registerBlockVariation( 'core/columns', { name: 'site-header-columns', title: 'Site header columns', attributes: { align: 'full', tagName: 'header', className: 'site-header', }, innerBlocks: [ [ 'core/column' ], [ 'core/column' ], [ 'core/column' ] ] } );
Code language: JavaScript (javascript)

If you want, the column width can then be added inside the block object. If you find that you often reuse the same widths, this can come handy:

['core/column', { width: 33.33 }],
Code language: CSS (css)

With new improvements to the columns block, you can select and mix different units:

[ 'core/column', { width: '150px' } ], [ 'core/column', { width: '33.33%' } ],
Code language: CSS (css)