Full site editing for theme developers

Introduction

Who is this course for?

This course is an overview of the new WordPress site editing features and block themes for experienced and aspiring theme developers.

Are there any prerequisites?

I recommend you have basic theme development knowledge: 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. Without going into detail, I will discuss concepts like functions.php, theme support, enqueuing, and the template hierarchy. If these concepts are new to you, 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 WordPress installation and a code editor to edit your files.

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 to 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

Creating block templates for custom post types

How to add blocks to user-created templates

WooCommerce in Full Site Editing themes


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

Community resources and how to stay up to date with changes to Site Editing

Full site editing blocks

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