Last Updated on June 27, 2022
Full Site Editing has officially been released, ushering in a major upgrade to WordPress. With FSE in full swing, it brings in a lot of new features and functionalities. Get up to speed on what it is and how it changes the way you use WordPress.
What is Full Site Editing (FSE)?
Full Site Editing (FSE) is the ability to edit all elements of a WordPress website using Gutenberg blocks–aside from the usual page or post content, you may now use blocks to customize headers, footers, sidebars, and other elements.
In the old way of doing things, the looks of your website was completely dependent on what settings and styles were made available to you by the WordPress theme you have currently installed. If you wanted to change your website’s top menu area, and there weren’t any settings to change that, you’re out of luck.
Soon, “mega” themes came into the picture and contained tons of functionality and settings for people to fully customize the looks of their website, some even provided their own header builders and footer builders.
With Full Site Editing, you will now be able to edit any header, footer or even archive templates in any WordPress Theme that supports FSE.
What does full site editing bring to the table?
FSE sounds like a huge step since the first release of Gutenberg, which may lead us to wonder what changes come with it. Let us now look further into the features of FSE and how it changes the way we design with the block editor.
Block Themes
Full Site Editing is only available if you are using a Block Theme. A block theme is a WordPress theme with templates made up of blocks.
The new WordPress Theme named Twenty Twenty Two is a Block Theme. You can use that if you want to use FSE.
Before, we would go to different areas of the WordPress dashboard to edit certain parts of a website, like the Theme Customizer to design an activated theme, or the Widgets editor to add blocks to a section (i.e. header, footer, sidebar).
Now, with Block Themes, we could do all of these in one designated area called the Site Editor. The Site Editor is where we can edit themes using new features like the all-new Styles interface, and Template editing, which we will tackle more in a bit.
Although the selection is not yet that extensive as of the time of this writing, you may browse the Theme Directory to find themes that are compatible with full site editing. To look for a block theme, first you would need to log into your website’s dashboard:
- Go to the Themes page
- Click Add New on the top left area of the page
- Click Feature filter
- Select Full Site Editing in the Features column and click the Apply Filters button.
- All the themes that appear should be compatible with FSE
You will see Twenty Twenty-Two is automatically installed to your website if your WordPress website is up to date. After browsing and finding a theme that you’d like to use, just click Install and Activate to implement it to your website!
The New Site Editor
The Site Editor is where you could modify templates, set global styles, edit navigation menus, and more. You will be able to access this once you’ve activated a block theme.
To open the Site Editor, click on Appearance > Editor (beta). At first glance, the Site Editor appears just like how the block editor interface would. However, there are some key elements that differentiate the two.
First, the WordPress logo opens the Navigation panel on the left, where you will see the three sections of the Site Editor: Site, Template, and Template Parts.
Second, the Styles sidebar, where you can access the sets of controls that change your theme’s colors, typography, and structure.
New Site-wide Blocks
Since the first release of Gutenberg, we’ve known blocks as content that we add to pages or posts. Blocks range from images, text, videos, buttons, and more.
Full Site Editing gives us new blocks that we can use across all areas of a website, such as the header or footer.
We get twelve new blocks that gives us more possibilities in designing your website:
- Navigation
- Site Logo
- Site Title
- Site Tagline
- Post Author
- Post Categories
- Post Tags
- Next Post
- Previous Post
- Post Comments
- Term Description
- Archive Title
These could be found under the Theme category in the Inserter, the button with the plus icon in the editor:
Page Templates
Block templates come with block themes. They are full-page layouts, containing the header, footer, and content section. Templates are dependent on the theme you’re using so we highly encourage testing and experimenting with the themes that are available in the theme directory!
If you would like to edit an existing template, click on the template name to open it in the Site Editor. Design it however you like with blocks and click Save once you’re done.
Custom Page Templates
You could also create your own template by opening a new page or post and in the Post/Page tab of the Settings console, look for the Template: Page or Template: Single Post panel, depending on what post type you have opened. Click New below the dropdown menu, name your custom template, click Create and you will be directed to the Template Editor.
You will be able to add and design blocks the same way you would on a regular page or post in the Template Editor. Templates are saved as custom post types, called “wp_template” and once you’ve published your custom template, you should be able to see it in the Templates section of the site editor.
If you want to use this new template, you could use it by opening a new post or page. In the Page/Post tab of the Settings sidebar on the right, look for the Templates panel, and from the drop down, select your newly created template!
Add your page or post content in the editor, and when you’re finished editing, click Publish. Preview your page and it should inherit the template that you’ve selected.
Global Styles Interface
The Styles interface may be found in the site editor. This will allow you to quickly change all of the elements of your site–including typography, colors, and layout. The new Styles interface allows you to customize your blocks and site sections right within the site editor.
Through the Styles interface, you have the freedom to customize the typography, colors, and layout for entire pages, posts, and even individual native Gutenberg blocks.
This makes it very easy and convenient to personalize websites for all types of users! The Styles interface gives us a more straightforward and flexible way to make design changes across whole websites without having to go through each block, or changing themes.
Stackable and FSE Compatibility
We wanted to get on top of things and make sure that once FSE is released, you could already enjoy using Stackable with it. Along with other new features and bug fixes, our latest release (V3.1.2) includes compatibility with full site editing.
You can enjoy using Stackable blocks to edit your website and even create your own templates. If you’re a premium Stackable user, you may use premium features to elevate your site design such as dynamic content, website animations, and more!
As an example on how to use Stackable’s dynamic content feature in FSE, here’s we used our Card block and dynamic content to create an ‘Our Latest Posts’ section in the Author template.
Recap
Full Site Editing opens up a lot of new possibilities for DIYers and professional web designers alike! Considering all the new features that come with FSE, users now have a greater level of control and flexibility because design is no longer limited by themes.
In addition to that, FSE provides more efficiency–ultimately lessening the time needed to build websites from scratch, thanks to the new block patterns and theme templates.
There is no doubt that this move to full site editing is a big change. It is both a big step forward and a stepping stone to more opportunities. With the direction that WordPress core is going, we feel it is going to completely transform how users will be designing and using WordPress as a CMS.
Have you tried experimenting with full site editing? What are your initial thoughts? Let us know in the comments below 🥳
Buongiorno vorrei sapere come posso far visualizzare la nuova funzionalità dell’editor beta perché ho installato una versione su un sito di terzo livello e su una sottodirectory del mio sito principale ma non si vede quando inserisco le istruzioni per il redirect da http ad https in htaccess. Lo vedo solo quando lascio il sito in http. Come posso fare?
Translation from Google: Hello I would like to know how I can show the new functionality of the beta editor because I have installed a version on a third level site and on a subdirectory of my main site but it is not seen when I insert the instructions for the redirect from http to https in htaccess . I only see it when I leave the site in http. How can I do?
By “beta editor” do you mean the Full Site Editor? If so, FSE is only available for Block Themes. Regarding http and https problems, Kinsta has a great resource about it here https://kinsta.com/knowledgebase/redirect-http-to-https/
Translation from Google: Per “editor beta” intendi l’editor completo del sito? In tal caso, FSE è disponibile solo per i temi a blocchi. Per quanto riguarda i problemi http e https, Kinsta ha una grande risorsa al riguardo qui https://kinsta.com/knowledgebase/redirect-http-to-https/