Full Site Editing (FSE) and Block-based Themes

This make.wordpress.org page describes “Full Site Editing is a major part of Phase 2 of Gutenberg” and is one of the main focuses for WordPress core development in 2021.

If the 2020 State of the Word address was any indication, WordPress is moving full steam ahead to land full site editing in 2021.

WP Tavern

FSE tests users are cautioned that ‘the current state of full site editing is rough. It’s hard to tell a feature from a bug at times’. With limited documentations, it’s advised to test in local development environment only.

Any Documentation?

Because FSE is currently in developmental phase, there are not many documented resources. It’s suggested to test the FSE features in a local development environment with the Gutenberg plugin installed and activated. In an announcement thread, Eileen Violini suggests to practice & gain hand-on-experience one can refer to Block-based Theme documentation in the Developer’s Handbook as well as personal blogs and the weekly Block-based Gutenberg + Themes Roundup.

In a FSE testing call post, annezazu outlines the following testing environments, step instructions and testing instructions:

Testing Environment
Set Up Instructions
  • Have a test site using WordPress 5.6. It’s important this is not a production/live site. 
  • Install the TT1 Blocks Theme (formerly called Twenty Twenty-One Block Based Theme) by following these instructions and activate it under Appearances > Themes. 
  • Go to the website’s admin.
  • Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 9.6.
  • You should now see a navigation item titled “Site Editor (beta)”. If you don’t see that in your sidebar, you aren’t properly using the Site Editing experiment. 
Testing Instructions
  • Create a new post by going to Posts > Add New.
  • Add in a post title and brief content before hitting “Save Draft” or “Publish”. Either way, saving of some sort needs to happen.
  • While in the editor for the post, navigate to the Post Tab of the Settings Sidebar (previously called Document). Under “Status & visibility,” you should see “Template” with the template name and the option to edit. 
  • Click on “edit” to move into template editing mode. You should see a notice indicating you’ve switched to editing the template. 
  • Make a few changes to the template wherever you like. For example, you can try out the “Site Title,” “Site Logo,” Site Tagline,” and “Navigation” blocks or changing font sizes and color settings for different blocks. Here’s a screenshot of a simple header for inspiration. 
  • When you’re done making the changes you want, select “Apply” and go through the saving flow by selecting “Save”. This will return you to editing the post itself. 
  • Once saved, try editing the post once more before following steps 7 & 8 to edit the template specifically. 
  • Make changes to the template. This might mean making minor editorial changes to the content or adding in new blocks.
  • When you’re done making the changes you want, select “Apply” and go through the saving flow this time opting to not save the template changes. This is a way to test the saving functionality. 
  • Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

Following the above guides, I plan to start exploring Block Experimental themes and with an aim to understand the structures of block-based and customizing or creating new block-based themes.

Related Posts Links