WordPress 5.9 is Here! What Big Changes Have You Missed?

WordPress 5.9 Josephine is here! This WordPress version was originally scheduled to be released on December 14, 2021. However, due to some issues and unresolved bugs, the final release was delayed and eventually released on January 25, 2022.

If you’re wondering what’s the most significant change, the answer is Full Site Editing (FSE). And really, most of the new features are only available if you’re using a theme that supports Full Site Editing, like Twenty Twenty Two—the new default theme.

With WordPress 5.9, we come to the second phase of the Gutenberg roadmap—the Customization phase. 

Now, let’s find out the details!

Global Styles: A Graphical Interface for ‘theme.json’ File

With WordPress 5.8, manipulating the ‘theme.json’ file has become the standard way for theme developers to customize editor styles and settings.

WordPress 5.9 takes it to the next level by introducing a graphical interface for it. Now, users can customize style presets for their site, either at the block level or globally, without touching a single line of code.

Since Global Styles affects some aspects of WordPress website design, it’ll dramatically change the way you customize the look and feel of your site.

First, the Global Styles interface replaces Customizer. And it’s currently the only way to customize styles and settings with block themes. 

Likewise, complex theme option admin pages will no longer be needed. This provides a new standard way to configure theme settings and styles.

In the site editor, a new sidebar is now available. At the top, you’ll find a small preview panel and five elements in the following order: 

• Style preview
• Typography
• Colors
• Layout
• Blocks

Let’s take a closer look!

Style Preview

The first element is a preview panel. It allows you to check the result of your customizations. This is especially useful when your changes apply to elements that aren’t visible in the editor’s canvas.

Typography

This is where you control the typography of your site. The controls available in this panel depend on what’s in the ‘theme.json’ file.

Colors

Here, you can view and edit the color scheme and customize some website elements’ color.

By clicking on one of those elements, you get access to a new panel where you can choose colors from three palettes: Theme, Core, and Custom. Here, you can set and modify the color of the chosen element.

Layout

The last set of tools is for layout customizations. This is limited to the site container in a global context.

Blocks

With the implementation of Global Style, you can now also change the look and feel of specific blocks, such as Paragraphs, Buttons, Columns, etc.

Note that block styles can only be customized from here if the block declares support for specific functionality in the respective ‘block.json’ file. 

For example, since the core Post Title block supports typography and colors, you’ll find the corresponding entries in its block’s Global Style settings.

The Twenty Twenty-Two Theme and WordPress Block Themes

With WordPress 5.9, you don’t need to install the Gutenberg plugin to enable Full Site Editing on your site. You only need to use a block theme.

In addition, WordPress 5.9 has been packed with a brand new default theme—Twenty Twenty-Two. It is a game-changer as it is the first default block theme ever. Also, Twenty Twenty-Two is a very customizable and flexible theme. 

Once using a block theme, a new ‘Editor (beta)’ menu item will appear in the WordPress dashboard admin menu.

On the editing interface, you can visually edit your website’s homepage, templates, and template parts. You can also access the Global Styles interface from here.

As you can see, you’ll not find the Customizer. That’s because it doesn’t support block themes. That’s also why you can’t preview inactive block themes.

If you’re using a traditional theme, like Woostify, and worried about backward compatibility, rest assured. You can continue to use it.

There are currently four different theme categories for you to pick:

• Block Theme: Themes designed for Full-Site Editing
• General Theme: Themes that work with both Customizer and Editor (beta)
• Hybrid themes: Classic themes that support Full-Site Editing features 
• Classic Theme: Themes with “functions.php” files, PHP templates, etc.

The Updated Navigation Block

The navigation block has been in its infancy for some time. Now that all the pending issues have been fixed, we can finally start using one of the most powerful features of WordPress 5.9.

When you first add a Navigation block, the block placeholder offers three options: 

• Choose an existing menu, 
• Create a menu with all pages, 
• Or start fresh with a blank menu.

The new Navigation menu allows you to import menus created through the Appearance Menus Screen available with classic themes.

Therefore, if you’re switching from a classic theme to a block theme, you’ll not have to rebuild your existing menus. Simply select one of your current ‘Classic Menus’. And it’ll automatically be converted into a block-based navigation menu.

New Navigation links are added immediately to the Navigation block by clicking the plus icon on the right side unless other block types have already been added to the menu.

Clicking the Edit button in the Navigation Link block toolbar transforms a menu item into a custom link. So you can add, edit, rearrange, and delete individual items.

You can also convert links to blocks by clicking the Transform button on the block toolbar. So you can add specific blocks to the navigation menu directly.

In the Settings sidebar, you’ll find a complete set of options to control many parts of your navigation menu.

Another helpful addition added to the Navigation block is Block Gap support. So you can control the spacing between menu items.

Performance Improvements

Block Inserter Enhancements

As of WordPress 5.9, block types, categories, and patterns are lazily displayed in the Block Inserter. Your browser loads higher-priority content first, giving you a smoother editing experience.

Less CSS Loaded

WordPress 5.9 cuts down on the amount of CSS loaded by block themes significantly, resulting in significantly faster page loads.

Lazy Loading Performance Improvements

Starting with WordPress 5.9, the ‘loading=”lazy”‘ attribute is not applied to the first content image or iframe. 

An analysis performed on 50 popular WordPress themes shows that this solution leads to significant performance improvements and up to 30% faster page loads.

Multiple Stylesheets Per Block

Theme and block developers can register multiple stylesheets per block and load styles from other blocks as needed. 

This allows stylesheets to be loaded depending on the page content, preventing from loading large stylesheets on every page.

Final Words

We’ll end this article with a quick note on the WordPress market share. It currently powers more than 65% of all websites with a known content management system and about 43% of all websites.

These numbers are impressive, especially when compared to the closest competitors with less than 7% market share—Shopify.

Every new version of WordPress brings new features, performance improvements, and interface enhancements. And WordPress 5.9 is no exception. 

All you need to test out new features is a block theme, like the new Twenty Twenty-Two default theme.

And for anyone who is using Woostify theme, you can update your website to WordPress 5.9 immediately without any issues. The development team always works hard to ensure Woostify is fully compatible with newer WordPress versions.