WordPress 5.4 coming soon: Everything that Developers should know

The Gutenberg’s latest version 5.4 is approaching soon and it’s time for theme developers to brace up and start testing their extensions and make sure it works well.

So, before that, you need to know what’s upcoming in WordPress 5.4. From additional features to changes at the code level, a lot more is on the way. This post will serve as a quick guide to all the upcoming important changes that the developers need to know before testing their plugins and themes.

1.Social Icons and Buttons Blocks

The social icons and buttons, these are the two new blocks coming with the WordPress 5.4. 

• Social Icons

The social icons block allows users to link to social media and other popular websites by using those sites’ logos. The simpler Social Icons in Gutenberg 7.5 are merged in WordPress 5.4 and it will not recognize any Social Icons blocks built before Gutenberg 7.5.  So, to solve this you need to manually migrate any content with old Social Icons by loading the post in the block editor (Gutenberg 7.5 or higher) and save it. 

You can also keep the Gutenberg plugin installed after upgrading to WordPress 5.4. 

• Buttons block

The buttons block lets users add buttons and group the multiple button blocks together. The good news is that it offers a collection of buttons and you won’t need to migrate your existing button blocks.

2.Create Custom Gradient Presents

The WordPress 5.4 introduces the new Gradients API that allows you to use gradients as backgrounds in Cover and Buttons blocks.

You need to configure a predefined set of gradients with the theme-support option editor-gradient-presents, then pass an array that represents the gradient set:

      add_theme_support(

    ‘editor-gradient-presets’,

    array(

        array(

            ‘name’ => __( ‘Vivid cyan blue to vivid purple’, ‘themeLangDomain’ ),

            ‘gradient’ => ‘linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)’,

            ‘slug’ => ‘vivid-cyan-blue-to-vivid-purple’

        ),

        array(

            ‘name’ => __( ‘Vivid green cyan to vivid cyan blue’, ‘themeLangDomain’ ),

            ‘gradient’ => ‘linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)’,

            ‘slug’ => ‘vivid-green-cyan-to-vivid-cyan-blue’,

        ),

        array(

            ‘name’ => __( ‘Light green cyan to vivid green cyan’, ‘themeLangDomain’ ),

            ‘gradient’ => ‘linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)’,

            ‘slug’ => ‘light-green-cyan-to-vivid-green-cyan’,

        ),

        array(

            ‘name’ => __( ‘Luminous vivid amber to luminous vivid orange’, ‘themeLangDomain’ ),

            ‘gradient’ => ‘linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)’,

            ‘slug’ => ‘luminous-vivid-amber-to-luminous-vivid-orange’,

        ),

        array(

            ‘name’ => __( ‘Luminous vivid orange to vivid red’, ‘themeLangDomain’ ),

            ‘gradient’ => ‘linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)’,

            ‘slug’ => ‘luminous-vivid-orange-to-vivid-red’,

        ),

    )

);

 

You can also disable gradients altogether if they prefer not to support them. 

• Disable custom gradients

You can also disable custom gradients by limiting your users to the default gradients you defined in the block editor or that you added to the editor-gradient-presents theme support setting.

add_theme_support ( ‘disable-custom-gradients’ );

This call limits your users to the default gradients you defined in the block editor or that you added to the editor-gradient-presents theme support setting.

 

• Disable gradient functionality

You can also shut down gradient functionality altogether using the API. You must combine these two calls:

1 add_theme_support( ‘disable-custom-gradients’ );

2 add_theme_support( ‘editor-gradient-presets’, array() );

 

3.Block Editor Markup and Style Changes

Theme authors must check their block editor styles. The CSS class names of many of the components in the block editor with the editor- prefix have been changed to use the block-editor- prefix.

Moreover, the DOM of the block editor has removed the `edit-post-layout__content` div, so it is vital to check your custom styles and plugin files to make sure you’re not targeting it fir styling.

Four of the div wrapper elements have been removed altogether along with the ‘block-editor-block-list__block-edit’.

You must use the .wp-block or just the [data-type]  attribute because selectors like .wp-block > .block-editor-block-list__block-edit > [data-block] won’t work anymore.  The built-in padding and negative margins are refactored out to simplify the CSS and enable easy styling and development of blocks. So, it is better to try getting rid of the previous styles you wrote to compensate.

 

4.Calendar Markup and Class Changes

The markup of the get_calendar () function has been changed by the core team, affecting the Calendar Widget. The calendar output no longer has the <tfoot> element. Instead, the WordPress 5.4 moves the navigation links to a <nav> HTML element that comes right after the <table> element.

Few HTML classes were introduced in get_calendar() for easier CSS targeting:

• wp-calendar-table for the <table> element.
• wp-calendar-nav for the navigation wrapper.
• wp-calendar-nav-prev for the previous month link.
• wp-calendar-nav-next for the next month link.

The #prev and #next HTML IDs were also replaced with .wp-calendar-nav-prev and .wp-calendar-nav-next classes.

5.Block Scaffolding

With the new NPM Package for Block Scaffolding, developers have a new way to generate the directory structure for a block editor plugin. This structure typically includes index.php, index.js and style.css and the script will create a new directory and build out the appropriate PHP, CSS, and JavaScript files necessary for building a block plugin.

Block developers can now simply run the following command:

$ npm init @wordpress/block block-name

6.Block Collections API

The Block Collections allow grouping of blocks based on namespace. On registering a custom collection by the plugin developer, any blocks sharing the collection’s namespace will appear under a custom section in the block inserter. The Block Collections API thus provides a smarter way to discover and organize block. 

  registerBlockCollection( ‘coblocks’, {

    title: ‘CoBlocks’,

    icon: brandAssets.categoryIcon,

} );

 7.Block Variations API

The new Block Variations API allows block developers to define block variations the user can choose from while adding blocks to content. The developers can do this while registering a block and registered variation will appear as a separate block in the block inserter.

The social icons block where a single block has 40 variations for the various social networks is an ideal example.

8.Add custom firels with Nav menu hooks

WordPress 5.4 gives you two new actions that let you add custom fields to menu items such as the Menu screen and in the Customizer’s menu editor.

The new wp_nav_menu_item_custom_fields action is added just before the move buttons of a nav menu item in the menu editor.

You can assign five parameters:

· $item_id: the menu item ID (integer)

· $item: the menu item data object (object)

· $depth: the depth of the menu item (integer)

· $args: an object of menu item arguments (object)

· $id: the Navigation Menu ID (integer)

These new action hooks can replace the custom walkers you’ve been using for your nav-menu fields. You’ll want to check your existing code to see where that replacement makes sense.

9.Apply Shortcodes

WordPress 5.4 introduces a new function – apply_shortcodes() instead of the current do_shortcode() function. While do_shortcode() still exists, apply_shortcode() is much simpler cleaner and is meant to provide better semantics.

 So these were some of the important factors that every developer should keep in mind before making their themes and plugins compatible to the WordPress 5.4.