What’s new in Gutenberg? (30 September)

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/ 9.1 is out with almost 200 commits and 77 contributors! The main focuses for this release are iterations on the main projects for WordPress 5.6: the Widgets Screen and 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. 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..

Important progress has been made on the Global styles project with the possibility to use the theme.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 to control the block editor features and presets (color palette, font sizes, enabling/disabling features).

Also, the release includes some nice little improvements to the UIUI User interface and several blocks. Among these changes, the block patterns are now organized per categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the block inserter to help navigate the list of available patterns.

9.1 🇲🇹

Features

  • Add “open in new tab” feature to Social Links Block. (25468)
  • Add Image Size control to the Media & Text block. (24795)

Enhancements

  • Inserter: Add block pattern category selection. (24954)
  • Reduce minimum height to 1px for the Spacer block. (25528)
  • Show the Fullscreen keyboard shortcut. (25395)
  • Improve the Audio block shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. transform to account for all sources. (25114)
  • Code block: Allow HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. editing & rich text content. (24689)
  • Remove appender from unselected Buttons and Social Icons block. (25518)
  • Widgets Screen:
    • Match the post editor inserter design. (25681)
    • Register legacy widgets as block variations. (24905)
    • Use the default block list appender for the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas. (25635)
    • Add titles to Legacy Widgets. (25638)
  • Buttons block: Lighten editor DOM. (23222)
  • Copy: Reword block settings menu item labels. (22955)
  • Add a tooltip to the Drag & Drop handle. (25606) (25614)
  • 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):
    • Add aria-haspopup property to the BlockNavigation component. (25605)
    • Add aria-haspopup property to the TableOfContents component. (25603)
    • Add aria-haspopup to the ToolSelector. (25600)
    • Add aria-haspopup to the MediaReplaceFlow button. (25597)
    • Add aria-haspopup attribute to CustomGradientBar component. (25571)
    • Add aria-haspopup to CircularOptionPicker component. (25564)
    • Add aria-describedby to featured-image button. (24888)
  • Don’t show heading ancestor blocks in Document Outline. (25599)
  • Support the default link config for the Gallery and Image blocks (image_default_link_type). (25578) (25582)
  • Social Icons Block: Let icons wrap. (25334)

New APIs

  • Add new ComboboxControl. (25442)
  • Data Controls: Add new syncSelect control. (25336)
  • DateTimePicker: Add support for highlighting days. (22032)

Bug Fixes

  • Widgets Screen:
    • Auto expand the last selected widget area when opening the inserter. (25669)
    • Ensure all widgets are properly initialized when they’re added, do not unmount widgets once they’re mounted. (25645)
    • Fix Legacy widget block previews and use iFrames. (25443) (14643)
    • Report save errors. (25408)
    • Fix global inserter. (24908)
  • Fix RangeControl direct entry in input field. (25609)
  • A11y:
    • Fix the color contrast in the code editor. (25593)
    • Fix Publish 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. Cancel button not usable through screen readers. (25441)
    • Fix keyboard navigation on the Image block toolbar. (25127)
    • More block: Use an actual placeholder for input text. (23836)
  • Fix nested container smart margins. (25527)
  • Fix add_filter instead of apply_filters. (25512)
  • Fix the WordPress embed preview in the editor. (25370)
  • Remove Embed block aspect ratio classes on url change. (25295)
  • Remove duplicate help item. (25283)
  • Fix Block Directory author average rating formating. (24732)
  • wordpress/api-fetch:
    • Fix preloading middleware referencing stale data. (25550)
    • Check nonce 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. value before skipping adding it. (25458)
  • Use esc_html instead of esc_attr in the Archives block. (25476)
  • Fix Canceling Drag and Drop using ESC key. (25317)
  • Cover block: Add explilcit box-sizing style. (25115)
  • Use a ComboboxControl for the post author selector to fix loading issues for sites with a big number of authors. (23237)

Performance

  • Avoid relying on DOM events to measure the loading time. (25288)

Experiments

  • Site Editor Screen:
    • Fix wrong close label in the block inspector. (25424)
    • Add basic template information to editor header. (25320)
    • Fix the footer styling. (25152)
    • Add a reset button to global styles sidebar. (25426)
    • Show document subtext if template part child is selected. (25544)
    • Add navigation panel. (25506)
    • Fix site base URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (25409)
  • Post and Site Blocks:
    • Add link option in PostTitle block. (25341) (25397)
    • Register the Site Logo block using register_block_type_from_metadata. (25289)
  • Themes and global styles:
    • Support defining colors and gradients config from theme.json. (25419)
    • Support defining font sizes config from theme.json. (25516)
    • Support custom units on theme.json. (25217)
    • Add separate support keys for color and background color. (25314)
    • Allow themes to enqueue custom CSSCSS Cascading Style Sheets. variables via theme.json. (25446) (25619)
    • Refactor theme.json format. (25301) (25407)
    • Update theme json documentation to account for latest changes. (25369)
  • Block API: Introduce useBlockWrapperProps hook to use light block DOM in the editor. (23034) (25679) (25554) (25515)
  • Navigation block and screen:
    • Handle block menu items. (24846)
    • Avoid auto-focusing Navigation block in Navigation screen. (25592)
    • Change the block description. (25531) (25555)
    • Allow Social Links within Navigation Block. (25357)
    • Wrap navigation editing features with filters. (25329)
    • Add move markers to list view. (25205)
  • Iterating on the Navigation Component (25608) (25495) (25572) (25540) (25520) (25507) (25367) (25364) (25340) (25327) (25281) (25280)

Documentation

  • Add a data format and flow architecture document. (25299)
  • wordpress/env: Add documentation for inspecting the docker compose file. (25666)
  • Add new block supports page to the handbook. (25647)
  • Block Directory: Add developer documentation. (25591)
  • Move custom-fields note to the ‘Register MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Field’ documentation. (25584)
  • Add Block Editor Components documentation:
    • AlignmentToolbar (25210)
    • BlockFormatControls (25573)
  • Add Caveats section for MAMP. (25444)
  • Add FormTokenField story. (25439)
  • Improve documentation for the data registry control and selector creators. (25335)
  • Update git workflow documentation. (25164)
  • Refresh the Getting Started guide. (25090)
  • Update 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/. troubleshooting guide. (24105)
  • Enhance the Block Context documentation. (25272)
  • Typos: (25359) (25653)

Code Quality

  • Update the Dashicon component to rely on the font that ships with WordPress. (20003)
  • Add new $gray-200 SASS variable and use for skeleton borders. (25491)
  • Block Editor: Remove empty module focus-detector. (25561)
  • Image block: Avoid remounting to focus caption. (25493)
  • Add explicit boxSizing style to Placeholder component. (25463)
  • Remove classic block code used to support WP 4.9. (25365)
  • Add RichText value type definition. (25363)
  • Avoid global DOM dependencies. (25332)
  • Use controls from the Data Controls package instead of local ones. (25235)
  • RichText: Simplify withFormatTypes as hook. (23145)
  • Video block: Use 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.. (25513)
  • Remove wp_area custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept.. (25497)
  • Post 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.: Remove redundant condition. (25490)
  • Move legacy-widget block over to edit-widgets package. (25371) (25404)
  • Don’t use percent units for line-height. (25398)
  • Change wording and names to not include “whitelist”. (25396)
  • Don’t discard all promises results when one of them rejects. (25302)
  • Block Directory: Switch to blocks.registerBlockType filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. (25264)
  • Fix some javascript warnings. (24996)

Various

  • Remove the Block-based widgets editor from the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (25626)
  • Cover block: Remove default position (center/center) className from rendering. (25346)
  • Fix the default label position in SelectControl. (25427)
  • DropdownMenu tooltip default to true. (25391)
  • Pass block pattern name when using replaceBlocks and insertBlocks. (25165). (25433)
  • Babel Preset: Update Babel version to 7.11.x. (25351)
  • InputControl: Remove floating label variant. (25308)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.16.9s29.04ms
Gutenberg 9.06.5s29.19ms
WordPress 5.56.5s28.01ms

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

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