Level: Developer
In this archive, I am listing all developer-oriented full-site editing lessons. These lessons may be at beginner level or intermediate.
-
Learn together by building block themes in public
If you have completed the first lessons about creating a block theme, and you want to learn more by working on…
-
Display custom data with the Block Bindings API
With the Block Bindings API, you can use blocks to display content and dynamic data from custom fields and other sources.…
-
Theme.json typography: Font size
In this lesson, you will learn how to add custom font sizes to your theme using theme.json.To add custom font sizes…
-
Block Support
Block supports are used to enable or disable block features such as alignments, colors and spacing. These are features that are…
-
How to add blocks to user-created templates
With full site editing, the user has two new ways to create templates: In this lesson, I cover how to change…
-
How to add default blocks to the block editor
In this short lesson, I will explain how to add default blocks to any post type. This feature is independent of…
-
How to filter theme.json with PHP
Prerequisites: Global Styles & theme.json. Last updated WordPress 6.1 introduced four new PHP filters for theme.json. You can use the filters to…
-
How to use custom CSS in theme.json
WordPress 6.2 added two new custom CSS options to the Styles sidebar in the Site Editor: From WordPress 6.6, the custom…
-
Full site editing child themes
In 2021 I wrote a widely spread blog post called “The state of child themes” about the problems I encountered while…
-
How to add shadows with theme.json
Just like colors and gradients, the shadow block support uses a set of default presets, applied with the help of CSS…
-
How to add hover and focus styles using theme.json
In the previous lesson you learnt how to use theme.json elements. In this lesson, I will show you examples of how…
-
Theme.json elements
Last updated What are theme.json elements? Sometimes you want to style a part of a complex block, and you want more…
-
Theme.json typography: Line height, font weight and more
In this third typography lesson, I bring up the theme.json font style settings as well as line height, font weight, text…
-
Accessibility in full site editing themes
Did you know that the block editor and full site editing have built-in features for creating accessible websites? The enhancements to…
-
How to lock blocks and templates
In this short lesson, I explain briefly what block locking is and when it is useful for site editing, and I…
-
WooCommerce and full site editing themes
In this article, I explore how to add templates for WooCommerce in full site editing themes.I wanted to learn if it…
-
How to remove default block styles
To learn how to remove default block styles, we have to do a bit of reverse engineering on how block styles…
-
Cheat Sheet: Every setting that you can remove using theme.json
Last updated Below is a code example of every setting that you can remove using theme.json: Note that if you remove…
-
How to re-enable the Customizer in a block theme
You probably already know that activating block themes removes the Customizer from the menus in the WordPress admin. The Customizer is…
-
Style variations
In previous lessons I have talked about theme.json as a single configuration file for your theme, but you can use multiple…
-
Creating templates for custom post types
Several theme developers have reached out asking how to create full site editing templates for custom post types. In this lesson,…
-
How to use PHP templates in block themes
In the introduction to creating block themes, I mentioned that if WordPress can not find a matching .html file, it tries…
-
Theme.json layout and spacing options
In this lesson, you will learn about basic usage of the theme.json layout and spacing options, including content width, spacing and…
-
Adding full site editing features to classic themes
-Did you know that you can add almost every full site editing feature to your classic theme and still use PHP…
-
Troubleshooting block themes
When you are building block themes you may run into blank pages, error messages, and other mysterious problems. When it comes…
-
Theme.json typography: Font family
In this lesson, you will learn how to use theme.json to add font families to your WordPress theme and how to…
-
Theme.json color options
In this lesson, you will learn how to use all the theme.json color options, including: At the end of the lesson,…
-
Exercise: Creating theme.json
In this exercise, you will practice creating a theme.json file for a WordPress block theme.You will create presets and add some…
-
Introduction to templates and template parts
In this exercise, you will learn to create templates and template parts for block themes. Templates are your base files. The…
-
Creating WordPress block themes
This lesson is the first in a series of exercises to learn how to create block themes, also known as full…
-
Global Styles & theme.json
Global Styles helps users change the style of their site without having to edit individual blocks or pages. It also lowers…
-
Introduction to block patterns
This lesson is an introduction to WordPress block patterns, including synced patterns, formerly reusable blocks. You will learn how to create…
-
Block variation examples for full site editing
Prerequisites: This is lesson 2 out of 2 about WordPress block variations. In this lesson, you will use the same JavaScript file…
-
Block variations
Last updated What are block variations? Block variations are easily confused with block styles. With a block style, you can change…
-
Block style variations and section styles
WordPress offers many ways to style blocks. In this lesson I want to talk about registering block style variations and section…
-
Block grammar, attributes, and supports
As I mentioned in the first lesson, What is full site editing? theme developers will use HTML templates instead of PHP…
-
Preparations -Quick start guide
This full site editing quick start guide has four simple steps. All you need is WordPress, the Gutenberg plugin (optional), and…
-
Full site editing development progress
Level: Beginner, developer Full site editing is a focus area for WordPress. The editor team updates the Gutenberg plugin every two weeks.…
-
What is full site editing?
Full site editing, or “site editing” in short, is an umbrella term for a collection of new WordPress features that focus…