What is the full site editing project? What are its objectives, its advantages? Is there an alternative for developers who object to the Gutenberg block editor?
Initiated by the development of the Gutenberg editor, the WordPress full site editing (FSE) project is the new “native site management experience”. It allows to modify and customize the whole interface of a site from blocks of editorial content.
Table of Contents
What is FSE (Full Site Editing)?
Every WordPress website is composed of main elements and page elements.
ESF is a collective term for a set of new WordPress features: theme blocks, template editing, and global styles. With block themes, you use blocks to create entire pages or websites. Everything you see on a page is a block.
With the template editor, you can design entire pages, including the site header and footer. The template editor allows you to add templates to your posts and pages. You can combine existing content with new templates, and give your posts and pages individual designs, headers and colors. You can also customize your pages with new site blocks, including: Site Title, Logo, Navigation, Featured Image, Date, Categories and Tags.
Finally, with a new theme configuration file for developers, you can use the new configuration file with classic themes and theme blocks. With the theme.json file, you can set the default settings for blocks, content width, fonts and colors, and greatly reduce the CSS needed to create themes.
The ESF according to Gutenberg
The ESF aims to provide a single interface for adding global elements and page elements. This will pave the way for creating entire websites using only Gutenberg blocks. In anticipation of this change, the Gutenberg developers have been busy creating a library of site building blocks, including site title, article title, comments, and article content.
When it launched in 2017, Gutenberg received a mixed reception from the WordPress community. Despite that rocky start, the block editor has since proven to have significant advantages over the classic editor.
As the next step in the block-based WordPress journey, the ESF could offer even more benefits. First of all, it promises to offer more flexibility in how you design and build layouts. For example, you can use the Full-Site Editor to define the title of your website. You can then replace this title with specific pages if necessary.
The ESF can also simplify the design and creation of your WordPress website. With this editor, you can make global and specific changes to a page from the same interface. This means that you only have to learn how to use one working interface. In addition, you won’t waste time navigating between the Customizer and the WordPress editor.
The starting point of Project Gutenberg is to provide a more seamless administration experience. To manage a WordPress site, it was previously necessary to learn many different concepts: “classic” editor, shortcodes, widgets, custom fields, menu manager… Project Gutenberg aims to offer a unified experience, because it is based on the principle of the block, an editorial unit from which you can manage the whole site.
Do you remember the four phases of Gutenberg?
- Easier editing: already in the core, refinement is underway.
- Customization: full site editing, compositions, block directory, block-based themes.
- Collaboration: more co-authoring of Google documents;
- Multilingualism: Implementation of the core for multilingual sites.
After almost 3 years, it is likely that Gutenberg has gradually completed Phase 2 by releasing the most important feature: Full Site Editing in WordPress 5.8 on July 20, 2021. In fact, it was first introduced in early 2020 via an experimental program where you had to download the Gutenberg plugin.
So I made the 5.8 update so we could explore the ESF together. I can now tell you that it is not complete in terms of features. More are coming, but for now let’s see the common ESF concepts that we find.
Common aspects of Full Site Editing (FSE)
Blocks
Blocks are no longer considered strange since the early days of Gutenberg. They can be composed of paragraphs, images, videos, audios, … in an article. You can move them by drag and drop and arrange them in order or columns, or even in groups.
Now blocks have more useful features in FSE. You can use them to create global elements such as site logo, slogan, header, footer, menu, sidebar, etc. Blocks are no longer just part of the content but gradually become primary sections to build a complete WordPress site.
Whether it’s blocks for content or for website creation, they allow you to create both static and dynamic content. For dynamic content, the block will display content for different users or positions, … according to the rules you define.
Compositions and reusable blocks
Compositions combine different blocks into a complete layout. This means that all these blocks have been created, arranged, formatted, configured, … and then combined into a defined and refined sample that can be used immediately.
You can save your compositions for later reuse on articles and pages. So you can create complex sections of content for articles or pages in a few clicks. It’s really simple and a great time saver.
When you insert a composition, you can change its content or settings without affecting other sections previously created from that template.
Reusable blocks are almost similar to compositions. Users can create a block with predefined content and parameters and then save it for reuse. These blocks are called reusable blocks. However, for this type of block, once you modify it from a page, it will cause all those blocks to be modified on the website. This method is slightly different from the composition method.
It is recommended that you combine block templates and reusable blocks for the most convenient and optimal use, and not just use one or the other.
Manage and customize your blocks
At the top right of the page you will find the options that will allow you to access the different views, editors, installed extensions and various tools available. As you will see with the ESF everything is centralized to save you time and manage your block creations from the same interface.
For example, you can change the code of your blocks directly via the HTML editor.
The block manager allows you to manage the list of available blocks (grid, container, etc.)
You can view the keyboard shortcuts and set your preferences as well.
User-defined templates
Users can create their own templates from the site editor through FSE. By doing so, you can see the changes live on the website. This way, you don’t have to create a child theme, touch the code, or hire a developer as was previously possible.
In particular, these user-defined templates will be stored in the database as a custom template type named wp_template. Thus, they can be exported and imported into another website for reuse. It is convenient to use the same templates if you have several websites.
Main styles
The main styles have been integrated into the Site Editor (see below for more information). You can change the look of the site by editing each element of the entire site in Global Styles, such as color, size, typeface, background, etc., or choose the style by block type without accessing each page or the Customizer.
This is why the Customizer is planned to be removed in the future as the main styles can replace it.
All new block-based WordPress themes
This FSE feature is coupled with a brand new WordPress theme system that is also built with it. Called “Block-Based WordPress Themes”, this new theme system radically excludes the use of PHP. These themes will have a new structure and rely more on simple HTML code.
We can say that overall :
- Block-based themes will be lightweight and contain fewer files than current WordPress themes.
- There will be no customization options as they will use “Global Styling” and other Gutenberg features.
- No custom (bloated) header, footer or blog archive layout builders, as this will be done via ESF.
- Minimal theme locking. This means that you will be able to change themes more easily than today, as you will not depend on themes for header, footer, etc.
The admin dashboard
Progress already visible in this direction that Gutenberg lets replace :
- Theme customization: Replaced by Gutenberg global styles and other features.
- Menu creation: There is a navigation that, combined with FSE, will allow you to create menus for your website.
- Widget area : Widgets are already in the transition phase; they are replaced by blocks. Also, the sidebar would be a part of the template that you will create using blocks with the ESF.
There are still various admin settings pages that are not yet affected. However, I assume that all of these admin pages would be replaced with settings based on Gutenberg components and that it will eventually be easier to switch from a single admin interface without a page refresh. So they will use the same code base/components as Gutenberg; you will see a similar interface overall.
How do I use the ESF now?
Be aware that although WordPress 5.8 has FSE, it has not yet included all of the existing features of FSE. You need to use the beta version if you want to learn more.
The beta version is offered through the FSE Outreach program. You can sign up for it to get an update and first experience with the new versions. To test FSE, you will need the following items:
- Prefer local installation
- WordPress : versions from 5.7.1 ;
- A block theme (type twenty twenty one);
- The Gutenberg plugin, versions from 10.5 ;
To strengthen your use of ESF and blocks, you can also get additional plugins such as GenerateBlocks, a lightweight block collection add-on.
Conclusion
By launching ESF, it seems that WordPress tends to cater to a larger group of users who may not know how to code. WordPress is gradually simplifying the process of creating websites with simple drag-and-drop operations and without touching the code, so that anyone can use it.
There used to be a number of barriers to customization, whether it was small changes to separate blocks or to the site. Now, ESF helps WordPress users create layouts in a much more flexible and convenient way.
For web designers, this will likely be a significant competitive advantage of WordPress over other platforms on the market such as Wix, Weebly or Squarespace.
What about designers and agencies? They will have more time to create designs with a better UI/UX, more original, more in line with clients’ requirements.
For those who create themes or plugins, ESF might be a bit of a pain. It solves most of the tasks done by theme developers. Meanwhile, plugins can also change to be compatible. We’ll have more time to learn, adapt and gradually change products. So stay tuned, keep updating information and reading FSE related documents.
