Full site editing for theme developers


Who is this course for?

This course is an overview of WordPress full site editing and block themes for theme developers.

Are there any prerequisites?

To make the most out of this course, you need to have basic knowledge of theme development. You need to know about basic WordPress functions, PHP, HTML and CSS.

You also need a WordPress installation and the Gutenberg plugin.

What you will learn

You will learn about WordPress full site editing concepts and global styles:

  • Block grammar and attributes
  • Theme structure
  • Creating and combining templates and template parts
  • New full site editing blocks
  • The new theme.json configuration file
  • How to create block patterns, block styles and variations
  • Working with the site editor and template editor

Course Content


Welcome & How to use the course

What is full site editing?

Bonus -Community resources & How to stay up to date

Preparations -Quick start guide

Block theme setup, templates, and template parts

Creating block themes

Block grammar basics

Exercise: Templates and template parts

How to create a default page template

Creating block templates for custom post types

WooCommerce in Full Site Editing themes

Full site editing blocks


Global Styles & theme.json

Exercise: Creating theme.json

Theme.json color options

Theme.json typography options: Font family and size

Theme.json typography: Line height, font weight and text decoration

Theme.json layout and spacing options

Theme.json elements

How to add hover and focus styles using theme.json

How to add box-shadows with theme.json

Global style variations

Cheat sheet: Every setting that you can remove using theme.json

Classic themes & Hybrid themes

Adding full site editing features to classic themes

How to use PHP templates in block themes

How to re-enable the Customizer in a block theme

More coming soon


Locking blocks and templates

Troubleshooting block themes

How to remove default block styles

Accessibility in full site editing themes

Block Styles

Custom block styles

Block variations

Block variations

Block variation examples for full site editing

Block Patterns

Introduction to block patterns