What’s new in Gutenberg? (12 February)

This is the last release that is going to be fully included in WordPress 5.4, containing one week of updates from 45 contributors. The release cycle was temporarily shortened to align features with WordPress 5.4 Beta 1.

The Social Links blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. has been in the works since a few releases, but now it’s a stable (no longer experimental) block.

Adding a Social Links block.
Adding a Social Links block.

Rich text can now be coloured!

Adding inline colour to text.
Adding inline colour to text.

It is now also possible to display featured images in the latest post block.

Latest post with featured images.
Latest post with featured images.

7.5 🇹🇭

Features

  • Mark the Social Links block as a stable block 20134 19887 20074 20150 20101
  • Support adding featured images to Latest Posts block 17151
  • Add support for TikTok video Embeds 19345
  • Add inline text color support 16014
  • Add text color support to Columns block 20016

Enhancements

  • Add type and angle picking to the custom gradient component 19582
  • Add transform for button to buttons block 20063
  • Navigation block:
    • Implement new design for sub-menus 19681
    • Set inherit color to anchor elements 20038
    • Fix getting Navigation parent block 20032 20057
    • Set width in order to show caret 20075
    • Improve colors handling 20022
    • Rename background color CSSCSS Cascading Style Sheets. class 20018
  • Block Library: Avoid column width auto-adjustment when sibling width changes 19515 20169
  • A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility):
    • Incorporate settings in the edit state of the LinkControl component 20052
    • Announce all Notice components messages 15745
    • Button block: Remove title attribute 19735
    • Navigation block: Remove title attribute 19990
  • Image block: Keep existing caption if the stored one is empty 19641
  • Enhance the custom gradient picker UIUI User interface 20099

New APIs

  • Allow third-party keyboard shortcuts registration in the keyboard shortcuts modal 19965
  • Stabilize the AnglePickerControl component 20118
  • Add .wp-env.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. config file support to wordpress/env 20002
  • Blocks: Promote block variations to stable APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 20068
  • Mark the gradients theme API as stable 20107

Experimental

  • Add ability to disable the block popover through __experimentalUIParts.hasPopover option 19922
  • Add the __experimentalEditorSkeleton component to the block-editor package 20050 20132

Bug Fixes

  • A11y: Show open button when the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is closed and tabbing out of the content 19726
  • IE11 Compatibility: Add DOMRect polyfill 20110
  • Block Editor: Fix warning when rendering InnerBlocks 20082
  • Featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. appears cropped 20128
  • Fix predefined text colors used in the Group block on the frontend 20119
  • Use array form for contrast checkers. 20143
  • i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: make experimentalUseColors labels translatable 20112
  • Multi select: remove inserter between selected blocks 20096
  • Remove alignment options from nested Button blocks 19824
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Conform to URL Living Standard definition of valid URL 19871
  • Select the correct media in the media modal when replacing existing media 20100
  • Avoid resizing the editor canvas when opening the publish panel 19843
  • Fix Media & Text block styling when media is set to show on the right 20125
  • Fix excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. rendering in the Latest posts block 19669

Documentation

  • Docs: Contributor Guide update subpages 19939
  • Prettier: Update format-js to use default config, and update editor docs usage 20036
  • Target docs to manifest.json 15639
  • Update main project README 19743
  • Update the Getting Started Docs to use wp-env 20044
  • Typos and tweaks: 20055 20077 20025 20060 19470

Various

  • Block Editor: Update BEM syntax to CSS modifer guidelines 19738
  • Block Library: Standardize PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 function names used 20085 20039
  • Project Management Automation:
    • Log skipped tasks and retain wrapped task names. 20034
    • Support adding milestones for fork PRs. 20058
    • Avoid gracefully handling error 20009
    • Avoid milestone task for forks 20049
    • Call coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. setFailed with error message 20012
    • Check error object for parsed errors 20014
    • Guard against non-matching commits in addMilestone. 20147
    • Tolerate duplicate milestone 20011
    • Pull Request Automation: Avoid automation tasks for forked repository 20021
  • wordpress/env:
    • Fix GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ source pattern 20131
    • Fix syntax error where spread operator could fail 20113
  • Move existing icons to the wordpress/icons package 20091 20072 19959 20094 20087
  • Ensure the default Prettier config is used with lint-js when needed 20071
  • Data: Log first-pass useSelect errors 20122
  • Compat: Social Links: Remove legacy renderers from packages 20098
  • Core Data: Mark the getEntityRecordNoResolver selector as experimental. 20053
  • Core Data: Remove unused __experimentalUseEntitySaving hook. 20148
  • Hide the navigation block behind feature flag 20133
  • Fix Intermitent e2e test failures 20065
  • Move the e2e tests to the right folders 20135
  • Switch social link icons to import svg parts from primitives 19877

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress event (typing)
GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 7.5.06.491s34.695ms
Gutenberg 7.4.06.413s36.81ms
WordPress 5.36.331s75.19ms

#core-editor, #editor, #gutenberg