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.
Traditionally, WordPress users customized their websites through a collection of tools found under Appearance, including Themes, Customize, Menus, Widgets, and Additional CSS. These tools are associated with what we now call classic themes.
In 2021, WordPress began migrating to a new editor, now called Site Editor, or Full Site Editor. With the introduction of block themes and the Site Editor, WordPress brought many of these customization tools together into a more visual, block-based editing experience. The Site Editor allows users to customize not only individual pages and posts, but also the overall design and structure of their websites.
The new Site Editor significantly changed how users can build and customize the appearance of their websites.
With all these changes, it’s helpful to understand that WordPress now uses the same block-based editing system for two different purposes: creating content and customizing the overall website.
The Page/Post Editor allows you to create and edit the content of individual pages and posts, while the Site Editor allows you to customize the broader structure and appearance of your website, including templates, navigation, headers, footers, and global styles.
Both editors use blocks, but they serve different purposes. Let’s take a closer look at how blocks work before exploring the tools available in the Site Editor.
Themes, Templates, and Patterns
Before we get into the details, though, let’s clarify three terms you’ll encounter throughout this lesson: themes, templates, and patterns. They’re closely related, but they do different jobs.
A theme establishes the overall design of your website, including typography, colors, spacing, and available layouts. Think of it as the visual foundation for your site.
A template determines the structure of a particular type of page, such as a blog post, standard page, or archive. Templates help maintain consistent layouts across your website.
A pattern is a prearranged collection of blocks that you can insert into a page or template. For example, a pattern might include an image, heading, paragraph, and button arranged together. Some patterns are synced, meaning changes to the pattern are reflected everywhere it’s used, while others can be customized independently.
In short: Themes establish the overall design, templates organize page layouts, and patterns provide reusable arrangements of blocks. You’ll see how these pieces work together as we explore the Site Editor.
Block Editor
The Block Editor, introduced in WordPress 5.0 in 2018 as part of the Gutenberg project, allows users to create content on Pages and Posts using individual blocks. Each block represents a content element, such as a paragraph, heading, image, gallery, or column layout.
Access the Block Inserter in the top menu. It’s a blue box with a plus sign. Look for the + button near the upper-left corner of the editor. Depending on your settings, it may appear as a blue button when selected.
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. Select a block, then use the Settings and Styles controls in the right sidebar to explore its available options. These might include typography, color, dimensions, borders, and other settings, depending on the block and your theme.
You can also customize the default appearance of certain blocks across your entire website using the Site Editor’s Styles settings, which we’ll explore below.
You can toggle between the settings for the selected block and the settings for the page or post itself. The page/post settings include options such as publishing, featured images, and templates.
A Note about Widgets: A Note About Widgets: In classic WordPress themes, widgets are small content elements that can be added to designated areas of a website, such as sidebars and footers. They’re typically managed through Appearance > Widgets.
Block themes take a different approach. Instead of relying on traditional widget areas, they use blocks, patterns, and template parts to create and customize these sections of a website. For example, you might add a Search block or Latest Posts block to your footer using the Site Editor.
SITE STyles
Now that we’ve explored how to style individual blocks, let’s look at how WordPress lets us customize the design of the entire website.
Access the Site Editor by navigating to Appearance > Editor in your Dashboard. The Editor presents several Design sections, including Styles, Pages, Navigation, Patterns, and Templates. These sections allow you to customize different aspects of your website’s appearance and structure.
Remember that the Site Editor is available when you’re using a block theme. If you don’t see Appearance → Editor, check which theme you’ve activated.
Click into Styles. Depending on your Theme, you’ll be presented with several default styles that you can apply to your website. Click “Browse styles” to explore these options. 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.
These preset combinations are called style variations. They’re provided by your theme and let you change the overall look of your website without switching to a different theme. Not every theme includes multiple style variations.
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, return to the main Styles panel by clicking the back arrow after browsing style variations. You’ll find additional customization options directly below “Browse styles.”
Here, you’ll see several 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. As you make changes, you can preview how they affect your website in the window to the right.
The exact categories and controls you see will depend on your theme and WordPress version, so don’t worry if your screen looks a little different.
You can also access Styles while working in the Site Editor’s visual editing interface by selecting the Styles icon, which resembles a half-filled circle. This lets you explore site-wide design settings without returning to the main Site Editor menu.
Style Book
If you’re wondering what that eye icon is all about, that takes you to the Style Book for your selected style. You’ll find it in the upper-right corner of the Styles panel, next to the three-dot menu. 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.
It’s especially useful when you’re experimenting with global styles because it lets you preview how different blocks will look across your website, even if you haven’t added those blocks to a page yet.
Customizing Blocks
If you look below the site-wide Styles settings 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 ta list of block types that support global style customization. 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 such as typography, colors, and spacing, depending on the block and theme. Customizing the Heading here will change its appearance across your website, unless you’ve applied individual styles that override those global settings.
This is an important distinction: changing the appearance of one Heading block affects that individual block, while changing the Heading settings under Site Styles establishes a default for Heading blocks throughout your website.
Editing Navigation
How to edit the content and style of the site’s navigation one of the biggest functional differences between working with classic themes and block themes.
With a block theme, you can manage your navigation menus through the Site Editor. Navigate to Appearance → Editor → Navigation to see the menus associated with your website. From here, you can select a menu, rearrange or remove links, and manage your navigation structure.
To add links or make more detailed changes, select the menu you want to edit and open its editing view. Depending on your interface, you can click into the menu preview or use the Edit control to work directly with the Navigation block.
The Navigation block allows you to add links to existing pages, create custom links, organize submenus, and adjust the appearance of your navigation.
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.
If you’re editing a template that contains your site’s header, List View can help you locate the Navigation block nested inside the Header template part. Select it to explore the available settings and styling options.
One important distinction: creating a navigation menu doesn’t automatically mean it will appear on your website. The menu must also be assigned to a Navigation block within a template or template part, such as your site’s header.
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 collection 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 organizes your theme’s templates.
Remember our earlier distinction: a template controls the overall structure used to display a particular type of content. For example, your theme might include separate templates for standard pages, individual blog posts, archive pages, and search results.
A template provides the structure surrounding a Page or Post’s content area, often including consistent elements such as a header, footer, and navigation. Use the Editor to find the template you want to edit, click on it, then isolate the blocks you want to edit.
One especially important thing to remember: when you edit a template, you’re not necessarily editing just one page. If multiple pages use the same template, your changes to that template can affect all of them.
For example, changing the layout of your Single Posts template could affect every blog post on your website, even though each post has its own unique content.
This is also where template parts come into play. Template parts are reusable structural sections, most commonly headers and footers, that can appear across multiple templates. Editing a shared Header template part can update the header everywhere that template part is used.
Editing Patterns
Similar to Templates, the Patterns section of the Editor organizes patterns available on your website, including patterns provided by your theme and patterns you’ve created yourself.
Remember that a pattern is a prearranged collection of blocks. Rather than building every layout from scratch, you can insert a pattern and customize it to suit your content. For example, you might use a pattern to create a hero section, a collection of testimonials, or a call-to-action section.
Navigate to Appearance → Editor → Patterns to explore the available patterns. You’ll also find Template Parts here, including your site’s headers and footers. Although WordPress groups them together in the interface, template parts are intended for reusable site structure, while ordinary patterns are primarily used for reusable content and layouts.
You can also find and customize Patterns that you added to a Page, Post, or Template. You can even create a whole new pattern.
There are two types of patterns worth knowing about:
- Unsynced patterns are starting points. Once you insert one, you can change its text, images, and styling without affecting other instances of that pattern.
- Synced patterns stay connected. If you edit a synced pattern, those changes appear everywhere that synced pattern is used.
For example, you might use an unsynced pattern to create a similar layout for several different pages. A synced pattern, on the other hand, would be useful for something like a promotional announcement that needs to stay consistent throughout your website.
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 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 Site Editor. These are called block themes, and they’re the type of theme we’ll be practicing with in this class.
- When looking for WordPress tutorials, pay attention to the date and the type of theme being used. Older tutorials may show the Classic Editor, the Customizer, or other tools that aren’t part of the block theme editing experience.
- The Block Editor and Site Editor use many of the same tools, but they serve different purposes. Use the Page/Post Editor to create content for individual pages and posts, and the Site Editor to customize your site’s broader design and structure.
- Remember how themes, templates, and patterns work together: themes establish your site’s overall design, templates control page structure, and patterns provide reusable arrangements of blocks.
- You can customize your website without writing CSS, but your knowledge of HTML and CSS is still valuable! Understanding how websites are structured and styled will help you make better design decisions and troubleshoot problems as you work.
- Get to know the Site Editor through resources and practice!