WordPress 5.6 is the next major WordPress release that’s soon going to be available. Today we’re excited to deep dive with you into the most interesting features and additions being merged into Core.

Like previous releases, WordPress 5.6 includes several versions of the Block Editor enhancing the editing experience for WordPress users who don’t have the Gutenberg plugin installed and updated on their websites yet.

Not everything is about the Block Editor, though. Several features have been added to WordPress Core, like a new default Twenty Twenty-One theme, auto-updates for major releases, better support for PHP 8.0, Application Passwords for REST API Authentication.

And there’s much more in WordPress 5.6. We’ll see accessibility improvements, UI enhancements, tons of bug fixes, and a huge list of changes for developers.

We are excited to share with you what’s new in WordPress 5.6. 🥳 Don’t miss all the new features, enhancements, and the brand new default theme: Twenty Twenty-One 🎁Click to Tweet

If you want to read more about WordPress 5.6 development cycle, check the links below:

  • 20 October 2020: Beta 1
  • 27 October 2020: Beta 2
  • 2 November 2020: Beta 3
  • 12 November 2020: Beta 4
  • 17 November 2020: RC 1
  • 1 December 2020: RC 2
  • 7 December 2020: Dry run for release of WordPress 5.6
  • 8 December 2020: Target date for the release of WordPress 5.6

Ready to dive in? Let’s go through:

What’s New with the Block Editor

With WordPress 5.6, several versions of the Gutenberg plugin have been merged into core, so WordPress users and writers should notice several improvements in the editor. We’ll see enhanced block patterns, word counts in the info panel, improved keyboard navigation, improved drag & drop UI, and much more.

For a more comprehensive list of all improvements and changes added to the block editor, check out the release announcement posts: 8.6, 8.7, 8.8, 8.9, 9.0, 9.1, and 9.2. Bug fixes and performance improvements implemented in Gutenberg 9.3 and 9.4 are also included in WordPress 5.6.

Let’s dive into the more interesting changes we’ll see in the block editor.

  1. Blocks, Patterns, and UI Improvements
  2. Block API V2
  3. Additional Features and Improvements for Block Developers

Blocks, Patterns, and UI Improvements

New block features, enhancements, and bug fixes will improve the overall editing experience. Also, great work has been done on accessibility. Below you’ll find our handpicked selection of the most interesting features you’ll see in the block editor once you update your website to WordPress 5.6.

Position Controls for Videos in Cover Block

Added to Cover Blocks since Gutenberg 8.6, position controls for videos allow users to move the focal point around and set a custom position for videos. This functionality was previously available only for image backgrounds.

Video Position Controls for Cover Block

Position values are set by clicking anywhere on the focal point picker and/or using arrow keys on your keyboard. You can jump values by 10 by holding shift (see also #22531).

Block Pattern Updates

WordPress 5.6 also includes several block pattern improvements added with Gutenberg 8.6.

The layout, text, and color of the Large header and paragraph has been updated (#23858)

The heading in Two columns of text has been moved out of the text block and placed above the columns (#23853)

The Quote pattern now includes an image on top and a separator at the bottom.

Quote pattern

The new Quote pattern includes an image and a separator

A new Heading and paragraph pattern has been added with Gutenberg 8.7 (#24143).

Heading and Paragraph pattern

Heading and Paragraph pattern in WordPress 5.6

A good usability improvement for the block inserter is the block pattern category dropdown, which allows you to filter patterns by category. This is extremely useful when you have tons of patterns to choose from (#24954).

The block pattern category dropdown

The block pattern category dropdown

Support for Video Subtitles

Video Blocks now support video subtitles.

video subtitles

Adding video subtitles in Video Block

Editors and content creators should provide video subtitles in WebVTT format (Web Video Text Tracks Format), which is “a format for displaying timed text tracks (such as subtitles or captions) using theelement” (#25861).

track elements

Track elements linking to subtitles in different languages

Once you have loaded your .vtt files, site viewers will be allowed to enable subtitles in their favorite language.

Video subtitles user settings

Video subtitles user settings

Transform Multiple Blocks into a Columns Block

An interesting usability improvement is the ability to convert multiple selected blocks into a Columns Block.

Select multiple blocks

Select multiple blocks

You just need to select the blocks you want to show in columns, then click the upper right button of the block toolbar.

Each selected block will be converted into a column of a Columns Block.

columns block

Tree blocks converted into tree columns

Background Patterns in Cover Block

Cover blocks can now display background patterns.

A cover block with a background pattern

A cover block with a background pattern

To add a background pattern, upload a pattern image, then toggle on the Repeated background option (here’s everything you need to know about the Media Library in WordPress).

When done, adjust the focal point picker according to your needs and try different combinations with fixed backgrounds.

Image Size Control Added to the Media & Text Block

With Gutenberg 9.1, a new image size control has been added to images in Media & Text Block.

Users can now choose from all the available image sizes (#24795).

Image Size Control

Image Size Control in Media & Text Block

Block API V2

A new Block API version enables blocks to render their wrapper element. The goal of the new API version is to lighten the editor’s DOM and make it match the front page content. According to Ella van Durpe:

The biggest benefit of this is that themes and plugins can more easily style the block content if the markup is the same in the editor.

The new version requires to declare the apiVersion property on block type registration:

registerBlockType( name, { apiVersion: 2 } );

The new API also requires the useBlockProps hook in the block Edit function. This hook marks the wrapper element of a block as a block element.

Any property passed to this hook will be merged and returned to the wrapper element. The following example from the dev notes shows a simple use case:

import { useBlockProps } from ‘@wordpress/block-editor’;

function Edit( { attributes } ) {
const blockProps = useBlockProps( {
className: someClassName,
style: { color: ‘blue’ },
} );
return

{ attributes.content }

;
}

For more examples, see Block API version 2.

Additional Features and Improvements for Block Developers

Besides the Block API Version 2, here is a list of additions for developers to go through.

Block Supports API

Block Supports API allows block developers to add features to their blocks. Colors, backgrounds, font sizes are just a few of the many features that can be added to blocks through the Block Supports API.

WordPress 5.6 also introduces several new block supports “to increase consistency and make it easier to introduce these options into blocks”.

Developers can use the new block supports adding the corresponding keys to the supports property of the block.json file or directly into the registerBlockType function.

The following example from Block Supports dev note shows hot it works:

supports: {
color: {
background: true, // Enable background color UI control.
gradient: true, // Enable gradient color UI control.
text: true // Enable text color UI control.
},
fontSize: true, // Enable font size UI control.
lineHeight: true // Enable line height UI control.
}

The style value will be automatically attached to the wrapper element either through the has- class (for preset values) or with a style element (for custom values).

For this reason, Block Supports are intended to be used with the new Block API V2.

Block Supports can be used with dynamic blocks as well.

createBlocksFromInnerBlocksTemplate API

Developers can use the InnerBlocks component to create custom blocks containing other blocks. Examples are the Columns block and the Social Links block.

The new createBlocksFromInnerBlocksTemplate Block API allows you to create blocks from the InnerBlocks template.

See dev notes for a depper view and an example of code.

Toolbar Components

A couple of changes affect the Toolbar components as well:

1. ToolbarGroup Component

Before WordPress 5.6, the Toolbar component allowed developers to group related options in a common container. Now, a new ToolbarGroup component should be used instead.





2. ToolbarButton and ToolbarItem Components

Using tabbable elements directly as toolbar items (i.e.