As we’ve learned so far, websites are made up of content that is styled to display in a pleasing and functional way – in short, content and style. WordPress separates where users create the bulk of their content, on Posts and Pages, and the style or design of the website, collected under Appearance. For years, users customized the appearance of their WordPress websites using what is now known as the Classic Editor. Users could access Themes, Menus, Customization, Widgets, Additional CSS, and more under the Appearance menu. In 2021, WordPress began migrating to a new editor, now called Site Editor, or Full Site Editor.
The new Site Editor significantly changed how users can build and customize the appearance of their websites. Let’s take a look at some of the key differences:
Block Editor
The Block Editor, previously known as the Gutenburg Editor, is a powerful tool that enables a user to build out content on a Page or Post using drag-and-drop blocks. Access the Block Inserter in the top menu. It’s a blue box with a plus sign.
You’ll see a bunch of blocks that contain a whole range of common content elements – paragraphs, images, columns, tables, and galleries. You can also quickly insert styled cover photos, pull quotes, drop caps, query loops, videos, audio, and more.
WordPress allows you to customize some of a Block’s appearance in the Settings sidebar. You can dig even deeper into block customization in the Style Editor, which you’ll read about below.
A Note about Widgets: In WordPress’s Classic Editor, Widgets are added and customized using the Appearance menu. They are, in effect, Widgets separate from your main Page or Post content. The Block Editor has incorporated Widgets as a category, and FSE themes don’t include them under the Appearance menu. You customize them in the Block Editor settings or in the Style Editor.
Style Editor
Access the Style Editor by navigating to Appearance > Editor in your Dashboard. Editor presents five Design categories.
Click into Styles. Depending on your Theme, you’ll be presented with several default styles that you can apply to your website. These styles will have unique fonts, colors, layout settings, and other features that complement each other. If one of these styles appeals to you, apply it and start building content. Easy peasy.
If you have a visual brand that you need to apply to your website because you’re building it for a client, for example, then you’ll need to customize these styles a little more. To do that, click on the “Edit styles” icon to dig into further customization options.
In the Styles panel, which you can access on any page or post by clicking on the half moon icon, you’ll see a list of five style categories to select and edit: Typography, Colors, Background, Shadows, and Layout. Click into each of these categories to easily customize styles for your whole site.
Style Book
If you’re wondering what that eye icon is all about, that takes you to the Style Book for your selected style. The Style Book displays the full application of the Style, from background colors and font settings for your paragraph text and headers, to button styling.
Customizing Blocks
If you look below the five Styles categories we discussed above, you’ll see an option to customize the appearance of specific blocks for the whole site. Click into Blocks, and you’ll see the full list of Blocks available in the Block Editor. Let’s select Heading.
The first thing you’ll see is a window with a sample heading. This window allows you to preview changes you make to the Heading appearance. Below the preview window is a set of features you can customize – font styles and sizes, padding, orientation, and more. Customizing the Heading here will change its appearance everywhere you have a Heading block on your website.
Editing Navigation
How to edit the content and style of the site’s navigation is the biggest functional change (in my opinion) between the Classic Editor and the Full Site Editor. This is the biggest thing to remember: The Navigation section is where you can create new Navigation Menus and remove links from Navigation Menus. In order to add new links to your Navigation Menu, you’ll need to click into the page you’re previewing in the Editor. Here you can access the Navigation Block and add new links.
But wait, how do I know I’m editing the Navigation Block?
Remember that any website is a list of code with containers of code nested within other containers. WordPress organizes containers of codes as Blocks. In the top menu, click on the List View icon. This opens a list of all the blocks on your page so that you can select the block that you want to edit. The Navigation block icon is a compass.
Read more from WordPress about how to customize the appearance of your Navigation Menu.
Editing Templates
The Site Editor makes more use than ever of templates. Each theme will have a defined catalogue of templates for common page layouts. Every page that you create or that is automatically created by your theme will have a template applied to it. These templates are made up of Blocks and Patterns, and the Templates section of the Editor curates your theme’s templates.
A template encases a Page or Post’s content area and adds consistent layout and design features across each page. Use the Editor to find the template you want to edit, click on it, then isolate the blocks you want to edit.
Editing Patterns
Similar to Templates, the Patterns section of the Editor curates all Patterns used in the Theme. Templates make use of patterns to style Headers and Footers. Customize the appearance of Header and Footer patterns in this section. Alternatively, access a Header or Footer pattern by clicking on the Header/Footer pattern while editing a Template.
You can also find and customize Patterns that you added to Page, Post, or Template. You can even create a whole new pattern.
Learn more about patterns from the folks at WP Beginner. This is a nice introduction into using and creating patterns the right way.
Phew! That’s a Lot.
In summary, the new Full Site Editor has a lot going on. Here are a few key things to take away:
- When you select a Theme, it’s important to find themes that use the new Site Editor. Why? Because that’s the direction that WordPress is moving, and therefore, that’s where the field is moving. It’s also the Editor we’ll be practicing in this class.
- Most help forums, articles, or videos from 2021/2022 or older will be referencing the Classic Editor, so just be aware of that.
- Customization is a little trickier using Additional CSS than it was in the Classic Editor.
- Get to know about the Full Site Editor, through resources and practice!