Full Site Editing

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.

  • How to remove block templates

    •

    ,

    Templates can be added by users, plugins, parent- and child themes. But there are scenarios where this is not applicable: So in this lesson I will describe two ways to solve it using PHP filters. Last updated How to use a PHP template instead of a block template I have mentioned that when you use…

  • Theme.json image options

    •

    ,

    There are four image options in the theme.json settings section, and one in styles: Settings: Styles: The styles section is where you add default background images to the site or the blocks. I have covered the aspect ratio settings and presets in the theme.json layout and spacing lesson, because right now, the block editor only…

  • 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

    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

    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. The type of shadow used is a box shadow. There are no settings for text shadows. Theme…

  • 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. Last updated How to add the CSS pseudo classes The keys that you use to style link states in theme.json are 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 than the block styles offer. Let’s take these examples: This is problematic because to create a consistent site design, you would have to style the extra headings and buttons separately. The theme.json elements…

  • Theme.json typography: Line height, font weight and 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 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 Border allows custom…

  • How to re-enable the Customizer and classic menus in a block theme

    •

    ,

    You probably already know that activating a block theme removes the Customizer and the Menus screen from the sidebar in the WordPress admin area. They are still part of WordPress, and you can still access them by visiting the pages directly: You may want to re-enable these features if your users/customers are struggling with the…

  • 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, block gap and aspect ratios. Prerequisites: Global Styles & theme.json. Last updated The layout setting The theme.json layout setting decides the width of the content and enables wide and full width blocks. This…

  • 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

    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 What colors can you change with theme.json? The WordPress block editor has many different types of color options,…

  • 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

    •

    ,

    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

    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.7 will do. I recommend always using the latest version of WordPress.…

  • What is full site editing?

    What is full site editing?

    •

    ,

    Full site editing, or “site editing” in short, is an umbrella term for a collection of 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 that…

  • Welcome & How to use the course

    •

    ,

    Hi! 👋 Welcome to this course about full site editing with WordPress.My name is Carolina Nymark. I am a developer at Yoast, a long-time WordPress and Gutenberg contributor, and core committer.I am a bundled theme component maintainer and was one of the leads for Twenty Twenty-One and Twenty Twenty-Five. I started sharing guides about full…