Categories
Development WordPress

WordPress Full Site Editing: WordPress 5.9 & Block Themes

WordPress Full Site Editing is a set of new features that will come with update 5.9. These features are set to take WordPress website editing and theme customization to another level by converting (nearly) EVERYTHING into an editable block, including headers and footers.

This article will tell you everything you need to know about what the release of WordPress 5.9 “Joséphine” means for web development.

By the end of this piece, you’ll know:

  • What does WordPress Full Site Editing mean?
  • Why you should be even more excited about the future of WordPress Theme Development
  • What does this new update to WordPress 5.9 mean for your website?
  • How to troubleshoot editing difficulties with the new update
  • How to make the most out of the Josephine WordPress Update

Update History: Notable WordPress Releases

You’ve heard people call WordPress Full Site Editing the most exciting thing this side of the Gutenberg block editor. That’s a big claim – but it’s true that it’s the most anticipated update since the 2018 5.0 introduction of the block-based content editor. 

The change will affect people who choose to use the latest default WordPress theme on their site, as well as those who are eager to always try out the new evolutions to WordPress development.

This new update is the other half of the Gutenberg editor update, which was released with the WordPress 5.8 Version back in 2018.

The Gutenberg roadmap is WordPress’s attempt at reimagining website content management.

WordPress wanted to gradually launch this project in four phases, which include:

Phase 1: Easier Editing with the Block Editor

The first phase of the Gutenberg project was replacing the WordPress editor with blocks. This change allowed users to add dynamic components to your website using a simple block-based editor. It was an update that had backend WordPress users excited as it was more accessible to people who found it difficult to navigate complex page builders.

Over the past 4 years, we’ve seen a lot of changes come to the Gutenberg block editor, but this change was only the beginning of what the WP core developers have planned.

Phase 2: Full Site Customization

? We are now in this phase!

Building on the first phase, the second would allow your teams to edit your entire website using blocks.

It’s not just about editing your web pages (which you’ve been doing since version 5.0). It also means the ability to edit your global pages using modular blocks. Essentially, it simplified full WordPress website editing with the old classic editor with a more integrated editing experience.

This phase also includes developing a project library, themes that support blocks, and navigation blocks that recognize these themes. We’ll go into these features in more detail below.

Phase 3: Multi-author Collaboration

The third phase of the Gutenberg project aims to take collaboration to an entirely new level. 

Here, you’ll be able to share workflows with the development team and collaborate with other stakeholders, just as you would in Google Docs.

Phase 4: Multilingual Website Support

The fourth and final phase of this project is enabling multilingual access. With this, you’ll no longer have to rely on plugins such as the WordPress Multilingual Plugin to have your website in different languages.

Get A Free Quick Win For Your Website

Want to get more conversions on your website but not sure where to start? Give us a URL you want to improve and we’ll put together a few suggestions for how to optimize it, absolutely free!

What is “Joséphine?” (WordPress 5.9)

As with all WordPress updates, this update was named after a famous Jazz musician. Fun fact – all WordPress updates have this nod to a great name in Jazz music as the WordPress developers share a love of this music, and wanted to have a theme for when they create and label new versions.

For the 5.9 update, “Joséphine” was chosen to honor the global Jazz star Joséphine Baker. She was also a civil rights campaigner and used her platform to express her passion for freedom for all.

The update was actually scheduled to be released earlier in 2021 on December 14, however, there were bugs that needed to be resolved before it went public. This pushed back the release to January 25, 2022.

Some developers eagerly anticipated the release to finally get a hands-on the new functionalities and how that would change backend editing.

So finally, we have reached the moment where the WordPress 5.9 update has introduced Full Site Editing (FSE) into the web development community of WordPress. It’s a big deal. 

Note that not all features of the 5.9 update will be available for every user. It will require the site to be using a theme that supports FSE, like the default Twenty Twenty-Two Theme, which we will explore in much more detail.

Who Benefits from the WordPress 5.9 Updates?

Anyone who enjoys testing new features will appreciate what WordPress 5.9 has to bring. The people who find a lot of value from this update are users who aren’t as experienced at web development – those with little editing experience. 

The full site editing feature means that there are more ease, flexibility, and customization options that only expert web developers could have done for website owners, before. Now, people don’t need to know complex code but can explore interesting web design with a very simple user interface on the backend.

Many WordPress users who didn’t have technical experience used to be warned to stay far away from the Theme Editor (well, the bold novice editors would still do it, to varying degrees of success). 

In the past, users were nervous about damaging their site without the knowledge of backend theme editing. Now, the new era of WordPress theme development featuring the template editor allows a more accessible experience to edit without the fear.

“This release is a major milestone on the journey toward being able to manage all areas of your WordPress site using the same basic block concepts…publishing should belong to artists and creators just as much as it belongs to designers and developers.” 

– Josepha Haden Chomphosy, Executive Director at WordPress.

What is WordPress Full Site Editing?

WordPress Full Site Editing, which Joséphine offers us, (we’ll refer to it as FSE going forward), is a set of new WordPress features that allow you to build a website entirely using blocks.

WordPress released FSE with its 5.9 update, as well as other new features on January 25th, 2022. As with all new versions, it will continue to be improved upon and evolve in its features and use-cases with time. 

Some more of the notable new features developed for 5.9 that people are excited about include:

  • Block themes
  • Template editing
  • Global styles
  • Full site editing
  • Improved lazy loading
  • Twenty Twenty-Two theme
  • Other performance improvements.

Building Blocks of WordPress FSE You Should Expect Soon (pun intended)

This new update comes with many new features, evolved functionalities, as well as additions to the user experience of backend web development.

Understanding each feature of WordPress FSE is essential. This will go a long way in helping you see what it means for your website and audience at large.

Editing in WordPress will now be focused on blocks galore. This is the core of this new iteration of WordPress. The Full Site Editing building blocks are one of the biggest new features that totally change the user experience. 

Let’s dive into the wonderful world of WordPress blocks – there’s a lot to talk about.

1. Blocks

If you’ve been using any recent update of WordPress, then you’re familiar with Gutenberg blocks already.

For starters, blocks replaced the 17-year-old WordPress editor when WordPress 5.0 came out at the end of 2018.

Some users rejected the change, preferring to keep the old classic editor running on their site as it felt more familiar (there will always be people who just don’t like change) or because many of their plug-ins weren’t compatible with the new editor yet. 

These people chose to install the Classic Editor Plugin to keep things as they were. This was brought out by the WordPress core team to offer their users the option to stay with their preferred classic editor, regardless of whether they had already updated to 5.0 or later. 

However, since the 5.9 update, many people are starting to catch on to the benefits of using the full site editing function and embracing block editing. Before this version, you could already use blocks in the page section for images, paragraphs, videos, and audio that you could drag and drop anywhere.

In the FSE update, however, the blocks get more advanced. You will be able to achieve a lot more beyond your post content area.

You’re now able to use blocks to edit global elements such as your footer, sidebar, logo, tagline, and menu.

2. New Site-Wide Blocks

This feature allows you to access new blocks that you can use to edit throughout your website. You can find these blocks under the “theme category” in your WordPress dashboard.

And it gets better. WordPress has added ten other blocks with this update that you can use to customize your website further.

These include:

  • Archive Title
  • Term Description
  • Next Post
  • Previous Post
  • Navigation
  • Template Part
  • Footer
  • Header
  • Post Author
  • Post Comments

3. Block Patterns and Reusable Blocks

Block patterns are premade and ready-to-use layouts that you can make out of WordPress blocks.

You’re probably already familiar with Gutenberg blocks that came out in 5.0, which we’ve just covered. These are customizable pieces that you can add to a website.

Some of the most used blocks include social media blocks, audio blocks, as well as image blocks.

Block patterns were first introduced in WordPress 5.5, but now the new version enhances the patterns for blocks with a featured block pattern directory, a more simple way to search for and access patterns.

Developers of block patterns also have more incentive to create patterns as they will be directly uploaded into the WordPress dashboard. 

With block patterns, you get the added functionality of creating a pattern or layout of blocks. That’s not the best part yet.

You can then go ahead and save these blocks, reuse them at a future time, and even share them on other websites.

Additionally, you can also reuse your block patterns across the page and global parts of your website, such as on headers and footers.

The fullscreen pattern explorer is another bonus of the update. Giving users a fullscreen view enhances the user experience of growing for and inserting block patterns. 

4. Block Templates

The simplest way to define a block template is as a list of block items. These blocks can have predefined placeholder content, attributes, placeholder content and can be dynamic or static.

Like before the update, WordPress will use its template hierarchy to determine the template or set of templates it will use to display the page.

One change that comes with FSE and block templates is that you will no longer write templates using PHP.

To write templates in FSE, you will have to get familiar with writing templates using HTML.

The addition of block templates to WordPress themes comes with a few benefits for website editors.

You will be able to modify and save versions of existing templates as well as create new templates, which we’ll get to soon.

The Template Part Block of WordPress 5.9 is an advanced block that can be used with a theme that supports template editing.

Often, these come with the theme you’ve chosen and it’s used to display the whole structure of the website. These are used only while editing and creating templates. The template parts include a header template that contains the logo, site title, and navigation. It’s similarly used for the footer, which often has social links, site credits, a sitemap, contact, and more. There are also other template parts for elements like post content.

5. User-Defined Templates

Another addition that comes with FSE is user-defined templates. In fact, you should be excited about this feature because it gives you the freedom to create your own templates.

You can view any changes that you create on your website live. This also means less reliance on creating child themes and touch codes.

The templates you create will be saved on a database as a custom post type named wp_template.

From this database, you can then export and import your user-defined templates for use on another WordPress website.

You can edit and tweak elements of certain set templates in a way that you couldn’t do before. Before the update, traditionally, coders would have to control these edits to templates. Now, there is more freedom for users to style blocks, colors, and other display options. 

Authors who edited block themes should note that the directory names that contain template files have changed with the update. Template files are simply called ‘Templates’ and the template part files are called “part.”

6. Global Styles

Global styles is an FSE system that’s one of the other main big interfaces that WordPress built for the update. This feature enables you to have control over your website’s aesthetics beyond individual blocks and pages. 

They help you change the overall style of your site without having to edit your individual posts and pages.

With styles, you can do the following from one place:

  • Select a body background-color
  • Change the line-height of all your headings
  • Choose new site layouts, such as adding padding
  • Create a new button color-palette
  • Set a font family for all your topography, including links, buttons, and other text.

An exciting addition is that you will now use a theme.json file to create options for your global style. Theme.json is a configuration file that you can locate in the root directory of your theme and use to build presets.

What is the theme.json File?

The theme.json file was the standard way for theme developers to personalize styles and editor settings with the 5.8 WordPress version in 2021. 

In 5.9, WordPress expands on this with a graphic interface where users can customize style presets either at the block level or globally site-wide. The beauty of this is that they don’t have to write any code at all. 

Global Styles will affect many WordPress design aspects, including:

  • There is no more customizer interface – the only way to change site settings and styles with block themes is through Global Styles. 
  • Theme admin pages aren’t needed any longer. 
  • This new standard to configure theme settings is believed to help streamline theme development workflow.
  • There is a new sidebar in the site editor with a four-component panel that includes: typography, colors, layout, and blocks. New components will continue to be added as this version evolves. 

Theme developers have more granular control over the styles and backend options are for users on a site with the theme.json. It will allow users to set a different singular default to blocks, rather than having them all the same. 

For example, to have a unique default font size and remove options for different spacing for the Columns block, this theme.json file allows you to do that. 

What we get is a block editor that’s more aligned with the theme, as they can set parameters for how users are able to manipulate blocks. A bonus is that WordPress aggregates the settings in your theme.json file and creates the CSS output for you. 

What’s also handy is that in the global sidebar, there’s a preview panel, which allows you to see all changes that usually can’t be viewed in the site editor canvas.

The Twenty Twenty-Two New Theme

Twenty Twenty-One is so last year. As WordPress loves to do, with a new year came a new default WordPress theme – the aptly named Twenty Twenty-Two. This theme is intended to be used with the 5.9 update as it contains all features that are compatible with full site editing. 

Before you go straight ahead and change your theme, know that the live website will be strongly affected and it’s best to not switch themes for your live site without testing it and having a plan in place. I go into more detail below about how to update your site safely.

As part of the 5.9 update, the theme is installed automatically. All that’s needed is to activate it. Immediately, you’ll see that the ‘customizer’ option is removed. 

You’re effectively forced to use the new tools with this theme. That means that if you’re not yet sure that you want o update to the 5.9 full site editing, then wait until you’re clear on that before you activate it.

It’s the first default block-based theme that WordPress has published. Along with the pre-designed patterns and color palette collections, there are many ways to customize the theme to make it unique (without having to know complex coding). 

With this them, you can try out the new template editing workflow, new blocks that come with it, and other enhancements to the interface.

What Does This Update Bring to the Table (Your Website)

Full site editing, together with the other functionalities that come with its update, brings a lot of benefits to the developer and design workflow of your website.

This will come with many upsides, which include:

1. No More Moving Between Tabs

With this update, you won’t have to move back and forth between customizer, widget, as well as menu to make changes to your website anymore.

This update also gives you a better option in the name of a site editor. From this site editor, you’ll be able to make changes from those sections from a single point—cheers to that.

2. Less Reliance on Third-Party Plugins

It doesn’t take long before any WordPress developer has a list of plug-ins that can run forever. These plugins can range from valuable hacks and slight inconveniences to downright annoying necessities.

Well, with FSE, plugins will become one less thing to worry about, as it will include features you’d usually have to source from third-party developers.

3. More Granular Control Over Your Website

WordPress FSE, through its improved block control system, will also give you more control over smaller sections of your website.

The modular design that comes with blocks means that you’d have more precision in making changes.

For example, you could now edit your logo internally without necessarily changing the header menu.

4. Ease of Use

If anything, the new WordPress FSE will make website editing much easier for you and your team. 

Witty efficiencies are sprinkled throughout the update. Eventually, this will make editing less of a chore.

For example, look at the new navigation block in the site editor. You can use this thoughtful feature to create navigation menus in your articles or landing pages manually.

5. Faster loading times

The performance improvements of the 5.9 update are especially geared towards fixing lazy loading. With less CSS loaded by block themes, there is a faster page loading time. 

This is when the theme.json file is being used correctly so that there isn’t a huge amount of stylesheets with all of the CSS declarations that there used to be.

Benefits of WordPress 5.9 From a Developer’s Perspective

From a developer’s point of view, the following improvements are something to get excited about. There are even more performance enhancements (apparently 99 enhancements and 100 bug fixes!). 

  • Childthemes are supported by theme.json. 
  • New controls for changing block dimensions (the space occupied by the block – padding, margin, width, etc).
  • Ability to lock the attribute settings in a block with block.json, so the remainder of the pattern can be edited. 
  • More than one style sheet in a block can be registered, so when requested, the whole sheet doesn’t need to be loaded – only one style for the block can be loaded.
  • A new widgets block is available.
  • Flex layout extended to social links and group blocks.
  • List view improvements with collapsible sections, HTML anchors, and drag and drop. 
  • Better link UI to create pages from an inline link popup (within post editor).
  • Improvement to the beach block (background, button, and border colors).
  • Lazy loading improvements (faster load times to improve SEO).
  • More themes that are categorized for better theme browsing (block themes, universal themes, hybrid themes, classic themes). 
  • The gallery block images have the same functionalities as the core image blocks (dimension edits and duotone filters, for example). Style the images and customize individually. 
  • Improvements to the featured images (new dimensions panel and duotone filters). 

Making the Best of WordPress Full Site Editing

Like any other system, updates are often a bitter-sweet affair. You may find yourself juggling highs of excitement about the new features and lows of anxiety about change.

From experience, the best way to conquer the fear of the unknown is preparation; this update is no exception. You don’t want any backend changes to mess up frontend functionality.

Fortunately, getting on board the FSE train is a lot easier than you’ve imagined. You can start using FSE on your website in the following steps:

1. Prep Your Environment

Some of the features coming out in update 5.9 will be experimental and in their “beta” stage. For this reason, you should be wary of running them on your live website.

An excellent opinion will be creating a private testing environment with the FSE. You can do this by spinning a website on a service such as local by flywheel or developing a staging environment.

Proceed and install/activate the Gutenberg flywheel. If you have trouble activating this plugin, check again to ensure that you’re on the latest version of WordPress (preferably 5.7 and above).

Also, using PHP version 7.3 or higher goes a long way in making using FSE easier. Fortunately, it’s easy to check the version that you’re on.

Go to your dashboard, navigate to tools, then click on the site health tab. You can then wait for it to automatically run security as well as performance analysis and display your results.

2. Install a Theme That Supports WordPress FSE

Not all themes on WordPress support this new update. To use FSE, you’ll have to install a FSE theme that supports the modern block-based interface.

Fortunately, finding a theme isn’t that hard. Developers have had ample time to develop Gutenberg themes since its launch in 2018. The much anticipated “Twenty Twenty-Two Theme” that was described above is a good place to start.

Once you have a theme installed, a new option should pop up in your dashboard “Site Editor (beta).”

With this, you have everything you need to start editing your website with FSE. Simple as that!

3. Edit Your Website

With the FSE site editor, you can now edit page elements and global elements of your website using a click.

You can do this using the following steps:

  1. Select an item
  2. Wait for a floating toolbar that will appear shortly
  3. Use the floating toolbar to edit the element you just selected

You can also use the Gutenberg editor to add new global elements to your website. Use these steps:

  1. Hover around the place you want to add an element
  2. Wait for the “+” button that appears shortly
  3. Click on that “+” button and add whichever element you wish to add

WordPress also created a field guide for new users of this update with some helpful tutorials to outline the full site editing features and the rest of the new content.

WordPress 5.9 FAQ

  • What is the latest version of WordPress 2022?

As of 2022, the most current version is the January 25 release of WordPress 5.9, “Josephine.’

  • How many WordPress versions are there?

You might think that there are “5.9 versions” of WordPress updates, but actually, there are hundreds. Between the core updates, there are maintenance and security updates that effectively create this new version. You can see the full list of every WordPress update that has happened, and what is planned, here.

Since we’re talking about the major updates, like 1.0 and 1.2, all the way up to 5.9, then there have been WordPress versions.

  • How do I know which WordPress version I’m using?

It’s easy to check the version your site is running on. Check the WordPress dashboard and see if you are using the most updated version. 

If you aren’t, there will be an option to “update now” with a simple button. That will allow you to update your website to the new WordPress core version. 

  • How do I know when there is a WordPress update?

Anyone who is using WordPress 3.7 or above can turn on automatic updates for major releases (as well as themes and plugins). If you’d rather manually update when you feel ready, there is an option to get email notifications to learn when there is a new update. 

Simply install the WP Updates Notifier plugin and when you activate it, configure the settings to how often it’ll scan your site for updates. Usually, it is hourly, but you can change the frequency to daily. 

This plugin will check for WordPress core updates, as well as theme and plugin updates, and decide what you’d like to update based on the information it shares. 

  • Do I have to use the FSE? 

No, you’re not locked into it. Using the FSE in the new WordPress update is optional. If you have a custom theme that you love on your site, you can choose to keep your current theme as it is. 

What are People Saying About the WordPress 5.9 Update?

“WordPress 5.9 is HUGE for anyone on WordPress. Not only does it bring some much needed stability improvements to the Gutenberg editor, it also gives users full control over their theme’s styles and templates without having to touch a line of code. In a world dominated by no code tools and bloated website builders, block based themes may finally be what WP needs to be able to compete with platforms like Shopify, Webflow, and Squarespace.” 

– David Martin, Founder of UXHACKS

“In terms of changes to theme development, the default Twenty Twenty Two does steer towards even greater reliance on theme blocks, but creation of these, as well as custom post types,  template parts, custom pages, etc., is still very easy to achieve.” 

– Ronan O’Leary, Senior Web Developer at TNW

“It seems to be a significant step forward in consolidating and streamlining the process for creating and building beautiful looking WordPress sites. It’s going to be really interesting to see how this line of product development a) plays out with other page builders such as Elementor and Beaver Builder and b) creates similar building experiences to Wix and Square Space without losing any of its fully customizable-ness that we all love.” 

– Nick Bryant, Wordify

Video Reviews:

Summary of the New Features of WordPress 5.9

  • Full site editing to modify WordPress themes with no need to code (only for some themes).
  • Ten new blocks have been introduced for full site editing.
  • Ability to save themes for specific templates (or globally for the entire website).
  • The new default Twenty Twenty-Two theme.
  • Block patterns and full-view pattern explorer.
  • Drag and drop list items, add HTML anchors to blocks, section expanding and collapsing.
  • New typography tools and more detailed control of design elements like borders, spacing, post title placements, and more.
  • Gallery block updates to customize the styles with drag and drop functionality.

We Can Help You Upgrade Your Website to WP 5.9

A lot is going on in the new WordPress update 5.9 that directly impacts your website. That said, it will be hard to keep track of all these changes.

Shifting from PHP to HTML, finding new themes, shifting from the classic editor, as well as using theme.json can all be confusing.

Fortunately, you don’t have to fret about the WordPress 5.9 update (or any other future updates). We can do the heavy lifting on your behalf so that you can focus on other aspects of your website.

We have a full development team to help you:

  • Build or Redesign your website
  • Customize your website using the latest FSE functionality
  • Optimize your website for Gutenberg themes

Schedule a free introductory consultation call with David, Our founder, to explore how we can help you.

By David Martin

I'm obsessed with building websites. I love planning, designing, developing, and tweaking them until they're converting users into customers. This is where I share some of what I've learned over the past decade building websites on the Internet.