Mastering WordPress full site editing: a step-by-step tutorial

WordPress’ evolution has taken time to mature, but it’s gone from a simple blogging platform to a robust Content Management System (CMS) that almost runs the web. The biggest advancements have been in creating site designs. WordPress full site editing (FSE) is an ambitious way to put complex tools into every pair of hands.

This comprehensive guide will explore the history and functionality of WordPress full site editing. The ultimate goal is to show you how FSE works and let you develop your own site designs, just like the pros.

A brief history of design and layout creation within WordPress

Understanding the evolution of designing sites and layouts within WordPress is an essential part of appreciating the significance of FSE. The key tool that’s central to where we are now is the Classic Editor.

The WordPress Classic Editor interface. It shows the visual and text editing tabs, formatting options, and publishing settings. The status is set to Draft and visibility to Public.
The WordPress Classic Editor.

Of course, this wasn’t always “classic.” It was always the TinyMCE Editor – the default since the first version of WordPress up until around 2018. This is a simple What You See Is What You Get (WYSIWYG) text editor that lets you input content and basic HTML, along with some formatting styles. In fact, you can still obtain the TinyMCE Editor as it’s a commercial tool:

The TinyMCE rich text editor interface integrated into a website. It shows a sample event registration landing page with editing tools, and a form for users to register for an event.
The TinyMCE Editor home page.

The main drawbacks of the TinyMCE Editor are a lack of front-end preview options and less flexibility than you’d sometimes like. Theme frameworks became a viable and powerful alternative. Of course, StudioPress’ Genesis Framework is still with us, but there were a few others, such as Thesis.

A blog post page using the Genesis Framework. It features a black and white image of the Eiffel Tower in Paris. The post is titled April in Paris – Ella Fitzgerald and dated February 1, 2018. The sidebar shows recent posts with thumbnail images.
The default Genesis Framework theme.

You can see how we move from text editing to visual web design here. The framework gives you options on the WordPress back-end, which lets you change aspects of the front end. In addition, you get more ‘bare metal’ functionality to make further changes, such as hooks and filters, template support, and more.

This still didn’t have great accessibility for a typical user, though, which is where page builder plugins would become popular. You’d use them alongside the TinyMCE/Classic Editor to give you a drag-and-drop system for designing your site. These plugins are largely the same as they were back around 2011. Divi and Beaver Builder still rule, although Elementor is a behemoth, too:

The Elementor interface showing a furniture store homepage design. The page features a New Collection section with product images and descriptions, including a table lamp for $200 and a space bench for $300. A large purple acrylic side table is showcased on the right. The interface includes editing tools and color pickers on the left-hand side.
The Elementor home page.

You’ll want to read the next section to understand why we have alternatives to the TinyMCE Editor and a page builder plugin.

The Block Editor and WordPress full site editing

WordPress is number one in popularity, but to get there, it has had to defend its title. Over the years, many other platforms have saturated the marketplace.

Squarespace, Wix, Medium, and many others all want the same audience and user base WordPress does, and up until the Block Editor, they all had a much better editing experience.

The Wix website builder interface displaying a photography portfolio page in edit mode. The left-hand panel shows options to add sections, while the main area presents a sample layout for Edward's White Room Photography with an image of a woman holding a camera. Various editing tools and publish options are visible in the top menu bar.
Editing a website with Wix.

This was a big concern for WordPress management, as other platforms at the time were gaining more visible traction. The competition also had modern, visual, performant interfaces, even for simple layout control.

The Block Editor is a modular way to build your site’s posts and pages, although this also has drawbacks. For starters, its limited scope means using it likely requires a page builder plugin if you want to make any ‘deeper’ changes. You would also still need development knowledge to build a complete site, which is a creative barrier the WordPress team has a solution to.

What WordPress full site editing (FSE) is

WordPress full site editing represents the latest and greatest frontier for developing your site. It builds upon using Blocks to piece your design together, and encompasses more beyond individual posts and pages. At its core, FSE lets you manage every aspect of your WordPress website’s design using a unified and intuitive interface.

The WordPress Site Editor interface. The image shows a post template layout with three columns displaying post titles, excerpts, and publication dates. A context menu is open, showing options such as Copy, Add before, Add after, and more.
Editing templates within the WordPress full site editor.

This is now the ‘official’ way to edit your site. It brings all aspects of your site under its wing:

  • Navigation editing. The old method using the Appearance > Menus builder screen is now incorporated into the Site Editor.
  • Global styles. You have greater control over the look and feel of your entire site. This includes colors, typography, spacing, and much more.
  • Template editing. This used to need development and coding knowledge such as PHP, HTML, and CSS. Now, you can use the Site Editor to create and modify templates for the different parts of your site without the need for code.
  • Block Patterns. Consider these to be reusable design elements using collections of Blocks you can insert into your layouts.

Given the evolution of the editor, some functionality is also disappearing. For instance, you don’t need widget areas anymore, although WordPress still uses them as legacy functionality for non-Block themes.

We’ll return to what WordPress full site editing can help you achieve later. Before that, let’s get more into why we need FSE in the first place.

Why FSE is in WordPress

The WordPress team has a few reasons to introduce FSE. Some of these are technical considerations. For example, the Block Editor doesn’t let us edit all aspects of the site when the functionality should be there in the first place.

It’s hard to understand why it’s taken so long to let us work on template styles without the need for code. Between the Classic Editor, frameworks, page builder plugins, and the Block Editor, we have never had the opportunity. FSE fixes this in a native way for WordPress.

The WordPress Templates management interface within the Site Editor. It displays various page templates such as All Archives, Blog Home, Index, and Page No Title with thumbnail previews and descriptions for each template.
The Templates screen within the Site Editor.

This simplification unifies the editing experience and brings it under the control of the core WordPress team rather than third-party developers. It also means the learning curve is consistent. Between content, layout, and design, you have a familiar experience from one screen to the next.

This experience also brings longevity. WordPress full site editing won’t disappear; it will simply evolve over time. This gives the platform a foundation to adapt to whatever the core development team wishes to bring to WordPress.

Overall, this empowerment stretches from the developers to the end users. WordPress full site editing gives everyone greater control over the design changes they wish to make without relying on developers, complex customizations, or coding knowledge.

The alternatives to FSE

For the WordPress team, FSE is not only the present; it’s the platform’s future. However, you’ll need a compatible theme to use it (more of which later). What’s more, other WordPress businesses might not agree, especially those with competing products.

For instance, WordPress web developers would argue that trusting the design of your theme to someone with expertise is a sound idea. We’d agree in many cases, especially if you have complex needs, the right budget, and time.

A code editor window showing PHP functions for registering custom block styles in WordPress. The code defines styles for an arrow-icon-details block, including CSS properties for padding and list-style-type.
A coding editor showing a portion of PHP code.

Of course, the Block Editor is still viable for the majority of content creation and customization. The leap from this to full site editing will be a mere short hop, and you’ll likely use it already:

The WordPress Block Editor interface for a Privacy Policy page. The content area shows sections on Comments, Media, and Cookies with suggested text. A sidebar on the right offers block editing options for typography and styling.
The WordPress Block Editor.

Lots of users will turn to the Block Editor for the most part then bring in another solution. Adding a page builder plugin provides some of the functionality the Block Editor lacks. Divi, Elementor, Beaver Builder, Brizy, and many more have great feature sets and allow for deeper customizations and development:

The Elementor interface within WordPress, showing text editing tools on the left, a preview of the page content in the center featuring a mountain landscape image, and a structure panel on the right showing the page layout elements.
The Elementor page builder screen within WordPress.

For a polar opposite experience to WordPress full site editing and a return to where this all began, you could opt for a whole new CMS: ClassicPress.

The ClassicPress website homepage. It features a teal and green gradient background with white text describing ClassicPress as The CMS for Creators. There is an image of the ClassicPress dashboard and buttons to download or switch from WordPress.
The ClassicPress home page.

The project’s philosophy is that WordPress’ evolution is a great idea, apart from the Block Editor and, by extension, FSE. As such, the ClassicPress fork doesn’t include it. Instead, you’ll create sites using the Classic or TinyMCE Editor—just like in the past.

It’s essentially a single-issue solution to the Block Editor’s immaturity upon its first release. At the time, the concept made theoretical sense. Given WordPress’ current editing experience though, there’s little reason to opt for ClassicPress.

How WordPress full site editing works

In a nutshell, WordPress full site editing extends the Block Editor’s functionality across your whole site. To use FSE, you need a ‘Block theme’ or ‘FSE theme’ that supports it. We’ll talk more about this later.

The high-level overview of how FSE works is straightforward:

  • FSE uses Blocks. Just like the current iteration of the WordPress editor, your entire site uses Blocks for each component. Here, both individual content elements and larger structural components (such as headers and footers) will use Blocks.
  • You can edit page templates within WordPress. There’s no need for PHP knowledge any longer when altering template files. Instead, you can create and edit them from the Site Editor.
  • There is access to site-wide design tools. We’ll look at the Global Styles panel later, but it lets you control design elements that affect your whole site. In many cases, you won’t need custom CSS to implement your vision.
  • Block Patterns let you build quickly. As with the Block Editor, there are layouts for common site sections that you can insert and customize without restriction.
  • The theme.json file is central to FSE. This configuration file will define the fundamental styles and settings for your theme. It’s a starting point for further customizing your site, but it can also be the ‘hub’ for your development.

Most users won’t run a version of WordPress older than 5.9, but if you do, you’ll need to update to leverage FSE. As we outline, you’ll also need a supporting theme. Let’s discuss this quickly.

Choosing a suitable FSE theme

Fortunately, choosing a Block theme takes the same level of care as any other type of theme. You’ll need to look at a few objective facets to ensure you download a strong solution:

  • Check for regular updates to the theme’s codebase.
  • Find out what other users think about the theme through ratings and reviews.
  • Make sure the developer offers the right level of support for your needs.

Since WordPress full site editing is a new arrival to the platform, fewer theme options are available to you. This doesn’t mean quality is hard to find, though. Many bigger developers have their take on a FSE/Block theme. One of the first was ThemeIsle’s FSE version of Neve:

The Neve FSE theme site. The header includes navigation links, and the main content features a headline (“Create and grow your unique website today”) with a subheading and two Call To Action buttons. Below are three feature icons for building sites, style variations, and pattern-readiness.
The Neve FSE theme home page.

The ‘traditional’ or ‘classic’ version of the theme uses the old Customizer from the Appearance screen. This version incorporates the Site Editor in full and offers better subjective performance.

There are other Block themes to look at, such as Portfolio WP and Mugistore. However, Ollie is arguably the best of the bunch:

An array of website design mockups and UI components displayed in a grid layout from the Ollie theme. It showcases various elements such as headers, content sections, image galleries, and Call To Action buttons in dark, light, and colorful themes.
The Ollie theme home page.

This commits to WordPress full site editing without wavering. It has a sweet onboarding wizard, and even has a premium version that includes lots of Pattern Library elements and templates.

Even the default Twenty Twenty-Four theme is a viable choice for your site now:

The Twenty Twenty-Four theme home page, displaying a hero section including a large architectural image of a modern building with a distinctive slanted roof covered in wooden slats. The header includes navigation links for a Privacy Policy and a Sample Page.
The Twenty Twenty-Four theme home screen.

The Site Editor’s capability and depth enable us to build on top of (and extend) themes that often require lots of code and resources. It democratizes the ability to build and develop themes, and the main interface is the first point of contact for this.

Touring the main FSE interface

To find the Site Editor, navigate to Appearance > Editor within WordPress:

A screenshot of the WordPress dashboard. The left sidebar displays the main WordPress admin menu options. The Appearance menu is expanded to show the Themes and Editor options. It also shows a Site Health Status warning.
The Appearance > Editor link within the WordPress dashboard.

This screen is straightforward enough. On the right-hand side, you will see the layout preview. You can click this to open the Site Editor interface for your home page. On the left is a set of links to other editing pages for specific tasks. We’ll take a deep look at these screens shortly.

Before we get into each of the five screens of FSE, note that you can exit the Site Editor using the WordPress logo in the upper-left corner of the screen. As an alternative, you can click the ‘back’ arrow on the main Design page:

The WordPress Site Editor’s Design screen. There are options for Navigation and Styles visible. The WordPress logo and a back arrow are highlighted in the top left-hand corner.
The main Site Editor Design page.

With this out of the way, let’s get into using FSE.

The 5 pillars of WordPress full site editing

Now, we’ll examine each screen of the site editor in the order it appears in its navigation. In fact, this leads us to discuss that screen!

1. Navigation

The Navigation page replaces the Appearance > Menus screen. Once you enter it, you’ll see a list of posts and pages on your site:

A full view of the Navigation page within the WordPress Site Editor. The left-hand sidebar shows a navigation menu structure, while the main content area displays a website preview with placeholder text and the visual navigation menu.
The Site Editor’s Navigation page.

If this is a new site, you’ll see all of your posts and pages here. This could be confusing because it represents your primary navigation menu. Near the Navigation heading, open the Actions menu. This will give you options to edit the menu, change the name, delete it, or duplicate it:

A portion of the Navigation page within the WordPress Site Editor. The site’s title is visible at the top. The left-hand sidebar shows navigation menu items, and a drop-down menu in the center offers options to rename, edit, duplicate, or delete a selected menu item.
Opening the Actions menu within the Navigation page.

If you click on Edit, this opens a version of the Block Editor that contains your menu as a Navigation Block:

The Site Editor’s navigation menu interface. The main content area shows a list of navigation menu items using Lorem Ipsum text. On the right-hand side, there's a Navigation Menu panel with options to edit and manage the menu structure.
Working with the Navigation Block within the Site Editor.

In the sidebar, you have options to move each entry up or down, remove it from the menu, or create a sub-menu from it:

A close-up view of the Navigation Menu Block options within the Site Editor. It shows a drop-down menu of options for the first menu item to move them up or down, add submenu links, or remove items.
The Navigation Block’s sidebar.

Each entry in the menu uses a Page Link Block, which will come with its own options. You have inline formatting tweaks, along with sidebar style settings:

The Site Editor displaying the contents of a Navigation Menu Block. An inline menu displays a list of options to add new links, customize typography, adjust styles for the navigation elements, and more.
The formatting options for a Page Link Block within the Site Editor.

Note that you can add inline images, submenus, and more here. It’s more flexible than the classic way of creating navigation. To simply add an item to the menu, click the Plus icon and select your post or page:

A close-up of the Navigation Block within WordPress, showing the Add link menu. The menu displays a search bar to enter a URL and a list of pages including Privacy Policy and Sample Page. Icons for adding content and navigating are visible in the top toolbar.
The options to add a new page as a navigation item.

Once you save your changes, you’ll see the navigation reflect your tweaks. To create further menus, you can use the Actions > Duplicate link back on the Navigation page.

2. Styles

The Styles screen is how you control the look of your site on a global level. The sidebar offers a few different palettes and typography settings for different designs:

The Styles page within the WordPress Site Editor. The headline reads A passion for creating spaces, and precedes a description of services. Six service categories are listed below: Renovation and restoration, Continuous Support, App Access, Consulting, Project Management, and Architectural Solutions. The left-hand sidebar shows various style presets and color palettes for customizing the theme.
The Site Editor’s Styles screen.

Clicking any of them will show you the design in place on your site. However, there’s an Edit ‘pencil’ icon at the top of the sidebar to further make changes in the Site Editor:

A close-up of a website design within the Site Editor showcasing services offered by an architectural firm. The right-hand sidebar shows style customization options for typography, colors, shadows, and layout.
The options available within the Style sidebar of the Site Editor.

Each of the options within the sidebar here covers colors, layouts, typography, and even shadow settings. For instance, you can select site-wide fonts and apply them to various elements of your design:

The Site Editor interface showing global typography settings. The left-hand side displays partial text about creating spaces, while the right panel shows font and style options including Cardo, Inter, and System fonts. The color scheme uses red text on a light background.
The typography settings within the Site Editor sidebar.

Going deeper into the menus will often give you further options to play with, such as spacing, colors, and more. The Layout section lets you customize the dimensions of your main content area, along with padding and Block spacing:

A screenshot of the WordPress Site Editor interface showing layout customization options. The main content area displays a heading "for creating spaces" with some descriptive text. The right-hand sidebar shows layout settings for adjusting content width, padding, and block spacing.
The Layout options within the WordPress Site Editor.

If you want to see how these changes look without browsing your site, you can use the ‘eye’ icon to open the Style Book. It’s a handy visualization tool that designers will love:

The WordPress Style Book interface, showing typography options for a website. The text "Code Is Poetry" is displayed in various sizes to demonstrate different heading styles. A paragraph of sample text and a bulleted list are also shown. The right-hand sidebar offers options to customize typography, colors, shadows, and layout.
The WordPress Site Editor’s Style Book.

Finally, while we won’t focus on it here, you can also customize the look of each Block for your site. For example, you could build on a Paragraph Block’s global styling. Again, when you finish up, you can save your changes, and these will apply to your site.

Using the theme.json file with WordPress full site editing

Before moving to the next FSE screen, you should know about the theme.json file. This is essentially the developer’s version of the Styles screens.

A code editor displaying a portion of a WordPress theme.json file. The visible section defines color palettes and gradients, including names, hex color codes, and gradient definitions for various color schemes.
A theme.json file within a coding editor.

It lets you define the default styles for your site and its Blocks, and you’ll use it as a configuration file. Moreover, it uses the JSON format, so it offers a less code-heavy experience than in the past.

Ultimately, know that whatever you can do within theme.json, you can also do within the Site Editor.

3. Pages

The Pages screen duplicates the functionality within the classic Posts and Pages screens within the WordPress dashboard. For example, you’ll see a list of statuses that filter your pages into Published, Scheduled, Drafts, and others:

The Site Editor’s Pages screen, showing a list of filtered scheduled pages on the left-hand side. The right-hand side shows a preview of the home page of a website.
The Pages screen from the Site Editor.

Each page has extra actions, such as Edit, View, Rename, and Delete. You can also edit a page using the ‘pencil’ icon. At the top of the list, there’s an Add New Page button, which does the obvious.

If you already use the Block Editor, these screens will feel most at home to you. However, while you have the same functionality here as you usually do, the Site Editor gives you some extra Theme Blocks to help you build your site. These cover typical use cases such as adding a site logo, navigation, authors, comments, and more:

The WordPress Site Editor interface. The left-hand sidebar shows various Block options such as Navigation, Site Logo, and Site Title. This sidebar highlights the Query Loop Block. The main editing area displays a page layout with a hero image.
Choosing Theme Blocks from the WordPress Site Editor.

One of these – the Query Loop Block – can help you achieve tasks that you’d often need PHP to achieve. For instance, because it lets you display posts based on specific parameters, you could display your latest posts or even build a portfolio. However, none of this can happen without the final two screens within the Site Editor.

4. Templates

Templates are a staple of WordPress development. They are reusable layouts to help you define the structure of the various parts of your site. It would typically need expertise with PHP, but you can customize them all (and create new ones) without code within the site editor.

The WordPress Templates management interface within the Site Editor. It displays various page templates such as All Archives, Blog Home, Index, and Page No Title with thumbnail previews and descriptions for each template.
The Templates screen within the Site Editor.

Working on templates follows the same approach as posts and pages: you’ll use the Site Editor to add Blocks to the template, then save the changes. Of course, these will apply to every page that uses the template in question.

To create a new template, click the Add New Template button:

Adding a new template within the WordPress Site Editor. It shows options to add templates for different page types such as Front Page, Pages, Author Archives, Category Archives, and more.
Adding a new template within the Site Editor.

This will run you through a quick wizard to select a type of template you want to create and a suitable Block Pattern to start the design. These patterns are the focus of our last section.

5. Patterns

Block Patterns are related collections of Blocks that fulfill specific roles on your site. For example, you can slot in a header pattern complete with logo, navigation, and site title:

The WordPress Site Editor showing a header Block Pattern containing menu items, a site title, logo placeholder, and links to a Privacy Policy, Sample Page, and two other Latin placeholder text items. The WordPress interface controls are visible at the top of the image.
Working on a header Block Pattern within the Site Editor.

Creating them is straightforward, although, without the site editor, you’d need to register these patterns using PHP. Now, though, you can use the Patterns page:

The WordPress Patterns management page within the Site Editor. The left-hand sidebar shows categories of patterns. The main area displays thumbnail previews of banner patterns, including images of buildings and architectural details.
The Block Pattern library within the Site Editor.

On the left-hand side, you’ll see all of the available patterns split into folders called ‘types.’ These are a great way to quickly build out a site design, and often look fantastic.

The Add New Pattern button opens the editor and lets you create those sections yourself. This allows you to create reusable elements for your site, which represents a sustainable and self-serving way to develop sites for yourself and anyone else you work with.

Tips on using WordPress full site editing to create designs

There’s plenty to dive into when it comes to WordPress full site editing, and we can’t cover everything you can do with it. However, we can pass on a few tips to make the most of FSE.

For example, you can export your templates and styles for reuse on other sites. To do this, head into the site editor for any post or page, then click the Options menu from the top toolbar. In the drop-down menu, choose Export:

The Site Editor interface showing the main editing screen, menu options, and a sidebar displaying editing tools. At the bottom, the Export functionality is highlighted.
Exporting a theme from the Site Editor’s Options sidebar.

This will give you a ZIP file of your theme, and if you need to import it, you can do so using the WordPress Importer plugin.

The Search icon on the site editor screens and the search bar in the Block Editor toolbar gives you access to the WordPress Command Palette or Command Center. If you use coding editors, you’ll understand how this works. It’s a way to get to almost anywhere within the Site Editor using a contextual search query and even run commands:

The Command Palette within the Site Editor. The drop-down menu shows options such as Styles, Single Posts, Pages, Sidebar, and Post Meta, among others.
Opening and using the Command Palette from the Site Editor’s Design screen.

Using this can speed up your development and reduce the number of keyboard and mouse actions you need to take. You can add, delete, and edit all manner of site elements from here, along with toggling different views, and working with patterns.

Summary

WordPress full site editing represents the current way to design your site without code. It’s a significant step up from the previous content editing iterations, giving you a comprehensive set of options to play with.

We like how flexible it is: typical site owners won’t have to touch a line of code and can work in the Site Editor screens. Developers have access to the theme.json file, which we’ll cover in a future article. Regardless, right now we have the pinnacle of creating a WordPress website to your exact specifications.

Do you want to start using WordPress full site editing for your WordPress projects? Let us know your thoughts in the comments section below!

The post Mastering WordPress full site editing: a step-by-step tutorial appeared first on Kinsta®.

版权声明:
作者:zhangchen
链接:https://www.techfm.club/p/140724.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>