Full Site Editing

Prerequisites: This is lesson 2 out of 2 about WordPress block variations. In this lesson, you will use the same JavaScript file that you created in the introduction to block variations. If you are not sure how to set up your first block variation, please go back to the previous lesson.

Estimated reading time: 3 minutes

Site header and site footer block variations

This example uses block variations and the tagName attribute to create blocks for the header and footer template parts. The purpose of creating these block variations is to make it faster to create the site structure.

Open the block-variations.js file that you created in lesson one.
To create a second block variation, add a new instance of wp.blocks.registerBlockVariation below the first.

Next, add the prefix; –core– and the slug of the block; template-part:

wp.blocks.registerBlockVariation(
	'core/template-part',
	{
         ...
        }
);

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'
}

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

When you add this block, the markup on the front is:

<header class="wp-block-template-part alignfull"></header>

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'
              }
        }
);

The resulting markup is:

<header class="wp-block-template-part alignfull site-header"></header>

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

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

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.

The prefix and slug for the columns block is core/columns:

wp.blocks.registerBlockVariation(
	'core/columns',
	{
	...
	}
);

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

wp.blocks.registerBlockVariation(
	'core/columns',
	{
		name: 'site-header-columns',
		title: 'Site header columns',
		attributes: {
			align: 'full',
			tagName: 'header',
			className: 'site-header'
		}
	}
);

Next, define the three inner columns blocks using innerBlocks:

innerBlocks: [
  [ 'core/column' ],
  [ 'core/column' ],
  [ 'core/column' ],
]

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' ]
		]
	}
);

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

['core/column', { width: 33.33 }],

You are not limited to using perceyou can select and mix different units:

[ 'core/column', { width: '150px' } ],
[ 'core/column', { width: '33.33%' } ],

Group block with locked inner blocks

Now let’s continue with something a little more advanced, a styled group block with a heading, paragraph and button inside. The blocks inside the group can be edited and removed, but thanks to the template lock, no other blocks can be added. As an example, I am using a call to action for a newsletter signup.

As a first step, add the registerBlockvariation and the wrapping group:

wp.blocks.registerBlockVariation(
	'core/template-part',
	{
		name: 'newsletter',
		title: 'Newsletter',
	}
);

Next, let me show you how you can add some styling inside the attributes parameter.
I am using Twenty Twenty-Three as an example, and I am adding the light grey palette color as the background color. The slug for this color is “tertiary”. I am also adding a border radius.

The padding is a style attribute, and it needs to be nested inside style.spacing.padding.
I am using a CSS variable with a global styles preset for the spacing to match the theme:

wp.blocks.registerBlockVariation(
	'core/group',
	{
		name: 'newsletter',
		title: 'Newsletter',
		attributes: {
			"backgroundColor": "tertiary",
			"style": {
				"spacing": {
					"padding": "var(--wp--preset--spacing--30)",
				},
			},
			"borderRadius": '4px'
		}
	}
);

Here is how you can lock the template and add the inner blocks with some basic content:

wp.blocks.registerBlockVariation(
	'core/group',
	{
		name: 'newsletter',
		title: 'Newsletter',
		attributes: {
			"templateLock": "all",
			"backgroundColor": "tertiary",
			"style": {
				"spacing": {
					"padding": "var(--wp--preset--spacing--30)",
				},
			},
			"borderRadius": '4px'
		},
		innerBlocks: [
		[ 'core/heading', { content: 'Subscribe to our Newsletter' } ],
		[ 'core/paragraph', { content: 'Get a 10% discount on your first order.' } ],
		[ 'core/button', { text: 'Subscribe' } ],
		]
	}
);

You can learn more about the different types of locking in How to lock blocks and templates.

You can also add styling to the inner blocks. Note that the format is slightly different from when you style the main block:

innerBlocks: [
[ 'core/heading', { content: 'Subscribe to our Newsletter', fontSize: 'large' } ],
[ 'core/paragraph', { content: 'Get a 10% discount on your first order.', style: { typography: { fontStyle: "italic" } } } ],
]