WordPress 5.9: A Closer Examine of Whole Site Editing

Are you happy with your current hosting provider ?

Since it was released on January 25, 2022, WordPress 5.9 is the first significant update of that year. The most recent version adds new functions and improvements that simplify complete site customization.

With the addition of the Gutenberg block editor for post and page construction, the previous stable release of WordPress, 5.8, was already pushing full site editing.

With the addition of a block-based theme editor along with other new features and modifications, WordPress 5.9 pushes functionality even further. The cool new features, adjustments, and bug fixes of this latest WordPress edition will all be covered in this article.

A Brief Review of the Modifications and New Features

Incorporating WordPress into intrinsic site design is now possible because of new features and enhancements to the interface and design. Below is a summary of the new full-site editing tools and enhancements in WordPress 5.9:

  • Site-wide editing – A new complete site editor and a global styles interface replace the standard WordPress editor and offer a fresh full site editing experience. The new global styles panel makes it simple to change site-wide styles.
  • Completely new default theme – New default theme: Twenty Twenty-Two is the first block-based default theme that is fully compatible with the new site editor.
  • Block and user experience (UX) enhancements – WordPress 5.9 brings a number of changes to the block editor, including focus mode, a collapsible list view, and drag-and-drop block rearrangement. There are also new blocks and design tools accessible.
  • New capabilities for developers – Child themes now support theme.json inheritance in WordPress 5.9. Moreover, blocks now allow multiple stylesheets and new attributes, providing block creators more freedom to express their creativity.
  • Enhancements to performance –  A new lazy-load modification is used to speed up WordPress. The most recent version of PHP, 8.1, is now supported by WordPress 5.9, which also brings a compatibility-improving update to the PHP testing framework.

Site-wide editing

With the addition of a block editor, WordPress updated its site modification capabilities. This site editor makes the Gutenberg page builder, which was previously exclusively accessible for WordPress posts and pages, available across the board.

Users can now alter their entire website using the new global theme style choices without frequently modifying theme or stylesheet files.

Also, the new flexible default WordPress theme is a great place to start if you want to learn about the new complete site editing features.

Site Editor Block

The new block editor is one of the highlights of WordPress 5.9. The Customizer, Menus, and Widgets in the Appearance area are largely replaced by this functionality.

The editor is located in the Appearance section of the WordPress admin dashboard.

The user interface is comparable to the block editor which was previously exclusively accessible for articles and pages. WordPress blocks can be used to construct or change the theme’s templates or template components; theme components like the header and footer have their own blocks.

When you access the editor, it automatically launches the editor for the Home page template. To alter other templates, such as those for the 404 page or the post template, click the WordPress logo in the top-left corner and select Templates from the pop-up sidebar.

The available templates are displayed. Decide the one you want to change. The pop-up sidebar also contains template components.

Clicking the Add New button in the top right corner will allow you to create a new template or template part.

New front pages are automatically added when new templates are created. While building a new template part, you can decide between a header, footer, or general template. The general template portion, in contrast to the header and footer, can show content without being restricted to a particular place.

We may anticipate additional WordPress block themes in the future thanks to the introduction of the new site editor.

Twenty Twenty-Two Default Theme

Every year, beginning in 2022, WordPress releases a completely new default theme. The Twenty Twenty-Two default theme is a new addition to WordPress 5.9.

This is the first default block theme that was created with complete site modification in mind. A minimum amount of CSS was utilized because the theme’s developers prioritized making it customizable through theme.json and the new editor.

404 error pages, single post pages, and archive pages are just a few of the many page layouts available in Twenty Twenty-Two. Together with a footer and three alternative styles of headers—the default, dark with a tiny style, and dark with a large style—the template pieces also feature a footer.

Interaction of World Styles

The theme.json file, which can be found in the theme’s top-level directory and allows you to customize the theme’s default styles with just a few lines of CSS, was added in WordPress 5.8.

The global styles interface is new in WordPress 5.9. You can use the feature to access global settings and modify the site-wide styling in the theme editor without directly modifying the theme.json file’s content.

The interface can be accessed by clicking on the black and white circle in the editor’s upper right corner. You can modify the following settings using the panel that appears on the right side:

  • Typography – Text and links’ font families and sizes can be changed.
  • Colors – Manage the default color for the background, text, and links and the color palette for other global components.
  • Layouts – Change the padding between site elements.

Changes to block styles are also an option. The list of editable blocks is displayed when you select Blocks from the global styles panel. Keep in mind that certain blocks might merely have a choice of color schemes and layouts, but others might feature typography tools.

Enhancements to Block and UX

The block editor is where many WordPress users spend the majority of their time creating and managing their content. As a result, the new WordPress release includes a number of block editor changes, including additional blocks and an improved user interface.

Interface Development

Also, the user interface and experience have been enhanced in the new WordPress version. You can easily reorder the material in the list view by dragging and dropping individual pieces.

Complex block structures are simpler to manage because the list view’s items can be collapsed as well. Blocks can also have HTML anchors added for convenient navigation.

The header and footer can be focused using the theme editor. This function can be accessed from the editor’s top panel.

The header and footer can be focused using the theme editor. This function may be accessed from the editor’s top panel and only displays the area you want to modify.

Only the section you’re changing, the header or footer is visible in the focus mode. You will have a less cluttered interface as a result, and the section preview will be more accurate. Moreover, you may change the screen width in the editor to view how the header or footer appears at various widths.

Updated navigation block

WordPress 5.9 adds a number of new blocks, including blocks for the site title and logo. The navigation block, however, is the most important one.

This block is movable throughout the website. When you add a block, the placeholder for the navigation will have three options: choose a block-based menu, create a new menu with all pages, or start from scratch.

If you already have navigation menus made with a classic theme, you may add them with this block, and it will transform the menus into a block-based navigation menu automatically.

You may quickly adjust the orientation and justification from the design tools thanks to the various layout settings that the navigation block has. The block can be set up to automatically collapse into a menu icon as a responsive menu.

The option to position the navigation block on posts is another new feature. The ability to change the menu items and connections to the article’s headings makes this useful if you want to make a small navigation bar for lengthy content.

Together with the navigation block, WordPress 5.9 also offers two more new theme blocks: the site title and the site logo.

Updated Design Tools

The design tools, which are accessed via the block settings panel, as well as their customization choices, have seen significant upgrades in WordPress 5.9. Here are a few of the noteworthy new additions:

Pagination

Many design customization choices are now available for the pagination block. The layout control, which alters the navigation’s direction and justification, is the most prominent. The pagination block now has new aesthetic options for chevrons or arrows.

Support for Block Spacing

Block spacing is now supported for a number of blocks, including buttons and columns. Users are now able to distribute the block objects with predetermined pixel spacing.

An absolute PX unit can be used to specify block spacing. To make the spacing sensitive to the screen sizes of the devices, you can choose relative units like EM, REM, VW, or VH.

Blocks with layout controls, such as the button block, can be laid out both horizontally and vertically using this block spacing.

Featured Picture

Two new design tools may be found in the featured image block. The first is the tool for defining picture dimensions, which allows you to specify the image’s height and width. Moreover, there are three scale choices to help you fit the image within the predetermined block dimension:

  • Cover – resizes and crops the image to fit the area without distorting it.
  • Contain – Without cropping or distorting, contain scales of the image to fill the available space. A blank space could result from this scaling option.
  • Fill – Fill the space by stretching and warping the image.

The margin and padding are additional new style elements for featured photos. In a contrast to padding, which adds white space around the featured image, the margin creates spacing between the previous and next blocks.

The Duotone Filter

The gallery and post feature picture blocks now include a duotone filter effect thanks to WordPress 5.9.

The automatic two-tone color conversion of the image is performed by the duotone filter without permanently altering the original file. In the earlier WordPress version, this capability was restricted to picture blocks.

The featured image blocks in the post, page, and query loop block all use the duotone filter for featured pictures.

Gallery Block Refactored

The gallery block refactor is one of the most eagerly awaited changes in WordPress 5.9.

The gallery block didn’t treat the images within it separately in the previous WordPress iteration. That meant that you were unable to add links, alt text, or a unique border to each image.

This updated gallery block treats each image as a separate block, making it identical to the image block in terms of design tool, which also includes alt text and links for each image.

Each image now supports the adjustable border-radius feature as well as the duotone filter.

Creating and Inserting Patterns

With this functionality, you can quickly add block patterns to new website sections. As an illustration, rather than adding blocks one at a time, you might use a pre-made pattern to create an area for a subscription form.

Choose the Patterns tab by clicking the + sign in the top-left corner of the editor. Choose a category using the drop-down menu, or use the Explore button to access the block pattern explorer.

The new Twenty Twenty-Two default theme features a number of block patterns for headers, footers, pages, and columns. There are numerous options for complete site alteration thanks to the more than 70 designs in total.

The language option on the login page

On the login page of WordPress 5.9, users can choose their language. The language selection will also apply to pages that are derivative, such as the user registration and password reset pages. Users must install multiple site languages in order to make this functionality active.

New Developer Features

Developers will find a number of new features in WordPress 5.9 useful. For instance, the new theme.json inheritance should make the process of developing a child theme simpler. A block cannot be moved or removed thanks to the new block attribute.

These characteristics are important for developers.

Child Themes Support in Theme.json

In WordPress 5.9, the creation of a child theme is made simpler by the Theme.json inheritance. Simply add a new child theme folder and a style.css file to the public_html/wp-content/themes directory. The parent theme’s global styles have been adopted by your new child theme, making it ready to utilize.

By skipping the step of building a PHP function to enqueue the parent and child theme stylesheets, this new inheritance feature makes it simpler for those just learning how to create a child theme.

But you may still build or edit a theme.json file specifically for the child theme. A comprehensive list of styles need not be defined, though. Instead, you can make a theme.json file for the child theme that just has a tiny bespoke block of styles because the remainder would be inherited by the child theme from the parent theme.

Blocks’ Lock Attribute

In the block settings, WordPress 5.9 introduced a new lock attribute. To stop users from moving or removing specific blocks, this capability is helpful for block makers. Add this attribute to the block settings in order to lock a block:

{

..

"attributes": {

"lock": {

"type": "object",

"default": {

"move": true,

"remove": true

}

}

}

}

Various Stylesheets

Now, developers can add more than one stylesheet to each block. Furthermore, styles from other blocks may be loaded.

By including a style or style string in the block.json file, stylesheets can be added to blocks. This makes it possible to reuse styles from other blocks without duplicating them.

For instance, if you want to apply the button block’s style to the comment-form block, add the following properties to the block.json file for the comment-form block:

{

   "style": [

       "wp-block-post-comments-form",

       "wp-block-buttons",

       "wp-block-button"

   ]

}

The ability to add styles on a per-block basis rather than utilizing a massive stylesheet is another enhancement to the block style. The page will now load the appropriate stylesheets rather than forcing the page to load a big stylesheet, which improves performance.

Performance Upgrades

Sluggish Image Loading

The WordPress team discovered that by not lazily loading the page’s top image, it is possible to increase the average Largest Contentful Paint by 7% without increasing the average image bytes.

This adjustment was made in WordPress 5.9 in order to improve page speed by changing the picture lazy loading functionality.

Tests for PHP code

Also modified in WordPress 5.9 was the PHP Unit testing framework. This is because PHP features are being added and removed, most notably in the recently released PHP 8.1.

For instance, the void return type was made available in PHP 7.1. If the core contributors incorporate this capability into PHPUnit, all tests that use PHP versions lower than 8.1 will be impacted.

Similarly to this, testing on PHP versions 8.0 and 8.1 will become more difficult if the core contributors continue to run tests on previous versions of PHP.

Based on the PHPUnit Polyfills library, a solution to this issue has been found. Now that the WordPress core test suite is compatible with PHPUnit versions 5.7.21 through 9.5.10, testing against all supported PHP versions may be done without incident.

Added Support and Compatibility in WordPress 5.9

Updated software, computer languages, and social media networks are all compatible with the latest WordPress version. The following are the three most notable ones:

  • jQuery 3 – WordPress core contributors intend to release the upgrade for jQuery 3 compatibility together with WordPress 5.9, following many delays.
  • PHP 8.1 – The latest version of WordPress is compatible with PHP 8.1, which was published in November 2021. Check to see if your WordPress plugins and themes support PHP 8.1 before switching to it, though.
  • Active embeds for Pinterest – With the creation of a dedicated block, WordPress 5.9 now supports seamless Pinterest embedding. The appropriate Pinterest URL should be pasted after adding the block to a page or post.

Bug fixes for WordPress 5.9

Bugs reported in earlier versions are continuously fixed by WordPress core contributors. The highlights of the 100 bugs that WordPress 5.9 fixed are as follows:

  • Dark mode bug – WordPress 5.9 addresses the Widget screen bug that occurs when using the dark mode. Due to a bug, the text’s use of a grey color against a white background made it difficult to read.
  • Shaking screen on the theme page – This bug can be found on the Appearance -> Themes page and causes the theme page to shake. When you hover over a theme thumbnail, the browser screen might tremble.
  • Disappeared reusable blocks – Reusable block disappearance: Since WordPress 5.7, a lot of users have had problems with reusable block disappearance. Although there are numerous solutions to this bug, WordPress 5.9 already includes a bug fix.

Upgrade to WordPress 5.9: How to Do It

Always back up all WordPress website files and databases before updating to WordPress 5.9 on your website. Check the WordPress 5.9 compatibility of your theme and plugins as well to avoid any issues.

When you’re prepared to make the update, decide which technique you wish to employ. There are various methods for updating WordPress:

  • Using hPanel – Users of WordPress, Cloud, and Shared Web hosting using hPanel – Hostnats can upgrade the WordPress core software from hPanel. Visit WordPress -> Dashboard to find a notification and a button that will allow you to quickly apply the update.
  • Update WordPress via the admin dashboardLog into your WordPress dashboard and select Dashboard -> Updates to update the software. When you notice the message When you click the button, the most recent version of WordPress will be installed.
  • Manually update using an FTP client – Download the most recent WordPress version, then extract the files to manually upgrade using an FTP client. The WordPress files as well as the wp-includes and wp-admin core directories should be overwritten using an FTP client. Visit yoursite.com/wp-admin/upgrade.php once you’ve finished the procedure to see if WordPress was successfully updated.
  • Use WP-CLI – Make use of WP-CLI; this approach necessitates SSH access to your root public_html directory. When you’ve reached that directory, do the update by typing wp core update.

Conclusion

With the addition of a block editor, numerous new design tools, and UX enhancements, WordPress 5.9 expands the capabilities of site editing in its entirety. Because it has so many possibilities for templates and patterns, the new default theme is also a great place for beginners to start with WordPress.

Together with bug fixes and new compatibility tools, WordPress 5.9 also adds capabilities to improve online development and design.

Make a backup of your website files and ensure that the themes and plugins are compatible before updating your WordPress website to the most recent major version. Use a WordPress staging environment if you’re unsure to avoid damaging the live website.

As soon as fresh information becomes available, Hostnats will let you know. For its users, we provide Optimized WordPress Hosting services.