Full Site Editing

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.5. 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.

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 the WordPress Site Editor or block editor yet. Plugin developers may need more time for updates. Identifying what type of plugin will work with full site editing can be challenging, even for advanced users.

I have tested many of the popular free plugins in the WordPress.org plugin directory with the theme Twenty Twenty-Four 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

1. First, create a staging site or copy your WordPress site to a test installation.
2. Next, activate a full site editing theme like Twenty Twenty-Four or Twenty Twenty-Three.
3. Activate the plugin.
4. Test the plugin with the block editor:
   1. If the plugin uses blocks or shortcodes, create a new post and add them to the post.
   2. Test plugin options and meta boxes.
   3. Check that the plugin displays correctly in the editor and on the front of your site.
5. 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 work, while others may not, including plugins with settings for:
  • Header and footer builders
  • Colors
  • Menus
  • Header images
  • Fonts
  • 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 (January 2024).

A few plugins stood out among the plugins that I tested with Twenty Twenty-Four and the Site Editor.

• When I originally wrote this article in 2022, I mentioned that The Events Calendar does not work with FSE. Now two years later, the plugin still does not support block themes, and there is no new information about future support.
• Breadcrumb NavXT No longer causes JavaScript errors that crash the block editor or the Site Editor. There are JavaScript warnings, but they do not seem to be breaking. The reason why this plugin is still on my “not working” list, is that the bread crumb block has no settings in the editors and does not load. It is stuck on displaying a text that says “Loading”. The block does show on the front of the website. But since there are no settings for the individual blocks, this is not very useful and I would expect more.
• Nextgen Gallery has sadly become worse than when I tested it in 2022 and 2023. This is disappointing, but there are multiple JavaScript errors in the block editor, multiple style conflicts in their interface which makes it unpleasant to use, and the galleries do not show in the editor. The gallery only shows on the front of the website, which means that you can not create and preview designs in the editor. The block has no settings, and does not work as well as the default gallery block that is built into WordPress. Two years after my initial test, this plugin still breaks the Site Editor.
• Smash Balloon Social Photo Feed causes JavaScript warnings in the Site Editor, and remains on my list of plugins to avoid.
• BBPress uses classic templates and does not display the forum or topics on the front. Instead, it shows blank pages. The plugin has not been updated in two years.
• Disable Comments does not disable comments if the comments block is used in a block template, post, or page. I recommend the plugin called “Disable comments -remove comments and stop spam” instead.
• 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 (January 2024).

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, Rankmath, 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 customize some but not all WooCommerce templates in the Site Editor.

New on this list in 2024:

Page Builder by SiteOrigin continues to use the classic editor for assembling their pages. It no longer crashes the Site Editor, which is an improvement from 2022. This means that you can now use the plugin with a block theme; just be aware that the custom pages do not use blocks, and there may be CSS and styling conflicts.

Disable comments -remove comments and stop spam -I tested this plugin as an alternative to the older “Disable comments” plugin. The naming can be a bit confusing, but you should be able to find this plugin in the plugin directory. This plugin by WPDeveloper now has more installs than “Disable comments”. With this plugin, the comment block is visible in the editor, but not on the front.

WPForms Lite -The plugin now works in both the block editor and Site Editor. The blocks has helpful styling options in the block settings sidebar. The block still causes multiple JavaScript warnings, but they do not seem to be breaking.

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:

Convert to Blocks

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.

Selecting a full site editing theme

The WordPress.org theme directory has many block themes to choose from and more are added every month. 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

Check & update the permalink structure

If your site’s permalink structure is set to Plain, the 404 (Not found) page does not work. Here is how you can check your permalinks:
Open the Settings menu in your WordPress admin area and select Permalink Settings. Under Common Settings, you will find a list of radio boxes.

• If the Plain option is checked, you need to change it to any of the other options.
• If it is not checked, then you don’t need to change it.

In this screenshot I have selected Post name for the permalink structure:

You can learn more about permalinks in SEO for beginners: What is a permalink? By Yoast.

Adding menus

An important step in setting up your full site editing site 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 navigation 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. The Main Menu is selected, and it is assigned to a display location which is called “Desktop Horisontal Menu”:

In block themes, you manage your menus directly in the editor, and the Menus screen shown above is removed.

In block themes, the menu is the list of links and blocks, and the navigation block is the display location:

• The menu decides what blocks to show.
• The navigation block decides where and how to show the menu.

Just like a menu in the classic screen above can be assigned to more than one display location, a menu can be used in more than one navigation block.

First, open the Site Editor by going to Appearance > Editor.
Next, Select “Navigation” in the menu.

Most themes come with one or more navigation blocks already placed in the design. In the theme Twenty Twenty-Four, there are navigation blocks in the header and footer.

In the sidebar you should see the name of the latest menu, for example “Header navigation”.
Below the menu name you can see a list of menu items. You can move and remove menu items, and you can also duplicate, rename, and delete the menu.
By clicking on the site preview, you can open the menu in the editor, where you have more options.

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. Click on the page (the canvas) to start editing.

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. You can also decide 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:

Conclusion

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 :).