What’s new in Gutenberg (August 5)

WordPress 5.5 is around the corner and 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/ contributors have been busy fixing a number of important issues to make sure the editor on 5.5 is as stable as possible. Gutenberg 8.7 changelog reflects that with a number of fixes including important 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) ones.

At the same time, contributors are increasing the development pace on the next big projects. Global styles are being worked heavily on with the hope of shipping it by WordPress 5.6.

This release also saw a lot of improvements to the Post 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. suite that constitutes one of the important bricks for the Full Site Editing project.

8.7.0 🇹🇼

Enhancements

• Make “Attempt Block Recovery” the default option of block invalidation. (24263)
• Add a block example to the Buttons block. (24249)
• Make the padding for the nav block inserter content the same for all sides. (24084)
• Improve margin within the media replace popover. (24309)
• Move “Convert to regular blocks” button to the reusable block toolbar. (24066)
• Consistently autosave edits. (23962)
• Use Post Type label for Document tab in Settings HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. (17311)
• Update the Group block description. (24297)
• Remove bottom margin of components dropdown menu item. (24227)
• CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Block Patterns improvements:
  • Adds “Heading and paragraph” pattern. (24143)
  • Updates “Large header and a paragraph” pattern. (24142)
  • Updates the “Large header” pattern. (24141)
  • Updates the “Quote” pattern. (24140)
  • Updates “Two images” pattern. (24139) (23856)
  • Updates “Three columns of text with buttons” pattern. (24138)
  • Updates “Three buttons” pattern. (24137)
  • Updates “Two buttons” pattern. (24136)
  • Updates ‘”wo columns of text” pattern. (24135)
  • Update “Two columns of text with images” pattern. (24134)
  • Update the “Large header and button” block pattern. (24177)
• Block Directory: Use local assets with automatic asset detection. (24117)

New APIs

• Add support for delete operations to @wordpress/core-data entities. (21557)
• Add server-side handling for the block ‘align’ supports flag. (24122)
• Add isDestructive style to Button. (22921)
• wordpress/create-block: Enable loading translations for created blocks. (24125)

Bug Fixes

• Fix htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. mode for non light blocks. (24335)
• Fix block movers overlapping. (24349)
• Fix List RichText backward compatibility for multiline root tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). (24324)
• Block patterns: Fix translatable strings. (24317)
• Preserve the seconds when editing dates using the TimePicker component. (24305)
• A11y:
  • Announce block selection changes manually on windows. (24299)
  • Fix arrow navigation in the LinkControl suggestions. (24222)
  • Avoid focus style from being cut on the categories panel. (24197)
  • Avoid focusing the block selection button on each render. (24195)
  • Avoid rendering the clipboard textarea inside the button. (24194)
  • Fix missing focus outline in Add New Tag. (24187)
  • Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover. (24186)
  • Fix the gallery buttons focus style. (24157)
  • Update the editor landmark regions. (24196)
  • Mover control: Remove drag cursor. (23759)
• Fix block insertion place after clicking Browse All in the inline inserter. (24285)
• Fix last.fm svg icon alignment. (24278)
• Cover: Fix padding controls showing null units. (24251)
• Consistently show the default style variation if none provided. (24217)
• Fix gradient RGBA/HSLA inputs’ width. (24214)
• Popover: Fix arrow color to match content border color. (24208)
• Fix dragging multiple blocks downwards resulted in blocks inserted in wrong position. (24183)
• Fix Button block colors in the editor. (24153)
• Fix the save shortcut in the code editor. (24151)
• Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher notices when a block hasn’t declared ‘supports’. (24131)
• Fix Block Directory icons. (24086)
• Block Breadcrumb: Fix arrow direction in RTL. (24074)
• 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.:
  • Fix missing plural forms for block related strings. (24071)
  • Merge similar translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings in the RSS block. (24159)
  • Merge similar translation strings – tables. (24169)
• useBlockSync: Fix race condition when onChange callback changes. (24012)
• Allow enter to insert line breaks even if template is locked. (23330)

Experiments

• Full Site Editing and Site editor:
  • Add alignment support to post content block. (24014) (24077)
  • Post Title Block: Add style attributes. (24246)
  • Remove more initial PHP state. (23775)
  • Template Part: Improve title editing interactions. (23661)
  • Update the Post author, 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. and Comment blocks to use lightBlockWrapper. (24253)
  • Query blocks: Support wide alignments in the editor. (24229)
  • Post Comments Block: add block alignment support. (24226)
  • Post Excerpt block: Added icon and description to Post Excerpt block. (24203)
  • Post Date block: Added Post Date icon and updated block with icon and desc. (24178) (24225)
  • Post Author block: Added a description. (24171)
  • Post Comments Counts: Add style attributes. (24167)
  • Post Comments Form: Add style attributes. (24162)
  • Post Author and Post Excerpt: change editor selector class. (24104)
  • Post Comments block: add style supports for text and background settings. (24080)
  • Post excerpt block: Add color, fontSize, lineHeight, and text alignment. (23945)
  • Add Post Tags block description and icon. (23496)
  • Add a description to the Post Title block. (23494)
  • Update Post Author block to use __experimentalColor and __experimentalLineHeight. (23044)

• Global styles:
  • Fix link color style property name in global styles. (24296)
  • Fix merge algorithm. (24294)
• Navigation Block and screen:
  • Fix Navigation Block submenu being overlapped by Cover block overlay. (24062)
• APIs:
  • Add initial support for themes to control the editor. (24275)
  • Prefix useSimulatedMediaQuery __experimental. (24279)
  • URLInput Customizable control rendering. (24115)

Documentation

• Update Gutenberg FAQ with more recent information. (24202)
• Clarify custom link color documentation for themes. (24056)
• Add a link to the WordPress Data guide. (24327)
• Document the new block tools theme support and core block patterns. (24265)
• Replace the demo link of the Gutenberg Storybook in the documentation. (24212)
• Docs: Update default values for Popover props ‘noArrow’ and ‘position’. (24207)
• Added missing documentation link for contributor handbook. (24179)
• Docs: Convert Block Registration RFC to the Block Metadata document. (23832)
• Typos and tweaks: (23899) (24057) (24033) (24211) (24100)

Code Quality

• Improve rootClientId comparison in useBlockDropZone. (24307)
• Clarify wp.blocks.createBlock error message. (24287)
• Convert blocks to function component with hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.:
  • BlockInvalidWarning. (24284)
  • ReusableBlockConvertButton. (24015)
• Add missing prop to WPBlockVariation type definition. (24110)
• Remove deprecated blockType.context support. (24155)
• Wrap LinkControlSearchInput in forwardRef. (24119)

Build Tooling

• Perf Tests: Set up branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". only once for all test suites. (24123)
• Revert “Build: Use .min.js suffix for bundled JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.”. (24239)
• Add a GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. Diff to the output of the static checks job on failure. (24154)

Various

• Fix intermittent Navigation block test failure. (24146)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 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.

Version	Loading Time	KeyPress Event (typing)
Gutenberg 8.7	6.97 s	26.63 ms
Gutenberg 8.6	6.84 s	27.15 ms
WordPress 5.4	9.55 s	43.81 ms

Kudos for all the contributors that helped with the release. 👏

#core-editor, #editor, #gutenberg-new