Full site editing for theme developers

Introduction

Who is this course for?

This course is an overview of WordPress full site editing and block themes for theme developers and those who wants to learn to create themes.

Are there any prerequisites?

I recommend that you have basic knowledge of theme development: Basic PHP, HTML, some JavaScript, and CSS. Having experience with and knowledge of the block editor is also helpful.

In parts of this course, I make references to classic PHP-based themes, and I make comparisons between classic themes and block themes. I will be talking about concepts like functions.php, theme support, enqueuing, and the template hierarchy without going into details. If these concepts are new to you, then everything in the lessons might not be perfectly clear, but you should still be able to use the code examples to create your first block theme.

You also need a code editor for editing your files, and a WordPress installation.

What you will learn

You will learn how block themes work and how to create a basic theme. You will learn how to use the Site Editor and theme.json to achieve the design you want for your theme.

My goal with this website is for you to gain enough information and knowledge about block themes and site editing so that you can decide if you want to use and create block themes.

Complete the lessons in the introduction and then use the following chapters as references for continuing to improve your block theme.

Course Content

Introduction

Welcome & How to use the course

What is full site editing?

Preparations -Quick start guide

  1. Creating block themes
  2. Block grammar basics
  3. Exercise: Templates and template parts
  4. Global Styles & theme.json
  5. Exercise: Creating theme.json

Templates and template parts

How to add blocks to user-created templates

Creating block templates for custom post types

WooCommerce in Full Site Editing themes

Full site editing blocks


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

How to use custom CSS in theme.json

Global style variations

How to filter theme.json with PHP

Modifying block style variations via theme.json

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


Miscellaneous

Troubleshooting block themes

Child themes

Locking blocks and templates

How to remove default block styles

Accessibility in full site editing themes

How to add default blocks to the block editor

Block Styles

Custom block styles

Block variations

Block variations

Block variation examples for full site editing

Block Patterns

Introduction to block patterns