In this article, I list my recommendations of what you need to consider before switching your website to full site editing. These are lessons learned from the first months after WordPress 5.9 up to the current version, 6.3. I write about what precautions and steps you should take and how to set up your full site editing theme after the installation. I also list popular plugins that work with full site editing.
Estimated reading time: 15 minutes
How to decide if you should switch to full site editing
In the previous lesson, I wrote about some of the benefits of full site editing. Full site editing is suitable for websites where you want more control of the details and where you want to be able to customize templates. I also strongly recommend FSE for smaller business websites and one-page websites.
If you love tinkering with different ideas, designs, and colors, then yes! Playing with all the new toys is an excellent reason for switching to full site editing! 😉
How long it takes to switch and set up your new theme depends on the complexity of the site. Before changing your website to full site editing, test to ensure your plugins will continue to work. Whether the plugins will work is a big, if not the biggest, deciding factor.
Test your plugins and write a list of the features and functionality you need your website to have. Perhaps some of your plugins can already be replaced by WordPress blocks.
When not to switch
– Do not switch to full site editing only because you feel pressured to make the move. Your current website will not break if you want to keep it as is. Only make the switch when you feel comfortable doing so!
What you need to do before switching to full site editing
Always, always backup your website
Back up your website before making a significant update. Read the backup support article on wordpress.org.
Test if your plugins work with full site editing
Not all plugins support full site editing yet. Plugin developers may need more time for updates.
Identifying what type of plugin will work with full site editing without testing can be challenging, even for technical and advanced users.
Because some plugins can temporarily break your website if you enable a block theme, I do not recommend testing your plugins on your live website.
I have tested many of the popular free plugins in the WordPress.org plugin directory with the theme Twenty Twenty-Two so that you don’t have to. Keep reading, and you will find the list below.
You can also check the plugin documentation and support forums for announcements about full site editing support.
Checking for problems caused by plugins
- First, create a staging site or copy your WordPress site to a test installation.
- Next, activate a full site editing theme like Twenty Twenty-Two or Twenty Twenty-Three.
- Activate the plugin.
- Test the plugin with the block editor:
- If the plugin uses blocks or shortcodes, create a new post and add them to the post.
- Test plugin options and meta boxes.
- Check that the plugin displays correctly in the editor and on the front of your site.
- Go to Appearance > Editor and test that the plugin blocks, shortcodes, and options work in the Site Editor.
Look for block error notifications, check that content displays correctly, and ensure that the editor doesn’t crash!
During my testing, I found a plugin that almost worked. -It didn’t cause any errors, but one of the plugin images was huge and covered the entire editor. And if you are like me, you don’t want to work with that plugin because it will make editing a page in the Site Editor more difficult.
Plugin types that will not work with full site editing
- Plugins that work by using widgets will not work because block themes use blocks instead of widgets. Look for block alternatives and support plugin authors so that they can update the plugin.
- Block themes use the navigation block instead of the old menu system and menu screen; therefore, plugins for managing classic menus may not work.
- Plugins that use classic templates may not work with full site editing.
- Plugins for managing comment forms or comments, but don’t consider the new comment blocks.
- Some plugins that are built to use the Customizer may not work, including plugins with settings for:
- Header and footer builders
- Header images
- Loading custom scripts
The list also includes plugins that translate themes with PHP strings. These plugins, such as Loco Translate, can only translate parts of a theme because block templates do not use PHP.
Since this article was published, Polylang has released a new version, and they have written about partial support for full site editing on their blog.
Why shortcodes are exceptions
Plugins that use shortcodes should keep working as before. With full site editing, you place shortcodes inside a shortcode block:
No other change should be needed for the shortcode to work. The exceptions are media shortcodes like video, audio, and galleries that you can convert into more advanced blocks.
An example plugin that does not work with its default features but works with its custom shortcodes is the Max Mega Menu plugin.
Popular plugins that do not work with full site editing (March 2022).
A few plugins stood out among the plugins that I tested with Twenty Twenty-Two and the Site Editor.
I will give a “Gold star” mention of The Events Calendar, which does not work with FSE but clearly announced that it does not support full site editing yet, and linked to a support page. The Events Calendar was the only plugin that recognized that I had activated a block theme and gave me any information.
- BBPress uses classic templates and does not display the forum or topics on the front. Instead, it shows blank pages.
- Disable Comments does not disable comments if the comments block is used in a block template, post, or page.
- WP-PageNavi Does not work with the different post navigation and query pagination blocks. It doesn’t break, but it also doesn’t do anything useful because the settings do not work.
Popular plugins that work with full site editing
Now let’s look at a few plugins that work with full site editing:
Yoast SEO, Elementor, and Advanced Custom Fields, both free and pro versions.
Contact Form 7, Ninja Forms, the Classic Editor, All in one SEO, JetPack, WP Maintenance Mode & Coming Soon, Custom Post Type UI, WP Google Maps, AddToAny, Popup Maker, and MetaSlider.
— Yes, I just wrote that the classic editor works with full site editing.
With the classic editor plugin enabled you can use the classic editor to create your content and use blocks to create other parts of your website, like the site header and site footer.
WooCommerce also works with full site editing themes. But be aware that when you switch themes, you lose customizations and custom templates included in your previous theme. Some interfaces and parts of the store may switch to using the WooCommerce default styles. You can not customize all WooCommerce block templates in the Site Editor. This is a large topic, and I will cover how to customize your store with WooCommerce, WooCommerce blocks, and a full site editing theme in a later lesson.
Prepare your website for full site editing
Besides testing your plugins, I recommend three more steps before you change your current WordPress theme —converting your content to blocks and creating backups of any content you might have in widgets and the Customizer.
Convert your content to blocks
Block themes, as a rule, only style blocks. If your website has content created with the classic editor, you need to convert the content to blocks. Otherwise, your content and images, and other media may look broken.
Converting content to blocks can be time-consuming. Plugins can help you update your content:
Copy your widget content
Block themes do not use widgets. After installing a full site editing theme, you will not have easy access to your widget functionality or widget content such as texts, HTML widgets, or galleries. Copy your content before switching. Here are my tips for converting widgets:
- Take screenshots of the layout of your website so that you remember where you used to position your widgets. It will help you recreate the design using blocks.
- Copy and save your widget text content in a text file. You can copy the text and add it to a paragraph block or heading block later.
For converting widget functionality to blocks, you may need to search the plugin directory for replacement blocks. But a lot of functionality just works: You can replace the latest posts widget with the latest posts block, the latest comments widget with the latest comments block, etc. Instead of an HTML widget with a Google Map code, you can use an HTML block: just copy-paste the same code into the block. You can even add a login form to your template using the login/logout block.
Copy content from the Customizer
If your current theme has text fields or text areas in the Customizer, for example, for adding content to the homepage, then those fields are tied to your theme, and you will lose them when you switch themes. Like the widgets, I recommend taking screenshots and copying the text content to a text file.
If you have added CSS to the Additional CSS field in the Customizer, then this is probably connected to styling your current theme. If you keep the styles, they may override and change the styling of your new theme in unexpected ways. That is why I recommend backing up and deleting the CSS before switching to a full site editing theme.
Optional -Install the Gutenberg plugin
If you are using WordPress 5.9 or newer, you are not required to install Gutenberg to use the basic full site editing features. But I recommend installing Gutenberg because the plugin has more FSE features than WordPress. Many of these features will eventually be added to WordPress, and until then, you can test them with the plugin.
First, in the WordPress admin area, select the Plugins menu.
If you already have Gutenberg installed, ensure it is the latest version and there are no pending updates.
If not, click Add New. Select Gutenberg in the plugin directory, Install and Activate.
Selecting a full site editing theme
The WordPress.org theme directory has just over 50 free block themes to choose from. You can go to Appearance > Themes, Add New, and open the feature filter from the WordPress admin area. Select the checkbox for “Full Site Editing” in the feature filter.
Next, select “Apply filters”
When previewing block themes, I recommend you to look past things like colors since you can easily replace colors in full site editing. Do not miss out on the perfect theme for you, only because it is beige instead of blue!
After installation, activate your new theme.
Setting up your full site editing theme
Update the permalink structure
Before you set up the theme, there is one more setting you need to look after.
You need to set the permalink structure to Post name for the website’s 404 (Not found) page to work.
Open the Settings menu in your WordPress admin area and select Permalink Settings.
Under Common Settings, you will find a list of radio boxes. Select the Post name option and save your changes:
An important step in setting up your full site editing website is adding one or more menus using a navigation block.
I don’t want to sugarcoat this: It can be tricky to find and work with the navigation block the first time. — The more you use the block and the Site Editor, the easier it gets.
In classic WordPress themes, you manage menus in the Menus screen under Appearance.
In this example, the site owner has created two menus. One called Main Menu, and one called Footer:
However, in block themes, you manage navigation blocks in the Site Editor instead of in the Menus screen.
Step 1, open the Site Editor:
Go to Appearance > Editor.
Step 2, locate and select the navigation block.
Most themes come with one or more navigation blocks already placed in the design. In Twenty Twenty-Two, there is a navigation block placed in the top right of the default header:
Step 3, Assign an existing menu to the navigation block.
WordPress saves all your menus when you switch from a classic theme to a block theme. You do not lose your menu when you switch themes. But you need to select the existing menu in the navigation block and save the setting before it displays correctly.
In the block toolbar, you can find an option that says Select Menu. When you select this option, there is a dropdown with one panel for menus and one for classic menus. Here you can find the same “Main Menu” and “Footer” menus that were visible on the Menus screen.
To restore the Main Menu to the website’s header, you would select Main Menu and then save your changes.
You are not limited to selecting an existing menu. You can, of course, create a new menu if you like.
A heads up about the tools panel: At the bottom of the “Select Menu” dropdown, there is a link that says “Manage menus”.
It is easy to think that this link leads to a page where you can add and remove blocks and links from a menu. But the only thing you can do in the manage menus screen is delete and rename saved menus.
Re-adding content from widget areas
In this scenario, I picture switching from a classic theme with three widgets in the site footer to a block theme without pre-made sections in the footer.
In the example, I am using the theme Twenty Twenty-Two.
-This is where the screenshots of your previous theme come in handy so that you do not forget to add important information like opening hours or contact information that you may have customized in your site footer.
Step 1, open the Site Editor:
Go to Appearance > Editor.
Step 2, locate and select the Footer template part.
Step 3, add a new section with a columns block.
To add a horizontal section with room for three items, add a new columns block with three columns (If you want four items, use four columns and so on).
You can position the columns block above or below existing footer content. You can also adjust the width and change the colors.
Step 4, add content to the new section.
In my example, I added the latest post block in the left-most column, the latest comments block in the middle and the search form block in the last column.
You can adjust the block settings and choose how many posts and comments to show and whether to display featured images, post author, date, content, or excerpt.
The design of my old website also showed headings or titles above the widgets. So in the new footer, I want to add heading blocks inside the first two columns, above the latest posts and latest comments block:
This lesson was a bit of a crash course where you received tips on preparing your website before switching to full site editing. Then you jumped headfirst into the new Site Editor and made changes to the header and footer of your website like a pro :).
I also want to let you know that there are changes coming to the navigation block that will improve the editing experience and make it easier to add and adjust the menu items.