Gutenberg was launched as an integrated part of WordPress 5.0. Gutenberg was the name given to the new block editor that replaced the Classic WYSIWYG editor that we’d been using since the early versions of WordPress.
Gutenberg is the editor of choice as you create the content for your WordPress posts and pages. There’s blocks for headers, blocks for images, blocks for text. And blocks for just about anything else you’d want to add to a web page. You can build your posts and pages by dragging the blocks onto, and around, the editor. As you build the content of your web pages, your WordPress theme controls other aspects of your site, like the header and footer areas.
But Gutenberg has just had it’s biggest ever update in WordPress 5.9. Full Site Editing! This is often abbreviated to FSE, but what does this mean?
Using the same block editor (Gutenberg) you’ve been using for your content, you can now edit and design the headers and footers for your website. So you design the bit at the top of the page, the bit at the bottom, and the bit in the middle. That means you now have total control over the design of your website. That is Full Site Editing.
This course is designed to get you up to speed quickly with Full Site Editing in WordPress.
In this course:
-
An overview of Gutenberg and Full Site Editing principles.
-
An in-depth look at the Gutenberg editor, including a detailed look at some of the most important blocks.
-
Follow along as we create a basic theme that is Full Site Editing compatible. We’ll create all of the templates and template parts needed for the theme to function. This part of the course is there to reinforce the idea that web pages are controlled by templates, and show you which templates control which areas of your site. By following along and creating this theme for yourself, you’ll reinforce the important principles of Full Site Editing, and know which templates you need to add/edit to change the look of the posts, pages, archives pages, search page, 404 page, etc.
-
We’ll look at the default FSE-enabled template that comes with WordPress 5.9. It’s called Twenty Twenty Two and has a number of templates created for you. With the knowledge gained earlier in the course, you’ll be confident taking this theme (or any other FSE-enabled theme) as a starting point, and editing it so your site looks the way you want it to look.
-
We’ll look at creating custom templates for specific posts, pages, or sections of your site, and create a simple template that can be used for a landing page.
By the end of the course, you’ll have the confidence to take over the design of your own website, using Gutenberg to design the header, footer, and content. You’ll be on your way to mastering Full Site Editing.
Gutenberg Block Editor
Full Site Editing Concepts
-
3Overview
How web pages can be seen as blocks making up the design, and how this translates to Gutenberg.
-
4Interface
This is a brief introduction to the Gutenberg editor. We'll be using this throughout the course, so don't fret on the details at this point.
-
5Building Blocks
What are the building blocks of Gutenberg and how do you add them?
-
6Block Anatomy
Every block will have properties and settings you can use to manipulate how they appear on your site. This includes a menu and important side panel that we'll explore here.
-
7List View
The List View has come on a lot in recent updates, and it really is a MUST-HAVE tool when you are developing a page or modifying site design.
-
8Heading Block
The heading block is one you'll probably use on every page, so let's look at it.
-
9Paragraph Block
The paragraph block is another one that is essential for nearly every web page. Let's have a look.
-
10Image Block
Let's look at adding images to a web page, and the options you have to customize the look of it in your pages.
-
11Video Block
A lot of people add videos to their web pages, and Gutenberg offers a wealth of options to make this super easy.
-
12Button Block
Let's look at how we can add buttons to a web page, including the options for customizing and aligning them.
-
13Spacer Block
The Spacer block is really useful if you need to, well, space out other blocks.
-
14Group Block
The Group block can be used to contain a number of other blocks, allowing them to be moved and customized as a single block.
-
15Cover Block
The Cover Block is really flexible and can be used to add text on top of images, as well as creating the parallax effect seen on so many websites out there.
-
16Row Block
The Row block helps group other blocks in a row across the web page.
-
17Columns Block
The columns block is the main tool we have to position blocks on the page in any way we want.
-
18ReUsable Blocks
ReUseable blocks are a great design tool, as well as a fantastic aid to maintaining aspects of your site.
-
19Block Patterns
Block patterns are pre-designed elements you can use in your own posts and pages. These patterns are made up of Gutenberg blocks, and therefore totally customizable once inserted into your web page.
-
20Sample Post
Let's create a sample post using some of the blocks we've covered in this section of the course.
Create a Blank Theme
-
21Full Site Editing
An introduction to Full Site Editing and the interface.
-
22Full Site Editing Themes
To make use of Full Site Editing (FSE), you need an FSE-compatible theme, commonly called a block theme.
-
23Full Site Editing Templates
Themes are made up to templates which you can create and modify. Let's have a look at the basic structure of a template, as well as the how to navigate the interface to find what you want.
-
24Full Site Editing New Blocks
To get the most out of the new Full Site Editing features, we need some new blocks. Let's have a look at the ones WordPress has given us.
-
25Block Patterns
Let's look at the block patterns provided with the Twenty Twenty Two theme.
-
26Full Site Editing Template Parts
Template parts are predesigned groups of blocks (much like ReUsable blocks used with posts and pages) that can be reused in templates.
-
27Global Styles
One of the exciting features in WordPress FSE is the ability to change the color and typography of your site globally, with Global Styles.
-
28Color Palette
The color palette shows predefined colors you can use in your design. Every theme has it's own color palette, but you can add custom colors to the palette as well.
The Twenty Twenty Two theme
-
29Blank FSE Theme
The best way to consolidate your understanding of templates, and fully understand how things all fit together, is to create a blank theme yourself, so let's do it.
-
30Create Header
The header is a template part that can be reused across your entire site. Let's create one.
-
31Menus
Full Site Editing Changes the way we create menus in WordPress. This video looks at the new system.
-
32Social Icons Block
The Social Icons block is really useful for adding social media sharing buttons to your site. Let's look at how you can add these to your header.
-
33Create Footer
Let's create a Footer as a template part so we can insert it into the templates we'll create.
-
34Index Template
Let's create an index template.
-
35Front Page Template
Let's create a Front Page template to define how the homepage of the site will appear.
-
36Single Template
Let's create a single template.
-
37Page Template
Let's create a Page template that will define how our WordPress pages will look.
-
38Archive Template
Let's create an archive template to define how our category and tag pages look.
-
39Search Template
The Search template defines how the search results page appears when someone searches for something on your site.
-
40404 Template
The 404 template will be used when someone tries to visit a page on your site that does not exist.
-
41Simple Style Changes
Let's look at the Global Styles settings to make a few simple changes to the theme we've created.
Extras
-
42Twenty Twenty Two
WordPress 5.9 introduces the Twenty Twenty Two theme which is fully FSE-compatible. Let's have a quick look at how this has been set up.
-
43The Header
Let's look at the Twenty Twenty Two theme Header.
-
44The Footer
Let's look at the Twenty Twenty Two theme Footer.
-
45Index Template
This video looks at the 2022 theme Index template that displays lists of posts.
-
46Post Template
Let's look at the Twenty Twenty Two theme Post Template.
-
47Search Template
Let's look at the Twenty Twenty Two theme Search Template.
-
48404 Template
Let's look at the Twenty Twenty Two theme 404 Template.
-
49Custom Templates
Although there are limited templates you can currently create from the Templates section of the Full Site Editor, you can create custom templates to be used across your site on posts or pages.
-
50Example: A Landing Page
Let's create a custom landing page.
-
51In Closing
Information on this course, and how I see it developing as Gutenberg Full Site Editing matures.