Learning Full Site Editing with Kubrick Block Theme

March 15, 2022

I was eager to tell you about Full Site Editing, but I didn’t know where to start. It was just overwhelming. But not so far time ago I find out that the very first WordPress theme – “Kubrick” was rebuild for FSE, so, it is a block theme now.

theme.json

Let’s begin with the basics. theme.json is a config file for Gutenberg, it was added in WP 5.8, even before the full site editing. It was kind of replacement to add_theme_support() functionality.

Now let’s take a look at original theme.json file of Kubrick theme. So, let’s dive into it.

AppearanceTools

{
	"version": 2,
	"settings": {
		"appearanceTools": true,

AppearanceTools setting enables the following features:

border: color, radius, style, width
color: link
spacing: blockGap, margin, padding
typography: lineHeight

Let’s better take a look on an example.

Typography block settings with "appearanceTools" : false:

Typography block settings with "appearanceTools" : true:

typography block settings with line height option — Do you see “Line height” option appeared?

So, to recap this, appearanceTools adds some additional options to block settings which, probably you don’t event need in most themes, because, in my opinion, too much freedom for website administrators leads to ugly design ;)

blockGap

Let’s take a look at blockGap parameter which is inside styles.

"styles": {
	"typography": {
		"fontFamily": "'Lucida Grande', Verdana, Arial, Sans-Serif",
		"fontSize": "13px"
	},
	"spacing": {
		"blockGap": "2px"
	},

It allows you to specify the default vertical margin between blocks. It also affects horizontal margins between inner blocks in columns, buttons, and social icons.

Let’s take a look how the Single Post template looks by default, when "blockGap": "2px".

Then I changed blockGap to 100px.

typography

"styles": {
	"typography": {
		"fontFamily": "'Lucida Grande', Verdana, Arial, Sans-Serif",
		"fontSize": "13px"
	},

This part is quite obvious (I hope). You can set the global typography styles for the website. Just change fontFamily and fontSize values and you will see the difference.

But please keep in mind, that some of the elements like headers can be styled individually, in elements key.

color

"color": {
	"background": "#d5d6d7"
},

Just a background color here. I can change it to #fee5e5 for example and will get this:

elements

This part of theme.json file allows you to specify the specific styles for specific elements, like h1-h6 heading and links.

In our example we can see that headings have a different font family:

"elements": {
	"h1": {
		"typography": {
			"fontFamily": "'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif"
		}
	},
	"h2": {
		"typography": {
			"fontFamily": "'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif"
		}
	},

And links – a different text color:

"link": {
	"color": {
		"text": "0066cc"
	}
}

Templates and Template Parts

Templates

Let’s begin with Templates, because if you don’t have Templates folder in your theme and index.html file inside it, your theme won’t be recognized as a block theme.

Kubrick theme contains the following template files:

index.html – it is used to display the main blog page,
single.html – to display posts and pages,
archive.html – to display post archives. It almost the same as index.html, but also displays category or tag title before the posts.

Your custom block theme can also contain 404.html, front-page.html, page.html search.html and even a custom page template.

You can create them manually via WordPress admin but in that case the templates won’t saved in your theme templates folder and will be stored in database, we will cover it in details later in this tutorial.

Template Parts

Template parts are parts of templates, that could be repeated from template to template. Header, footer, sidebar etc.

If you open parts directory in Kubrick theme, you will notice two template parts there – header.html and footer.html.

Template parts can be included to templates with the help of  tag

Example:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

This line of code includes parts/header.html file and wraps it in <header> HTML-tag.

Another example:

<!-- wp:template-part {"slug":"footer"} /-->

This line of code includes parts/footer.html file and wraps it in <div> HTML-tag, which is default.

How to Create a Template or a Template Part

If you open the source code of header.html file you will see the same block pattern-like markup. So, if you have experience with creating block patterns, be sure, you already know how to create block theme templates!

First of all, and I already mentioned it before, there two types of templates (and template parts) – the ones, that are located as html files in your theme folder, and the ones, created manually via admin area and stored in the database. When you create your custom theme, you will definitely need that type of templates which are html files.

In order to create a template you need to:

Create an empty HTML file in templates folder of your theme, or, if you’re creating a template part, if should be in parts folder.
Then go to Gutenberg editor, you can create a new post, or proceed to Templates > Add new, it doesn’t matter and create your template with blocks.
Select what you’ve just created and click Copy.
Paste the content into HTML file.

That’s it guys. It was the very basic tutorial about brand new block themes in WordPress. If you have any questions, you’re always welcome in comments.

# Gutenberg, FSE

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter