Level: Beginner
In this archive, I am listing all beginner-level full site editing lessons.
This archive contains both site creator- and developer-oriented lessons.
-
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 a real-life block theme project, then I hope that you will join the WordPress.org Themes team and build a community theme together with others. Last updated What is a community theme? A community theme…
-
How to create WordPress themes without coding
This lesson will teach you how to create WordPress themes in the Site Editor without writing a single line of code. You will learn how to create the required theme files, edit templates, and add fonts and styles. Following this guide, you can create a WordPress block theme in about an hour, depending on your…
-
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. This feature requires WordPress version 6.5 or newer. In short, the Block Bindings API works by registering a source and referencing the source in an attribute on a block. The block then displays the…
-
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 to theme.json, you need to add an array of sizes to the typography object in the settings section: settings.typography.fontSizes. WordPress then creates a font size preset with a custom CSS property and a CSS…
-
Introduction to the Site Editor
I wrote this introduction to the Site Editor using WordPress version 6.2 and Gutenberg version 15.7.0. If you are using different versions, there may be differences both in the interface and the functionality. Last updated Accessing the Site Editor You can open the Site Editor from the WordPress Admin area under Appearance > Editor: Or,…
-
How to create a sticky header with a group block
Last updated This short lesson covers a new feature in WordPress 6.2. You can follow the video guide below to create a sticky header in less than a minute; no code is necessary. From Gutenberg version 15.0, the group block has a new settings panel called Position, where you can choose the Sticky option 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 CSS also works for elements and variations. These have no user interface. If you need a re-cap of how to use theme.json before you continue, please read the first lesson about Global styles &…
-
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 variables. In the editor, the shadow settings are in the same styles panel as the border settings. Theme developers can add new custom shadows via theme.json, and in this short lesson I will show…
-
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 to add hover and focus styles to link and buttons in theme.json. This lesson has been updated in preparation for WordPress 6.3 with a planned release in August 2023. Last updated Changes to the…
-
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 control over the block styles than just adding the same colors or font sizes to all the inner elements.Let’s take these examples: This is where the theme.json elements category becomes useful. The Gutenberg developers…
-
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 decoration and miscellaneous settings. Prerequisites: Global Styles & theme.json. Last updated Line height The custom line height is one of the theme.json settings that are not experimental. WordPress supports it without the Gutenberg plugin active:…
-
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 the block editor are beneficial for both developers and editors. The accessibility features in full site editing themes focus on solving common accessibility problems found in classic themes. The WordPress.org themes team has been…
-
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 the background image support, it does not remove any existing background images from your blocks. To disable the “Inherit default layout” setting for container blocks like group, remove the Known issues The border settings…
-
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 still a part of WordPress, and you can re-enable the links with just one line of code. Last updated Activating a plugin that uses the Customizer also re-enables the links I am mentioning this…
-
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 spacing units, and blockGap. This lesson has been updated in preparation for WordPress version 6.3. Prerequisites: Global Styles & theme.json. Last updated The layout setting The theme.json layout setting decides the width of the content…
-
Troubleshooting block themes
When you are building block themes you may run into blank pages, error messages, and other mysterious problems. When it comes to WordPress block themes and Gutenberg, we still have work to do to improve error handling. The most common mistakes are simple typos, and they are easy to solve if you know where to…
-
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 assign different font families to different blocks. You add font families to theme.json in settings.typography.fontFamilies. You can refer to an existing font family, like a system font, or you can use advanced optional parameters,…
-
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, you will also find answers to frequently asked questions. Prerequisites: Global Styles & theme.json. Last updated Introduction What color options can you change with theme.json? The WordPress block editor has many different types of…
-
What will full site editing mean for site creators?
Site creators can benefit from full site editing and the Site Editor in many ways. With these new features, you can change parts of a website that you previously could not change without using code. You can make site wide changes or edit the smallest details on a specific post or page. Last updated The…
-
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 very basic styling to the theme.This lesson is suitable for those who want a quick recap of the global styles lesson. If you created a theme with template parts in the previous exercise, you…
-
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 lesson starts with index.html. Next, you will add templates for single posts, pages, archives, and search results. You will use template parts to organize and structure the theme to avoid repeating code. You will…
-
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 site editing themes. You will learn about the minimum file requirements, theme setup, and file structure. I will also highlight some differences between classic themes and block themes. By the end of this first…
-
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 the entry barrier and makes it easier for theme developers to style blocks. Theme.json is a new theme configuration for block settings, site-wide styles, and block styles. In this lesson, you will learn what…
-
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 that you created in the introduction to block variations. If you are not sure how to set up your first block variation, please go back to the previous lesson. Last updated Site header and…
-
Block variations
Last updated What are block variations? Block variations are easily confused with block styles. With a block style, you can change how the block looks with CSS, and the style can be selected in the block’s settings sidebar in the editor. With a block variation, you change the block settings and create a variation with…
-
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 styles that helps users select premade designs. The custom block styles, often called block style variations, are options in the Styles section of the block settings sidebar. You use them to quickly apply styles…
-
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 files and HTML comments and block markup instead of PHP functions. In this lesson, I will not discuss building custom blocks with JavaScript but rather the HTML code or the so-called block grammar you…
-
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 a block theme with support for the Site Editor. Last updated Step 1: Install WordPress Any test install with at least WordPress 6.5 will do. I recommend always using the latest version of WordPress.…
-
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. As a result, these features change frequently. Updated September 16, 2022. What’s coming in WordPress 6.1? WordPress 6.1 is scheduled for release on November 1, 2022 (pushed from October 25).The feature freeze for this…
-
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 on using blocks for all parts of a website, not only the content area. With the new site editing features added to WordPress, you use blocks to create everything from page layouts, site headers…
