New in WordPress 5.4: The Ultimate Guide

See all of the changes coming in WordPress 5.4 including some that will throw you for a loop.

Changes impact:

• The interface
• Gutenberg editor
• Site Health
• Developer changes that may affect your plugins and theme

Video Tour

Highlights with screenshots are below the video too.

Interface Changes

Distraction free writing is on by default.

This was a late addition to 5.4 and introduced by WP co-founder Matt Mullenweg himself.

The first time you visit the editor after you upgrade, it will now open in fullscreen mode.

Meaning no left admin sidebar.

You can toggle it off by clicking the More ellipsis and unchecking Fullscreen mode.

The Dev community is not altogether happy with this setting as it may be confusing to new users because it hides so many of the tools. So, this setting may revert back to fullscreen mode being off by default in future releases of WordPress.

Gutenberg Changes

Multiple blocks have been improved, plus there are new blocks.

New Welcome Guide Modal

A new slideshow appears the first time you open the post editor.

Last screen has a detailed guide.

Replaces the pop up tip that would randomly show long after you started using Gutenberg.

slide show for the block editor

Will be visible right after upgrade

To bring up the guide anytime click on More ellipsis > Tools section > Welcome Guide

Add new block tool moved

Add block tool is now on the right for all blocks.

On the right used to be a clue you were in a nested block

This will invalidate every previous tutorial and confuse new users looking at old tutorials.

No recently used block icons anymore either.

This change may have been in keeping with the distraction-free writing ideas so you could just type without that add block tool to distract you.

And may encourage more folks to use keyboard shortcuts to add blocks.

Paragraph block

Can change text color on individual words instead of all words

Headings block 

Can change the text color from the tools bar

Could always change the text color from the Block sidebar

Cover block 

Select minimum height in pixels

Make the overlay color a solid or gradient

Tricky order for making gradient work

• Upload media first
• Input text in either default paragraph block or heading block
• Then highlight the Cover block again to see the Dimensions and Overlay choices

Columns block

Rumor that the columns block supports a fixed width. Not true that I could find. It has long supported a percentage width. The problem I find with setting it to anything other than auto is that setting is impossible to pull back up again after the initial selection.

New text and background color support

Group block

New text color settings

Nested blocks will now inherit the colors set in the parent Group block

Nested blocks already inherited the background color, but this makes it easier to add text that is uniform across all nested blocks

Media & Text block

Can now link an image

Gallery block

Choose a size for all images in the gallery

Latest Posts block

Can now show a featured image instead of just a title

How this appears may be dependent on theme styling and where it is placed. May appear differently in content compared to in a sidebar.

New Buttons block

Replaces the current Button block

Can add more than one button, side-by-side

Styling choices may be theme-support dependent

Supports changing text color in the toolbar (you could always set the background and text color in the Block sidebar)

The link tool has been moved into the tool bar, but the Link settings is still in the block sidebar too.

Has style for background fill or outline that take on your theme’s button style color

Background color can be solid or gradient 

The default style for filled or outlined is still in the block sidebar too.

New Gradient Backgrounds

Now supported in Cover and Buttons blocks

Several presets

Can select linear or radial gradient and angle

What you can’t do is choose the gradient colors. You have to use the presets.

New Social Icons block

For social follow only

39 icons are included, with 6 of the most popular added by default

You must add the links to your profiles. Click the icon and enter the URL. The default icons that show are only ghosts and will not actually display on your page when viewed until you add the link. This is also why there is a default WordPress icon that is linked, otherwise you’d never see the block when looking at the preview or published page.

Add Link Label in the Block sidebar so screen reader users can discern the icon

Can change the order of the icons by selecting one and then using arrows above it

Click the + tool to add new icons

To Delete an icon, click to highlight it, then click the More ellipsis, then click Remove block. But careful, if you do that on the WordPress icon, it deletes the entire Social Icons block. So move it to the 2nd position first. And, after deletion it leaves orphaned code that you’ll need to go into the Code Editor view to fully remove.

Has 3 default styles for 

• Default – circle with logos in it, background color of circle will likely be theme style dependent
• Logo only – no background circle
• Pill shaped – background color will likely be theme style dependent

For increased speed on page load, this block uses Dashicons instead of an external symbol library like FontAwesome, which many other social blocks for Gutenberg use.

New Block Breadcrumb Bar

The tool tabs that appeared to the left when you hovered over a block are now gone.

Now there is a breadcrumb trail that appears at the bottom of the editor.

Will help you see the hierarchy of nested blocks and select the one you want to highlight.

New Select Tool

Allows to easily select a single block or a group of blocks.

Especially handy for selecting blocks that are nested.

Highlights the selected block in a solid border with the block type listed above it.

Featured image

Drag and drop a file into the Featured Image section of the Document sidebar.

Can also click the Set featured image area to bring to see the regular media upload window

Table block

Can add a caption below the table

TikTok Embed block

Embed videos from Tik Tok by inserting its link

Mobile toolbar

The toolbar is now stationary at the top of the screen instead of at the top of a block

Want to learn Gutenberg the fast and easy way?

Gutenberg Ninja is THE premier course that goes WAY beyond the basics.

Site Health Improvements

The Dashboard will have a new widget to warn admins of any security or performance related issues.

It will run periodically or you can click the link to visit the Site Health Screen.

If it has found a problem, there will be a button here that redirects to the Site Health screen for details.

Developer Changes

There have been a few changes to the core that may impact the way some of your plugins work.

They may also impact theme design.

Calendar widget

• Navigation tag has been moved to be after the table tag, to produce valid HTML code
• New CSS classes have been added too

Shortcodes

• The do_shortcode function will have a new alias as apply_shortcodes
• This could impact any plugin or page builder that uses shortcodes
• The do_shortcode will not be deprecated because so many plugins use it, but those devs are encouraged to switch over to the new way

Navigation Menu 

• Several CSS and JS classes for how the navigation menu is styled in the Customizer have been deprecated
• New hooks have been included for adding custom fields to the menu
• This is to clean up the classes ahead of a Navigation block that might come in WP 5.5

Custom Keyboard Shortcuts

• A registry has been created for developers to list their custom keyboard shortcuts for their blocks

Gradient Theme APIs

• Since gradient backgrounds are now supported on several blocks, developers can override the default presets with their own custom presets.

Style Changes

• Block paddings and negative margins have been completely removed.
• Will likely affect several block suite plugins that have fancy style capabilities now.
• It doesn’t mean you can’t have these things. It means that they are not available in the core. So a plugin would have to add that style code.

Speed Improvements

• The div wrappers from Rich Text and other blocks have been removed because they are redundant. This improves speed and simplifies the DOM tree of requests
• Favicon grab improvements change the way WordPress looks for the favicon file or presents a default backup. This will hopefully fix the speed drag when a favicon file cannot be found.