Full site editing for theme developers

Introduction

Who is this course for?

This course is an overview of WordPress full site editing 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

Introduction

Welcome & How to use the course

What is full site editing?

Full site editing development progress

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


Theme.json

Global Styles & theme.json

Exercise: Creating theme.json

Theme.json color options

Theme.json typography options

Theme.json layout and spacing options

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


Miscellaneous

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