Learning Full Site Editing with Kubrick Block Theme
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
:

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 <!-- wp:template-part /-->
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 inparts
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.

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
Great tutorial
Thank you very much for the breakdown.
Always welcome!
Great tutorial