WordPress 5.9 has been released and it is loaded with brand new features and updates. It’s a lot to take in, so here at Newspack, we’ve organized and highlighted a few that you may find most useful!

New Blocks

Row Block

A new variation of the Group block. Blocks can be nested inside of it and arranged to sit side-by-side (similar to the Columns block). Nested blocks can be aligned left, right, center, or spread out, and set to wrap on mobile.

The Row block is an excellent alternative to the Columns block for certain layouts: it allows items to be placed on the same line and offers a visually appealing layout regardless of the screen size. It’s a good option for calls-to-action, or creating section headers with Heading block and link next to it.

Editor-wide Changes

New and Improved Highlight Tools

In the More Options menu on text-based blocks: a Highlight option has been added to let you add a background color on inline text.

The Text Color option has been renamed to “Highlight” with an “A” icon and now appears below the background Highlight item, with the highlighter icon.

Alignment

The Alignment option in the block toolbar now includes a ‘None’ option, so it’s no longer necessary to re-select the current alignment to turn it off again.

List View Modification

The List View, available in the top left corner of the editor, now includes the following enhancements:

  • The Options menu is now available on a per-block basis. It offers additional editing options such as insert before/after, copy, or delete blocks from the list.
  • Different levels of the list can be collapsed in order to easily navigate longer pages.
  • Blocks in the list view can also be reordered by clicking on their names, then dragging and dropping them.

Color Panel

The Color Panel that’s used for a number of blocks has a new design in WordPress 5.9. It displays a blank ‘transparent’ rectangle when no custom colors is selected. Your site’s custom colors still preview as usual underneath and selecting the rectangle will open the color picker.

To manually enter/edit a custom color not available in the site’s palette, click the “Settings” icon to make the ‘Hex’ field editable.

Typography Panel

The Typography Panel used for several blocks has also had an overhaul:

The available font sizes are now listed as their pixel size (16, 20, 36…) rather than their names (‘Small’, ‘Normal’, ‘Large’…).

A custom font-size value can be set by clicking the ‘Settings’ icon toggle to switch it to a numeric input.

To switch back to the block’s default font size, you can select the Options icon next to the Typography panel name and select ‘Reset all’ to undo all typography settings, or select the ‘Settings’ icon to toggle to the custom font size view, remove the font size, and leave the field empty.

Depending on the block, you can also click the Options icon in the Typography panel to add an Appearance dropdown (to change the font-weight), a Letter case option (to switch a block between default, title case and all-caps), and a Letter-spacing options:

Key takeaway: Our team found that there are some cases where the ‘Appearance’ options may not work. This may happen because:

  • The actual typeface you’re using may not include all of the weights listed — it depends on how it was designed. Some typefaces include 9 different weights, others only one or two.
  • If you’re using a non-web safe font (like from Google Fonts, Typekit, or if you’ve provided your own webfonts to upload), the weight may exist in the typeface, but it may not have been added to your site. All the Newspack child themes that use Google fonts only load the normal and bold weight by default.
  • Additional weights can be added to your site, but we recommend only adding what’s necessary — loading a lot of different font variations can affect site speed.

Block-specific changes

Cover Block

The Cover block has been updated to automatically set the text color based on the block’s settings, rather than always use white text by default. While it’s accurate overall, at times it can use dark text when it isn’t actually legible against the image and overlay you’ve selected. This often will happen with the block’s default settings.

Key takeaway: This change will affect new Cover blocks, and existing Cover blocks in your content if they’re in a post or page that is edited after the WordPress 5.9 update. In those cases, the text color will likely need to be manually updated using the block color settings if you find the automatic text color doesn’t have sufficient contrast.

The Gallery block now has the ability to add links to individual images.

Key takeaway: This is a super helpful addition to this popular block! However, the toolbars can be a bit odd when you’re editing an image’s caption. Both the block itself and the caption will have their own toolbars and each will have an edit icon — make sure you’re selecting the one in the top block toolbar to link your images!

Columns Block

The Columns block now has an option to stack columns on mobile. This has been the default behavior of the block since the block editor was born, so the option is toggled on by default.

Toggling it off will make the block display as columns on all screen sizes. Our block and theme styles have been updated to work with this change, but please report any issues you see.

Pullquote Block

The Pullquote block no longer has a “Solid background” block style; instead, it has the more standard ‘Background Color’ and ‘Text Color’ options. The block also has a ‘Border’ style panel (where you can change the weight, color, style, and border-radius), and the ability to edit the Typography settings.

Our theme styles have been updated to work with these changes, but please report any issues you see.

Quote Block

The Quote block now has a Plain block style that removes the default left border.

The Buttons block and Social Links block now display some of their parent block options in the child block’s toolbar – this means you can change things like the parent block’s width while you have one of the child blocks selected.

Key takeaway: In the Button block, this can be a bit confusing – you can end up with an alignment icon for the parent buttons block (first):

… and an alignment icon for the individual button you have selected:

That being said, this change makes these blocks easier to edit overall, as you don’t need to keep switching between the parent and child blocks to make changes.

For more information about WordPress 5.9, please don’t hesitate to check out the helpful video below: