WordPress Gutenberg & Full Site Editing

How web pages can be seen as blocks making up the design, and how this translates to Gutenberg.

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.

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.

A look in more detail at the block inserter.

The Document View (previously called 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.

Some blocks have an align button to set the width of the block.

The Command Palette is a useful tool for improving workflow and speeding up some tasks.

It's important to understand the Box Model so you can understand padding and margin.

The heading block is one you'll probably use on every page, so let's look at it.

The paragraph block is another one that is essential for nearly every web page.  Let's have a look.

Let's look at adding images to a web page, and the options you have to customize the look of it in your pages.

A lot of people add videos to their web pages, and Gutenberg offers a wealth of options to make this super easy.

Let's look at how we can add buttons to a web page, including the options for customizing and aligning them.

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.

This video looks at four related blocks.  Groups, rows, stacks and grids.

The columns block is the main tool we have to position blocks on the page in any way we want.

Insert tables into your posts and pages.

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.

You can easily create patterns from your designs so that they can be re-used on multiple pages.

This video shows an example of when a synced pattern is very useful.

The Spacer block is really useful if you need to, well, space out other blocks. 

Let's create a sample post using some of the blocks we've covered in this section of the course.

An introduction to Full Site Editing and the interface.

It's important to know what makes up a theme.

A look at the template hierarchy for even more control over your templates.

This video shows how to make changes to a header or footer.

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.

The query loop is a special block that can pull out sets of posts from the database.  It's important whenever you need to create a list of posts, e.g. on archive page templates.

This video looks at the navigation menu in the Full Site Editor.

Template parts are predesigned groups of blocks (much like ReUsable blocks used with posts and pages) that can be reused in templates.

What is the pages menu in the Full Site Editor?

One of the exciting features in WordPress FSE is the ability to change the color and typography of your site globally, with Global Styles.

This video shows you how to edit the fonts your site is using.

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.

This video shows you how to add a background to your web pages.

Want to add shadows to your blocks? This video shows you how.

This video looks at the layout and spacing options in the editor.

Change the default look of the blocks on your site,

This video looks at the different formats of the older theme and the newer block themes.

Let's take a look at the files and folders required for a block theme.

There are some free tools out there that can help you generate a theme.json file.

In this video, we'll look at a versatile plugin that helps you create a block theme.

The header is a template part that can be reused across your entire site.  Let's create one.

Let's create a Footer as a template part so we can insert it into the templates we'll create.

Let's create an index template.

Let's create a single template.

Let's create a Front Page template to define how the homepage of the site will appear.

Let's create a Page template that will define how our WordPress pages will look.

Let's create an archive template to define how our category and tag pages look.

The Search template defines how the search results page appears when someone searches for something on your site.

The 404 template will be used when someone tries to visit a page on your site that does not exist.

This video looks at how to add a favicon for your theme.

This section looks at the Twenty twenty Two theme, but using an older version of the Full Site Editor.

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.

Let's take a tour of the Twenty Twenty-Three theme.

Let's take a tour of the Twenty Twenty-Four theme.

A PDF showing the evolution of WordPress block themes from Twenty Twenty-Two to Twenty Twenty-Five.

This video shows how you can handle ChatGPT content in the Gutenberg Editor

Let's create a custom landing page.

With Gutenberg FSE, the Customize link in the Appearance menu has disappeared, so how do you add Custom CSS to your theme?  This video looks at the easiest way.

This video looks at how easy it is to add a sidebar to your full site editing theme.

Information on this course, and how I see it developing as Gutenberg Full Site Editing matures.

This course mentions some resources, so this lecture includes links to those resources.