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.
Wow! You’d think the folks at WP might cut us some slack & delay this with all the other stuff we have to deal with right now. Unless there are some vital security issues, I may wait a bit before dealing with this update.
There are too many devs counting on them to keep the upgrade schedule on track to delay it. But it really puts a hardship on companies that have to train their employees and such right now.
Thanks for taking the time to put together this nice round up and I have to say that, on the design side, I’m looking forward to these new features.
About the only one I don’t like is the distraction free option. I’ve have the Gutenberg plugin running on one of my sites and that option did not make this easier, faster or better for me.
I’m not crazy about the distraction free writing either, but those who use it love it. And guessing that Matt wants to ensure more folks know that it’s available.
I would not run the Gutenberg plugin at this point, as it has all manner of beta stuff in it that is not always stable and changes too rapidly.
WOW!! MaAnna, thank you for this VERY thorough review!! This is really in-depth. I appreciate the time it took to do this. Thank you!
You’re welcome!!!! There was a LOT more to this update than was being reported. I was a little surprised by that too.