WordPress Full Site Editing: Everything You Need to Know

The idea of WordPress full site editing is that you will be using Gutenberg blocks to create your entire website. It’s a revolution.

Perhaps, this is the biggest shift in the history of WordPress. With the WordPress 5.9 update, WordPress received some of the most amazing features. The Full Site Editor, a streamlined Pattern Directory, and the redesigned Openverse are some of the most notable ones. In the 5.8.3 update, we caught a glimpse of the FSE (Full Site Editor), and it was available as a Beta for some time. WordPress 6.3 update introduced some major changes in the Full Site Editing.

The main idea of Full Site Editing is to provide the user with a collection of features that allows you to implement the power of blocks to all parts of your site rather than posts and pages. So if you’re familiar with Gutenberg, you can now use that experience to customize your entire site.

If you haven’t used Full Site Editing yet, it might not be a good idea to shift to it just yet. We would recommend that you create a few demo sites and experiment with it. In this post, we’re going to explore some of the features of Full Site Editing and give you an idea of how this thing works.

What is WordPress Full Site Editing?

When building a website from scratch we have relied on page editors like Elementor, WPBakery, Beaver Builder, etc. We used such plugins because they give us the power to create everything on our website. 

We also use Gutenberg, but mostly so far for creating posts and pages. Plus, there are several Gutenberg plugins to supercharge it. But now, with WordPress Full Site Editing, you can use Gutenberg more effortlessly to create a full-fledged website!

The idea of WordPress Full Site Editing is that you can now use the Gutenberg blocks to create your entire website. The Full Site Editor combines different features like site editor, global styles, Query block, Navigation block, Template, block templates, and so much more. But for site editing, the Template Editing Mode is used. This feature enables the use of Theme Blocks which you can use to build your site.

Get Latest Post Notifications!

Subscribe to our newsletter

There is also another interesting change that FSE brings. Previously we used WordPress Customizer to define global variables for headers, footers, colors, etc. Now, with a block theme, you will not find the Customizer anymore because all of that can be done from the WordPress FSE. You can build your website with Gutenberg blocks and edit global changes from this single interface.

Previously, if you wanted to change your website header, you had to go to the customizer and change things from there. Now you can do all of that from the full site editor. Also, you can use Gutenberg blocks to control the layout of your blog posts, blog pages, etc.

How Full Site Editing can benefit you

By now you might have already guessed how much simplified your life becomes with the introduction of FSE. As a single interface, FSE can now be used to define global elements and make page-specific changes without having the trouble to navigate between the two editors. You can use the same editor for making inner changes as well as global changes.

Full Site Editing makes your website building more efficient and productive. It also simplifies the learning curve so that the newcomers will have less trouble familiarizing themselves with the workflow of WordPress. 

Now, with the help of Full Site Editing, you will be able to make global and page-oriented changes simultaneously. This could help improve the quality of your finished design. Previously you had to switch between editors and then review your design, which took a lot of time. Now you can exactly see what your design looks like without having to leave your editor.

This new process of development will encourage designers and website developers to explore possible layouts. It was previously difficult when the editor was divided into two separate screens.

Requirements for using Full Site Editing

Full Site Editing is the newest addition to WordPress and is still in the beta phase. So you can expect some changes in the future.

However, to use Full Site Editor, you need a couple of things. Let’s take a look at these:

  • A theme that supports FSE
  • WordPress 5.8.3 or above

Previously there were only a few themes that supported Full Site Editing but now there are quite a few. Themes like Responsive FSE, Blockbase, Naledi, Tove, Pria, Kiyono, Q, Pacer, etc. support FSE.

New features in WordPress Full Site Editing in 6.3 update

There were a lot of updates introduced to Full Site Editing in the WordPress 6.3 update. More features were introduced to allow you to build your website freely. With that being said, here are the updates that Full Site Editing received:

  • More items in site editor navigation
  • Edit pages in site editor
  • New pattern management system
  • Manage navigation menu in the site editor
  • Preview themes
  • Switch theme styles
  • Style revisions
  • New command palette tools
  • Two new blocks in the block editor
  • Updated top toolbar
  • Improved padding and margin tools
  • Cover block with layout and color options

Besides several under the hood changes were made to make the site editor more user friendly.

How to access the full site editor?

If you have a theme that supports Full Site Editing and you have the latest version of WordPress, you are ready to use FSE. You will find the editor on your dashboard, if it’s not there then hover over ‘Appearance’ and you will find the editor.

Once you click the editor option, it will open up Full Site Editor.

You might have already noticed a change in the interface. Well, it’s basically the same as the 5.8.3 version with a slight change. Now you can edit your entire site with Gutenberg blocks. The following items can be seen in the navigation menu:

  • Navigation: This is the navigation menu of your site. You can also rename this item. To do that, click on it, then click on the 3 dots, and select rename. Besides the 3 dots, there’s an edit icon, clicking on it will allow you to customize your navigation menu.

Here you can already see your navigation items. You can add more menu items by clicking on the ‘+’ icon beside your navigation menu on the center of the screen. You can edit the menu items from the right side bar and add page links, set typography, etc.

  • Styles: Styling your pages with a site editor is a lot easier now. Now users can see the styles in the site editor. You can pick any style for your theme and start customizing.

There’s also a style revision feature that allows you to review all the changes you’ve made. If something isn’t to your liking, you can undo that easily.

  • Pages: Creating and editing pages is a very important part of web development. The new site editor included a system where you can create page drafts and start editing.

By clicking on the ‘+’ icon, you can add a page draft. Then you can start editing that page on your full site editor.

  • Templates: To quickly start building your site, you can use templates.
  • Patterns: With the latest update, WordPress now has better pattern management. It is also seen in the site editor navigation. Opening the pattern menu will show you synced and unsynced patterns along with template parts.

Reusable blocks are now synced patterns. Clicking on the “My Patters” on the left side menu, you’ll find your synced patterns. These patterns can be used anywhere on your website and editing them will effect everywhere that pattern has been used. This will make your site building a lot easier.

Unsynced patterns are similar to synced ones, but editing those won’t change those patterns everywhere on the website.

What about global settings?

Well, now that the Customize option is gone, where can you change your global settings? We did show you the part where you can change your header, footer, and logo but what about styles? Don’t worry, it’s there, nestled up in the upper right corner of your screen.

global styles menu

From here you can change your global styles like typography, colors, and content layout. You can also select a specific block for a section and customize it. This change will appear on all of the blocks across your website. Now that is efficiency! You can also click on the three dots to access other settings like Spotlight Mode, Top Toolbar, Style settings, etc.

color options from within the editor

If you want to change the colors of your website, click on the Color from the styles option. You will be given choices between 3 elements: background color, text color, and link color. Select what you want to color. You can color the background with solid and gradients. You can also select a custom color if you want.

Note: These are theme-specific options. That means in each theme you will get a different option for color and gradients. We have used the Twenty Twenty-Two theme and these colors and patterns are available for this theme. When you use a different theme, you might find different options for styles.

You can imagine how convenient this new process of designing is. Previously you had to leave your page builder and then open up the Customize menu. From there you had to tweak your global settings. Now you can do it in the same editor with ease.

Now that makes Gutenberg a complete site editor! The WordPress full site editor is becoming more and more powerful. With the 6.3 update, the editor received some of the biggest features which makes it a lot more user-friendly. The idea is the give the user a single place to create and design their website. However, more updates are on the way and we can expect the site editor to become more powerful.

Conclusion

It’s truly amazing to see how far WordPress has come. WordPress full site editing was first introduced in the 5.8 update and received the biggest update in the 6.3 update. The update also introduced some performance upgrades. The image performance enhancements allow us to improve page load speed and resolve some common core web vital issues.

Gutenberg blocks that were once used for posts and pages are now in a full editor. This changes a lot when we talk about page builders like Elementor, WPBakery, Beaver Builder, etc. Now Gutenberg will be considered among these elites.

In the earlier updates, we got a glimpse of the full site editor. We also explored WordPress’s full site editor when it was in the beta phase. There were a lot of improvements to be made back then but now we can see as it is taking form. Still, there’s a lot more way to go, but it’s finally at that point where you can start building websites with it.

The purpose of full site editing was to allow users to build websites faster without any drawbacks. You can create pages and start editing those, you can use templates and patterns to speed up your building process. Not all themes support the site editor, but there are enough themes to start experimenting and build a full site with it.

We hope this article was helpful for you guys. We know there are a lot more features of the site editor to explore, but for now, we thing this is enough. So give it a try, and share your experience in the comment section. Let us know what you think of the site editor.


Disclaimer: This post may contain affiliate links and we may receive a small commission if you purchase something by following them. However, we recommend services/products that we believe good to serve your purpose.

Leave a Reply

Your email address will not be published. Required fields are marked *