WordPress 5.9 Review – Full Site Editing, Block Based Themes, and Performance Upgrades

Illustration representing the release of WordPress 5.9

Full Site Editing, Template Part, and Gallery Block were the highlights among many great features in WordPress 5.9. - Ibad Rehman

Take a deep dive with us into the latest version of WordPress 5.9. This is a major WordPress release that features the much awaited Full Site Editing and a new default block-based WordPress theme named Twenty Twenty-Two.

WordPress 5.9, “Joséphine” , was finally released on 25th of January. The WordPress community had been impatiently waiting for this release for the reasons I am actually writing this post. This is the first major WordPress release of 2022 with very exciting new features such as Full Site Editing, shiny new Twenty twenty-two block based theme, various performance enhancements, and more. This also marks the completion of the second phase of the Gutenberg roadmap that was laid out to take the customization within the editor to a whole new level!

Now that you have some background context, let’s jump right into the latest WordPress 5.9 and try out its new features. For that, I will be launching a brand new WordPress site on my Convesio platform which comes pre-loaded with WordPress 5.9.

Full Site Editing

Full Site Editing allows you to edit the WordPress theme visually without any code. This is a brave move towards competing with page builders. The Full Site Editing feature is limited to the themes that support this feature but the good news is that the number of these themes is increasing every day. If you have developed a custom theme, you can change it to a block theme by following the appropriate template-based file structure.

Full Site Editing is a master plan that encompasses sub-projects like Site Editor, Global Styles, Query blocks, Navigation Blocks, Templates, and Block Themes. The idea is to provide the same ease and flexibility of using blocks across all parts of site development.

Let’s see what Site Editing actually is in its current form.
You can access the Site Editor feature either from the Appearance option or from the Edit Site option located at the top of the page.

Screenshot of the WordPress Admin once 5.9 is installed

Screenshot of the top navigation of WordPress 5.9 Admin

Inside the Editor, there are many options for adding and modifying the blocks on your current page layout. Let’s look at them one by one.

New Theme Blocks

This is a replacement for what you typically see inside the Customizer. However, additional components in the shape of blocks are added too.

Screenshot of the new theme block in WordPress 5.9

From this tray, you can visually add blocks like Navigation, Header, Footer, Next and Previous Posts, Post Comments, and Template Part. What I really found exciting about this new addition is the options of selecting different patterns of any block type. This will vary from theme to theme but the new default WordPress theme Twenty Twenty-Two already comes with plenty of options.

Let me show you.

Screenshot of Patterns available in WordPress 5.9

The above window allows you to pick columns of different styles and dimensions. Similarly, you can pick from the wide range of Buttons, Featured sections, and Gallery layouts. This enables you to create pages faster without even writing a single line of code.

Adding, moving, and modifying blocks is very simple using the Site Editor. The overall experience is smooth and responsive. I successfully created multiple columns within a group and modified them individually, using site-wide blocks, and custom Template Parts.

Global Styles

WordPress 5.8 rolled out with the new feature of theme.json. The feature allowed the developers to override the default Gutenberg styling and replace them with their own styles per block basis. In WordPress version 5.9, theme.json got its graphic interface. This means that these styles can now be manipulated by the user without getting into code.

The Global Styles interface replaced the Customizer and it is now a default way of customizing the blocks within a block theme. You can use this feature to set styles either globally or for a block.

Let’s see this in action.

You can access the Global Styles pane from the top right corner. For now, it only allows the user to define Typography, Colors, Layouts, and Blocks.

Screenshot showing the Global Styles pane in WordPress 5.9

You can either pick a different color from the existing palette or edit the colors within that palette. Similarly, you can add your own custom colors for several site elements.

Screenshot showing the color palette in WordPress 5.9

Defining color palettes is one of the most useful tasks and this feature makes it really simple and quick.

Layouts

The Layouts tools simply allow you to set the padding properties on-site containers.

Screenshot showing the layout pane in WordPress 5.9

Blocks

This allows you to customize and set block styles globally. For example, you can set the typography and colors for the Paragraph block or layouts for the Column block. Blocks only appear inside a specific functionality if that functionality is declared inside their block.json file.

Screenshot showing the blocks pane in WordPress 5.9

Let’s look at some of the popular blocks and their customization options.

Screenshot showing customization options in WordPress 5.9

While this looks great, there are more options coming up in future releases that will allow users to customize elements and apply those changes across the site.

Table of Contents
About The Author
Ibad Rehman

Ibad Rehman

Community Manager at Convesio. Enthusiast about the web, AI, and Digital Marketing. Technical content creator, JavaScript advocate, educator, and lifelong learner.
Free Resource
Get Performance Tips In Your Inbox
Subscribe to our newsletter covering performance, innovation & running WordPress at scale.
Spotlight

The #1 Platform for Scaling WordPress

Convesio’s innovative container-based hosting delivers performance at scale, whether 1 or 10,000 users are visiting your website concurrently.

Twenty Twenty-Two Theme Review

The new WordPress default theme, Twenty Twenty-Two is probably the most robust and flexible WordPress default theme. It is inspired by the diversity and versatility of birds which is also reflected in its minimalist design, typography, and color palettes. Twenty Twenty-Two is designed to offer flexibility in terms of design and customization. It is also a block theme that is fully compatible with the latest WordPress Full Site Editing features.

Screenshot of the Twenty Twenty-two theme

As discussed above, the theme comes with various patterns for different site elements like Buttons, Columns, Featured Images, etc. Besides a beautiful minimalist design and customization features, Twenty Twenty-Two also set the stage for future block themes.

Let’s take a look at the new theme.

The first thing I wanted to try was to customize the Template and to create my own Template Parts.

Screenshot of the template customization screen in WordPress 5.9

Customizing the Template is straightforward. All you need is to select the desired template from the list and start adding, removing, or customizing the blocks. I picked the default 404 page and changed its color, search bar, and added social media icons.

Screenshot of the 404 template in the WordPress Twenty Twenty-two theme

Next, I attempted to create my own Template Part. Template Parts are stand-alone components that can be added anywhere on the page.

Screenshot of the template parts screen

I created a pricing plan Template Part which I intend to use at multiple places. The “Learn More” button is another Template Part that I created so I could use it not inside the multiple pricing tables but also in some banners.

Screenshot showing a Template Part for pricing in WordPress 5.9

Let’s add this custom Template Part to our home page.

Screeshot of a template part added to a page

Definitely, not the prettiest pricing table but creating Template Parts is fun and more importantly, it is a great way of re-using the blocks conveniently.

Additional Block Features

Some new blocks are also introduced with WordPress 5.9 while some existing blocks got improved. Let’s look at them briefly.

Navigation Block

This is one of the new addition of blocks. Navigation block is a robust feature for creating custom navigation simply either by choosing the existing menus or creating one from scratch.

Let me show you how it is done.

When you drop the Navigation block, it gives you three options to choose from.

Screenshot of the navigation block in WordPress 5.9

You can either select the existing menu that you have previously created using a classic theme or simply add all pages, or start building your own from scratch. The first two options are pretty straightforward. Let’s create one from scratch.

Screenshot of a detail of the navigation block in WordPress 5.9

As soon as I pick the third option, a window containing a list of various blocks pops up. Here, I can select Site Logo, Search bar, Custom Links, Social Icons, or other pages and posts.

Screenshot of an example navigation block in WordPress 5.9

You can practically add any block and create various custom navigation options. You can also use this new block to create a table of contents.

Gallery Block

Gallery Block has been completely revamped and new useful features are added. For example, now you can add custom links, apply a duotone filter, and customize individual images. Previously, there was no option of editing the images before adding them to the gallery. To support consistency, the images are now stored in the gallery with their own details using the inner block APIs. This allows the user to edit the images along with other block features like drag-and-drop, copy, and duplicate.

The block-level editing options like the number of columns, image size, and image cropping allow you to customize and apply changes to the whole gallery.

Screenshot of the Gallery Block in WordPress 5.9

While customization of individual images in the gallery is now also available. You can apply filters, modify borders, change image size, and add alt and caption texts.

Screenshot showing how images can be edited with the Gallery Block in WordPress 5.9

Performance Improvements

Performance has always been a point of interest for WordPress users especially after Gutenberg was set as a default editor. Luckily, the core team has been working hard in improving performance in every new release. WordPress 5.9 also rolled out with a bunch of performance enhancements.

Editor Performance

The WordPress editor is a key component for creating content. Inside the current editor, everything is created via blocks which are individual components. A typical post could contain hundreds of these blocks. Therefore, to enhance the usability and smoothness of the block editor, lazy-rendering has been introduced inside the Inserter that is activated while searching for block types and displaying categories.

Another great performance enhancement is the improved blocks List View. List View is a great tool to manage blocks, especially in a long post. The drag-and-drop option is back through which you can now drag blocks up and down right from the list view. The performance has been improved through a windowing technique that renders only a fixed number of items at a time — making it more scalable than before.

Front end Performance

The notable frontend performance enhancement is the optimization of CSS usage and loading. theme.json contributes the most as it allows the user to enqueue all stylesheets from one place — reducing the number of CSS files shipped with a theme. Similarly, 5.9 also reduces the load time and increases the performance by only loading the CSS for the blocks that are present on the page. Theme and block developers can now add stylesheets per block and reuse them in other blocks. This significantly reduces the code size as well as the load on the page.

Image lazy loading has also improved. Previously, the loading=lazy attribute was assigned to all images and iframes that lead to a bad Largest Contentful Paint (LCP) score. WordPress 5.9 solved this by simply not applying the attribute to the first content image or iframe. The method was tested on 50 popular WordPress themes that showed noticeable performance improvements and up to 30% faster page load.

Final Thoughts

Undoubtedly, WordPress 5.9 was released with some very prominent features and performance enhancements. Being a user, I am delighted to see the platform evolving and expanding its features.

My overall experience of creating pages, drafting a post, or managing blocks with the latest version was great and much smoother than its predecessors. However, there is still room for many improvements, especially in the context of Full Site Editing and I would love to try out more block themes. I strongly recommend testing and upgrading to WordPress 5.9 to enjoy all the new features and enhancements.

Related Info
About The Author
Ibad Rehman

Ibad Rehman

Community Manager at Convesio. Enthusiast about the web, AI, and Digital Marketing. Technical content creator, JavaScript advocate, educator, and lifelong learner.
Free Resource

Sign up for our newsletter

Focusing on WordPress performance, scalability and innovation.
Share This Post
Leave a Reply

Your email address will not be published.

Get WordPress Performance Tips
Subscribe to our monthly newsletter covering performance, innovation & running WordPress at scale.