Full-Site Editing (FSE) represents a huge change in the way WordPress users design and develop websites. As a member of the WordPress community, you’re probably eager to gain some hands-on experience with it. However, when WordPress 5.6 shipped, it did not include this long-awaited feature.
Fortunately, there is a way to access the Full-Site Editor. With some help from the Gutenberg plugin and an experimental WordPress theme, you can access a beta release of FSE today. This is a prime opportunity to test out the next phase in WordPress design before it’s officially released.
In this article, we’ll get you up to speed with FSE before it’s introduced into WordPress core. We’ll show you how to set it up and use it to edit every part of your WordPress website, including the underlying template. Let’s get started!
What Is Gutenberg Full-Site Editing (And Why Is It Important)?
Your typical WordPress website consists of global elements and page elements. Global elements are those that appear across your entire website, such as your header and footer. They are often generated by your theme, and you can make changes to them using the WordPress Customizer:
By contrast, you add page elements to a specific webpage using the WordPress editor. Some common examples include text, images, and videos:
The upcoming Full-Site Editing (FSE) feature aims to provide a single interface where you can add both global elements and page elements. This will pave the way for building entire websites using only Gutenberg blocks. In preparation for this shift, Gutenberg developers have been busy creating a library of site-building blocks, including Site Title, Post Title, Comments, and Post Content.
When it was launched in 2017, Gutenberg received a mixed response from the WordPress community. Despite this rocky start, the Block Editor has since proven itself to have some significant advantages over the Classic Editor.
As the next step in WordPress’ block-based journey, FSE may provide even more benefits. Firstly, it promises to offer more flexibility in how you design and build your page layouts. For example, you might use the Full-Site Editor to define your website’s title. You can then override this title for specific pages as needed.
FSE may also make it easier to design and build your WordPress website. Using this editor, you can make global and page-specific changes from the same interface. This means you only have to learn a single workflow. You also won’t have to waste time navigating between the Customizer and the WordPress editor. When you have a list of changes you need to implement, these seconds can add up to significant time savings.
How to Access Full-Site Editing in WordPress 5.6 (In 3 Easy Steps)
Instead of spending more time talking about what FSE can do for you, we think it’s best for you to see it in action. Here’s how you can add the upcoming Full-Site Editor to your WordPress website today.
Step 1: Prepare Your Staging Environment and Install the Gutenberg Plugin
At the time of this writing, WordPress still classes the Full-Site Editor as an experimental feature. This means it isn’t recommended to use FSE in a production environment, such as your live website.
Instead, you can create a safe testing environment in which to try it out. If you don’t already have a sandbox, you can create a local WordPress site using XAMPP, Local by Flywheel, or another platform.
Next, it’s time to install and activate the Gutenberg plugin. If you’re already using it, we recommend that you check whether you’re running the latest version, as it receives frequent updates:
Although FSE isn’t yet ready for primetime, a beta release of this editor was included in WordPress 5.6. If you haven’t upgraded to WordPress 5.6, you’ll need to do so now. This should give you the most stable and reliable FSE experience.
We also recommend you use PHP 7.3 or higher. If you’re unsure which version of PHP is powering your WordPress site, you can typically find this information in the WordPress Site Health tool under Info > Server.
If you’re lagging behind with your PHP updates, we recommend looking into the documentation for the platform you’re using to host your staging environment. It should include instructions on how to upgrade. Otherwise, if your sandbox site is hosted by a third-party provider, you can contact support for assistance.
Step 2: Install the WordPress Theme Experiments
The WordPress Theme Experiments are a collection of projects that each explore an aspect of creating block-based themes and templates. In this collection, you’ll find the TT1 Blocks theme, which is an experimental block-based version of Twenty Twenty-One. The TT1 Blocks theme is the key to unlocking the Full-Site Editor ahead of its official release.
To start, head over to the WordPress Theme Experiments GitHub page and click on the green Code button. You can then select Download Zip:
Once this folder has downloaded, unzip it. Inside, you should spot tt1-blocks. You can now create a new zip folder containing tt1-blocks only. This process can vary depending on your operating system, but you’ll want to look for the option to compress the file.
The next step is uploading this .zip file to WordPress. In your admin dashboard, select Appearance > Themes. You can then click on Add New > Upload Theme > Choose File and select the tt1-blocks zip. Then click on Install Now.
Once this folder has uploaded, select Appearance > Themes in the WordPress menu. This screen should now include the TT1 Blocks theme:
To activate this theme, hover over it and then select Activate. A new Site Editor (beta) option should now appear in the WordPress dashboard sidebar menu.
If this option doesn’t appear, you may need to enable Full-Site Editing manually. In the left-hand menu, navigate to Gutenberg > Experiments. You can now select Full Site Editing > Save. After making this change, you should have access to the Site Editor menu.
Step 3. Customize Your Site With FSE
Up until now, WordPress users have only experienced Phase 1 of the Gutenberg project. It’s time to get some hands-on experience with Phase 2, by taking FSE for a test-drive.
To access this new editor, navigate to the front end of your WordPress website. You should now see an Edit site option in the admin toolbar:
It’s easy to edit a webpage in this new editor. Simply navigate to the page or post that you want to update, and then select Edit site from the toolbar. This will open the page for editing in WordPress’ new FSE mode:
You can now edit any element on the screen by giving it a click. When you select an element, information about that item will be displayed along the bottom of the screen. You can also add new global and page elements by selecting the plus (+) button.
FSE is a tool that’s best experienced first-hand. Assuming you followed our advice and created a testing environment, it’s well worth spending some time experimenting with the different FSE features and settings.
The Future of Full-Site Editing in WordPress
As you’re exploring FSE, bear in mind that the WordPress core development team is actively looking for feedback on this new feature. If you encounter any issues, you can report them on the Gutenberg or theme experiments GitHub repositories.
You may also want to consider joining the FSE Outreach Program. This program gives WordPress users a way to communicate with the FSE development team.
The WordPress team created this program to gather feedback on every part of the FSE experience. This includes workflow changes, bug reports, and new features you want to see included in FSE. According to the FSE FAQ, participation in this program is expected to take around three hours per week.
If you want to keep up-to-date on FSE Outreach developments, information from this program will be posted to the Make WordPress Test Blog using the tag #fse-outreach-program. You can also join the #fse-outreach-experiment Slack channel for more updates.
Conclusion
The upcoming Full-Site Editing (FSE) feature promises to be the next major step in WordPress design and development. By getting some hands-on experience now, you can ensure your site is prepared for the changes ahead.
In this post, we showed you how to access a beta release of the full site editor:
- Prepare your development environment and install the Gutenberg plugin.
- Install the WordPress Theme Experiments.
- Customize your site with FSE.
Do you have any questions about WordPress’ new Full-Site Editing feature? Let us know in the comments section below!
No Comments
Start the conversation