Sign up for our newsletter
Receive our monthly round up of what's new with WordPress.
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 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.
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.
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.
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.
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.
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.
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.
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.
Let’s look at some of the popular blocks and their customization options.
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.
Receive our monthly round up of what's new with WordPress.
Convesio's innovative container-based hosting delivers performance at scale, whether 1 or 10,000 users are visiting your website concurrently.
TRY FOR FREE
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.
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.
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.
Next, I attempted to create my own Template Part. Template Parts are stand-alone components that can be added anywhere on the page.
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.
Let’s add this custom Template Part to our home 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.
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.
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.
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.
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.
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.
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.
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.
Comments
Have your say