WordPress Gutenberg & Full Site Editing
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 headings, 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.
Read more
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 headings, 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.
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 headings, 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.
But Gutenberg had a huge update with version WordPress 5.9. Full Site Editing. This is often abbreviated to FSE and quite often just Site Editing, 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. You can also create a complete block theme from scratch, and I'll show you how.
This course is designed to get you up to speed quickly with Full Site Editing in WordPress.
In this course:
We take a deep dive into using the Gutenberg editor to create better-looking web pages as well as a complete study on the Full Site Editor itself.
The course showcases the Twenty Twenty-Five theme, which is the latest block theme from WordPress.
You'll learn how to use the Document Overview and Command Palette to enhance your workflow.
You'll learn about the normal, wide, and full-width options you can use in your design, and how to set these values yourself.
You'll look at the box model so you fully understand padding and margin, and when to use each of these to add space around your design elements.
We'll cover the most common blocks, like paragraph, image, video, button, cover, query loop, columns, table, etc., but also advanced design blocks like Groups, Rows, Stacks, and Grids.
You'll explore template hierarchy and how themes consist of templates and template parts.
You'll learn to use Global Styles, including typography (where you'll be able to install and use any Google font you want), color palettes, backgrounds, shadows, layout and spacing, and even how to change the default appearance of any block.
Following the detailed study of Gutenberg, we'll create a fully functional block theme from scratch, building the template parts and templates required to run a full site. During this process, you'll understand which template you need to create for any post type on your site. We'll even look at using the query loop in a more advanced "manual" way, so you can include multiple query loops on a page for more design flexibility.
At the end of the course, we'll study all of the other block themes WordPress created, from the Twenty Twenty-Two theme to the Twenty Twenty-Four theme, and how each built on the previous theme, culminating in the latest Twenty Twenty-Five theme that we used and studied during the course.
A final section of the course looks at a few "extras" that were requested from students of previous versions of the course, like creating a landing page, adding custom CSS to a block theme, and even how to add a sidebar to your theme or just to specific areas of your website.
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.
What's inside
Learning objectives
- Gutenberg as a block editor for creating content on posts and page.
- An introduction to gutenberg full site editing and how that turns you into a web designer.
- How to create a simple theme (that is full site editor compatible) from scratch.
- How templates are used by wordpress to control the layout of different parts of your website.
- Learn which templates controls each of the web pages on your site, and how to edit, or create templates so they look the way you want them to.
- We'll take a close look at the twenty twenty two theme as a starting point for your own site.
- Gutenberg as a block editor for creating content on posts and page.
- An introduction to gutenberg full site editing and how that turns you into a web designer.
- How to create a simple theme (that is full site editor compatible) from scratch.
- How templates are used by wordpress to control the layout of different parts of your website.
- Learn which templates controls each of the web pages on your site, and how to edit, or create templates so they look the way you want them to.
- We'll take a close look at the twenty twenty two theme as a starting point for your own site.
Syllabus
Introduction
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.
Read more
Syllabus
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.
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.
Save this course
Save
Activities
Career center
Web Designer
Freelance Web Creator
Website Developer
User Interface Designer
Small Business Owner
Content Creator
WordPress Administrator
Digital Marketing Specialist
Brand Designer
eCommerce Manager
User Experience Designer
Information Architect
Marketing Manager
Education Technology Specialist
Technical Writer
Reading list
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
