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 latest update to WordPress 5.9, we have received some major upgrades. The Full Site Editor, a streamlined Pattern Directory, and the redesigned Openverse are some of the most notable ones. In the last 5.8.3 update, we caught a glimpse of the FSE (Full Site Editor) but now it’s finally here!
This might change how we work with WordPress completely as it brings a new era for site-building. But we know that changes aren’t always easy. A lot of questions come to mind such as “what is the full site editor”, or “what can we do with it…”. Well, since the 5.9 update is here, we can now fully explore the features of Full Site Editor.
This is a significant update for WordPress and we know that you want to know all about it. Therefore, in today’s article, we will explore FSE and what role it will play in WordPress web development.
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.
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 of 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
The new Twenty Twenty-Two theme supports the Full Site Editor. There are other themes such as Kiyono, Clove, Q, etc. that also support Full Site Editing.
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.
Notice the beta sign right beside the editor option? As we have mentioned earlier, the Full Site Editor is still being improved. But we will be able to use it in the latest version of WordPress.
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. Now there are blocks for your headers and footers. The editor consists of three parts: Site, Templates, and Template Parts. You can cycle between the editors and build your website. Let’s take a look at these editors:
Site: This is the place you will be building your site from. Here you click on ‘+’ (the plus icon) to open your Gutenberg blocks like you normally do. But now you will find several new blocks. Some of these new blocks are Header, Footer, Logo, Post Content, Post Title, Post Featured Image, Image Gallery, etc
Now you have access to enough blocks to create a complete website. Take your time and explore as many blocks as you can.
Another amazing feature worth mentioning is the menu. Remember how we created the navigation menus previously? We had to go to the WordPress dashboard, create new pages/items, then add them to the menu and assign the menu somewhere. After that, we used to come back to the frontend to see how the menu looks. Well, now you can do all that from the frontend editor!
Select the header and then choose the navigation menu. You will find a ‘+’ icon. Click on the icon and then link your page to the menu. To create a page, select “create draft page”.
That is how you can create a new page and add it to your menu at the same time! Now that is efficiency.
Templates: This is the part where you will find the templates added by your theme (plus your saved templates). The Twenty Twenty-Two theme comes with 404, Archive, Home, Index, Page (Large Header), Page (No Separators), Page, Search, Single Post (No Separators), and Single Post templates. This might vary depending on what theme you are using.
You can click on any template and start customizing it the way you want. For example, if you want to create a new page, select the Page template and you will be directed to a page layout. You can customize this page the way you want and then also add this as a template yourself.
Template Parts: This opens up the template parts editor. Here you can find parts like the header and footer. You can also add your own parts by clicking on ‘Add New’. You can select your header option and then customize it.
Again, depending on what theme you are using, this part might be different. Basically, you can select any template part such as the header and the footer, and then customize that part. The modified part will appear on every page. This is especially useful for headers and footers since both these sections are essential parts for every page.
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.
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.
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 gradient. 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 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! Remember that this is the beta version and there’s a lot to expect. You can, however, experiment with it as much as you want and see if you like the new interface.
Conclusion
It’s truly amazing to see how far WordPress has come. The WordPress Full Site Editor is one of the biggest changes that WordPress 5.9 has given us. This is one of the most significant upgrades we have seen from WordPress so far.
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. The overall interface hasn’t changed that much but we saw some new blocks and features. The editor is still in the beta phase and we can expect even more changes in the future. Don’t worry, we will be covering more on this topic as new information becomes available.
Are you excited about the new Full Site Editor? We are excited as well! So stick around and let us know your thoughts in the comment section below.
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.
