WordPress Full Site Editing with Gutenberg

An introduction to the course, and your instructor.

To follow the course, I'd recommend a fresh WordPress install.  The cheapest and easiest way to do this is to install WordPress on your own computer.  This lecture shows you how.

All students should read this.

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.

What are the building blocks of Gutenberg and how do you add them?

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.

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.

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 Spacer block is really useful if you need to, well, space out other blocks. 

The Group block can be used to contain a number of other blocks, allowing them to be moved and customized as a single 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.

The Row block helps group other blocks in a row across the web page.  The stack is similar, but arranges blocks vertically.

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

ReUseable blocks are a great design tool, as well as a fantastic aid to maintaining aspects of your site.

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.

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.

To make use of Full Site Editing (FSE), you need an FSE-compatible theme, commonly called a block theme.

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.

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.

Let's look at the block patterns provided with the Twenty Twenty Two theme.

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

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

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 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.

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

Full Site Editing Changes the way we create menus in WordPress.  This video looks at the new system.

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.

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 Front Page template to define how the homepage of the site will appear.

Let's create a single template.

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.

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

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 look at the Twenty Twenty Two theme Header.

Let's look at the Twenty Twenty Two theme Footer.

This video looks at the 2022 theme Index template that displays lists of posts.

Let's look at the Twenty Twenty Two theme Post Template.

Let's look at the Twenty Twenty Two theme Search Template.

Let's look at the Twenty Twenty Two theme 404 Template.

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.

Let's create a custom landing page.

This video looks at the templates included in the Twenty Twenty Three theme, and how the designers used template parts.

This video will take a look at a few templates to see how they were created.