Full Site Editing in WordPress allows us to edit our whole site and make it very different than the template we started with, the changes we make are stored in the database so even if new theme is installed, we can reuse the template parts and patterns we created.

When a block theme is installed, the site editor is enabled and can be accessed from the admin dashboard, this works similar to the customizer API for Classic Themes but has many advance features.

We can edit each individual templates from the site editor, add new templates and assign them to post or pages. It is not advised to directly modify the templates provided my themes and to create new ones so changes will not be erased when theme is updated.

This is how the editor navigation looks like!

This new features changes how the WordPress themes are created, we can create a whole new theme only from the editor and serve it to users and they can modify it accordingly.

The content writing and publishing experience can be improved with this.

The directory structure of a Block Theme is slightly different from the classic theme, the main differences are

• In class theme we can put our templates anywhere and access them, in block theme we have to put then under directory templates
• The .php template files in classic theme are replaced with .html templates
• The template parts need to reside in parts directory

Let’ create a simple block theme!

The main requirements for getting started with block themes are the style.css and index.html file

/*
Theme Name: Block Theme
Description: Basic block theme created from scratch
Author: Pratik Londhe
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: block-theme
Version: 1.0
*/

The style.css we write here is same as the one for the classic theme, with header information

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



<!-- wp:template-part {"slug":"footer","theme":"block-theme","tagName":"footer","className":"site-footer"} /-->

This currently only includes the header and footer template parts.

Your directory structure should be like this,

patterns (dir)
      - example.php
parts (dir)
      - footer.html
      - header.html
templates(dir)
      - index.html (required)
functions.php
style.css (required)
theme.json

The theme.json file is very powerful and can be used to change the styles and settings of block editors, individual blocks.

The basic theme.json may contains color pallete by the theme and some settings to add block supports like border etc.

We don’t have to enqueue the theme.json file, just create it and add in the root directory of the theme and WordPress will take care of the rest, the styles we define in theme.json are converted into CSS on the fly and are applied globally to the blocks.

Here is example of my theme.json file

{
	"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"defaultPalette": false,
			"palette": [
				{
					"color": "#007acc",
					"name": "primary",
					"slug": "primary"
				},
				{
					"color": "#ff9900",
					"name": "secondary",
					"slug": "secondary"
				},
				{
					"color": "#333333",
					"name": "text",
					"slug": "text"
				},
				{
					"color": "#f5f5f5",
					"name": "background",
					"slug": "background"
				},
				{
					"color": "#007acc",
					"name": "link",
					"slug": "link"
				}
			]
		},
		"spacing": {
			"blockGap": true
		}
	}
}