What is the Full Site Editing (FSE) project? What are its goals and benefits? Is there an alternative for developers who are opposed to the Gutenberg block editor?
Initiated by the development of the Gutenberg editor, WordPress' Full Site Editing (FSE) project is the new "native site management experience". It allows you to modify and customize the entire interface of a site from blocks of editorial content.
What is FSE (Full Site Editing)?
Every WordPress website consists of core elements and page elements. FSE 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 pages or entire 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 lets you 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 config file for developers, you can use the new config file with both classic themes and theme blocks. With the theme.json file, you can set block defaults, content width, fonts, and colors, and significantly reduce the CSS needed to create themes.
The ESF according to Gutenberg
The FSE aims to provide a single interface for adding global elements and page elements. This will pave the way for building entire websites using only Gutenberg blocks. In anticipation of this change, Gutenberg developers have been busy creating a library of site building blocks, including site title, post title, comments, and post content.
When it launched in 2017, Gutenberg received a mixed reception from the WordPress community. Despite this rocky start, the block editor has since proven to have significant advantages over the classic editor.
Gutenberg's Phases
- Easier editing: already in the core, refinement is underway.
- Customization: full site editing, compositions, block directory, block-based themes.
- Collaboration: No more co-authoring of Google Docs;
- Multilingualism: Core implementation 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 through an experiment program where one had to download the Gutenberg plugin.
Common Aspects of Full Site Editing (FSE)
Blocks
Blocks are no longer considered strange since the beginning 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 in 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, tagline, header, footer, menu, sidebar, etc. Blocks are no longer just part of the content but are gradually becoming 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 the content corresponding to different users or different positions, ... according to the rules you have defined.
Reusable compositions and blocks
Compositions group 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 to reuse them later on posts and pages. So you can create complex sections of content for posts or pages in just a few clicks. It's really simple and a huge time saver.
When you insert a composition, you can change its content or settings without affecting other sections previously created from this template.
Reusable blocks
Reusable blocks are almost similar to compositions. Users can create a block with predefined content and settings and then save it to reuse it. These blocks are called reusable blocks. However, for this type of block, once you edit it from a page, it will cause all those blocks on the website to change. This method is slightly different from compositions.
It is recommended to combine block templates and reusable blocks for more convenient and optimal use, and not to use only 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. With the FSE, everything is centralized to save you time and manage your block creations from a single interface.
For example, you can edit the code of your blocks via the HTML editor directly. The block manager allows you to manage the list of available blocks (grid, container, etc.). You can view keyboard shortcuts and set your preferences as well.
User-defined templates
Users can create their own templates from the site editor using FSE. By doing so, you can see the changes live on the website. This way, you won’t need to create a child theme, touch the code, or hire a developer like you used to.
In particular, these user-defined templates will be saved 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 multiple websites.
Main styles
The main styles have been integrated into the Site Editor (see below for more information). You can change the appearance of the site by editing each element of the entire site in Global Styles, such as color, size, font, background, etc., or choose the style by block type without going to 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.
Overall, we can say that:
- 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 the FSE.
- Minimal theme lock-in. This means you will be able to change themes more easily than today, as you will not be dependent on themes for header, footer, etc.
The admin dashboard
Progress already visible in this direction that Gutenberg is replacing:
- 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 the menus of your website.
- Widget Area: Widgets are already in transition; they are being replaced by blocks. Similarly, the sidebar would be a part of the template you will create using blocks with FSE.
There are still various admin settings pages that are not yet affected. However, I assume that all of these admin pages would be replaced by Gutenberg component-based settings and that it will eventually be easier to switch from a single admin interface without page refreshes. So, they will use the same code base/components as Gutenberg; you will see a similar interface overall.
How to use the ESF currently?
Please note that although WordPress 5.8 introduced FSE, not all of its features are complete yet. To fully explore FSE, you can use the beta version offered by the FSE Outreach program. You can sign up for an update and a first experience of the new versions. To test FSE, you will need:
- Favor local installation
- WordPress: versions from 5.7.1
- A block theme (type twenty twenty one)
- The Gutenberg plugin, versions from 10.5
To enhance your use of FSE and blocks, you can also equip yourself with additional plugins such as GenerateBlocks.
Conclusion
By launching the FSE, it seems that WordPress is reaching out 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 no need to touch the code, so that everyone can use it.
There were a number of obstacles to customization, whether it was small changes to individual blocks or the entire site. Now, FSE helps WordPress users create layouts in a much more flexible and convenient way.
For website builders, 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 better UI/UX, more original, more in line with customer requirements.
For those who create themes or plugins, FSE may be a bit of a drag. It solves most of the tasks that theme developers do. During this time, plugins may also change to be compatible. We will have more time to learn, adapt and gradually change the products. So stay tuned, keep updating the information and reading the FSE related documents.