WordPress Block Themes and theme.json

Block themes (also called full site editing themes) are the new way to build themes. Instead of PHP templates, they use HTML templates made of blocks, and a theme.json file for the design settings. The site owner can then change everything in the Site Editor without code.

Structure of a block theme

File or folder	Purpose
style.css	Theme details (and optional CSS)
theme.json	Colors, fonts, spacing and layout settings
templates/	HTML templates like index.html, single.html, 404.html
parts/	Template parts like header.html and footer.html
patterns/	Block patterns the user can insert
functions.php	Optional PHP code

Check the default theme

Build a very small block theme

/*
Theme Name: TC Block Theme
Version: 1.0
*/

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"color": {
			"palette": [
				{ "slug": "primary", "color": "#0b5cab", "name": "Primary" },
				{ "slug": "light", "color": "#f4f7fb", "name": "Light" }
			]
		},
		"typography": {
			"fontSizes": [
				{ "slug": "medium", "size": "1.125rem", "name": "Medium" }
			]
		},
		"layout": { "contentSize": "720px", "wideSize": "1100px" }
	},
	"styles": {
		"color": { "background": "var(--wp--preset--color--light)" },
		"elements": {
			"link": { "color": { "text": "var(--wp--preset--color--primary)" } }
		}
	}
}

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:query -->
	<div class="wp-block-query">
		<!-- wp:post-template -->
			<!-- wp:post-title {"isLink":true} /-->
			<!-- wp:post-excerpt /-->
		<!-- /wp:post-template -->
	</div>
	<!-- /wp:query -->
</main>
<!-- /wp:group -->

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

<!-- wp:site-title {"level":1} /-->

<!-- wp:paragraph -->
<p>My footer</p>
<!-- /wp:paragraph -->

WordPress read the palette from theme.json and wrote the CSS variables --wp--preset--color--primary and --wp--preset--color--light on the page. The same colors also appear in the color picker of the editor.

The three parts of theme.json

• settings: what the editor offers (palette, font sizes, spacing, which options are on or off).
• styles: the real design values (colors, typography, spacing) for the site, for blocks and for elements like links.
• customTemplates, templateParts: names for custom templates and the area of template parts.

Block themes and the Site Editor

With a block theme, go to Appearance > Editor. You can change the templates, the template parts, the navigation and the global styles. The changes of the user are saved in the database and can be reset to the theme defaults.

Which one to choose?

Point	Classic theme	Block theme
Learning	PHP and the template hierarchy	HTML, blocks and theme.json
Design changes	Customizer or code	Site Editor, no code
Plugin compatibility	Very wide	Good and growing
Best for	Existing sites and complex PHP logic	New sites and design systems

• Previous Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.