What’s new in Gutenberg? (21 October)

9.2 was the final release to make it into 5.6 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.! Featured goodies in this release are:

Support for video subtitles 🎉

Subtitles dropdown on video 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.. Props to @jorgefilipecosta for the screenshot.


Ability to transform multiple selected blocks into a Columns block:

Transforming three images into a three-column columns block.


And background patterns in Cover blocks!

Adding background patterns to a Cover block. props to @retrofox for the gif.

9.2 🇭🇺

Features

  • Add video tracks functionality. (25861)
  • Transform multiple selected blocks to Columns block. (25829)
  • Cover: Add repeated background option. (26001)

Enhancements

  • Add dropdown button to view templates in 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.. (26132)
  • Gallery block: Use image caption as fallback for alt text. (26082)
  • Table 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. + 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. v2. (26065)
  • Refactor document actions to handle template part titles. (26043)
  • Info panel layout improvement. (26017)
  • Remove non-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks from default editor content. (25844)
  • Add very basic template information dropdown. (25757)
  • Rename "Options" modal to "Preferences". (25683)
  • Add single column functionality to the Columns block. (24065)
  • Add more writing flow options: Reduced UIUI User interface, theme styles, spotlight. (22494)
  • Add option to make 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. a link. (25714)
  • Widgets Screen:
    • Add legacy 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. inspector card component. (26142)
    • Show the legacy widget name in list view. (26138)
    • Add unsaved changes warning to widgets screen. (26081)
    • Display Widget Area’s name and description in the sidebar. (25943)
    • Widgets editor: Add basic options for extensibility. (25758)
    • Disallow multiple instances of reference widgets. (26148)
    • Embed widget type. (26093)
    • Add widget type endpoint. (26042)
    • Make edit-widgets package public. (26016)
    • Uncollapse widget area when block is dragged over. (25992)
    • Add meaningful labels for the Widgets screen ARIA landmarks. (25867)
    • Load custom block assets. (25826)
    • Test for storing raw htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. in widgets. (24886)

New APIs

  • Make block supports server-side explicit. (26192)
  • New hook: UseDebounce for speak function. (25948)
  • Make the custom spacing theme support flag and block support API stable. (25788)
  • Mark the line height support flag as stable. (25769)
  • Mark the font size support flag as stable. (25695)
  • Mark the color support flag as stable. (25694)
  • Add a button to allow resetting the ComboboxControl value. (25692)
  • Block API: Light block edit/save symmetry. (25644)
  • Block API: Stabilize light block hook. (25642)
  • Inner blocks: Try hook approach. (25633)
  • API: Stabilize localAutosave() as autosave( { local: True } ). (20149)

Experiments

  • Query Block:
    • Add Custom Post Types support in Query block. (25903)
    • Set focus on Query block on insertion. (26267)
    • Add loading message to Query block while fetching results. (26199)
    • Add no results placeholder in Query block. (25984)
  • Site Editor:
    • Clear the active menu state when closing the sidebar. (25957)
    • Add missing localization to the templates sidebar. (25897)
    • Mount both wp_template and wp_template_part EntityProviders to avoid remounting. (25870)
    • Navigation templates. (25739)
    • Update Navigation Panel Toggle UI. (25622)
    • Move page switcher to navigation panel. (25620)
    • Add template switcher to navigation panel. (25615)
    • Pass editor features dynamically. (25795)

Bug Fixes

  • Fix for current_parsed_blocks value when block has inner blocks. (26291)
  • Fix updating clientId mapping. (26290)
  • Fix typo in wrapper attributes. (26282)
  • Fix: Keep the ‘Insert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org’ entered value on ImagePlaceholder. (26262)
  • Fix align order in heading block. (26260)
  • Widgets screen: Add a 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. function to registerCoreBlock. (26259)
  • Use ToolbarButtons instead of Buttons in the Legacy Widget block’s toolbar. (26258)
  • Widgets screen: Add "Browse all" option to the inserter. (26256)
  • Fix: Post schedule label showing wrong time if site and user timezones did not match. (26212)
  • Fix Site Title block’s heading levels appearance. (26202)
  • Writing flow: Fix in-between inserter for aligned blocks. (26197)
  • Fix Site Tagline block’s text alignment. (26191)
  • Fix separator and spacer blocks after api v2 refactoring. (26157)
  • Global Styles sidebar (blocks tab): Protect against not registered blocks. (26149)
  • Block templates: Recognize and convert old or derivative block types to their canonical form. (26147)
  • Fix editing Legacy Widgets doesn’t enable "Save" button. (26144)
  • Fix Cover width regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (26143)
  • Fix tabbing in widgets not triggering auto-scrolling. (26139)
  • Cover block: Improve overlay opacity handling. (26133)
  • Fix icons type annotation. (26129)
  • FullscreenMode: Remove the is-fullscreen-mode CSSCSS Cascading Style Sheets. class from body on unmount. (26103)
  • Make sure Global Styles CPT includes a theme reference. (26061)
  • Restrict legacy widget block to only being a child of widget area. (26053)
  • Fix/wrong classes search block. (26052)
  • Fix drag and drop in empty widget area. (26051)
  • Fix unit tests by updating cover block fixtures. (26044)
  • Upgrade autoprefixer to fix fit-content in firefox. (26019)
  • Fix widget area title font. (26018)
  • Widgets screen: Fix WP Adminadmin (and super admin) Bar Widgets screen link. (26015)
  • Hide parent selector in widget area. (26011)
  • Document Actions: Fix unexpected label wrapping. (26004)
  • Fix template part theme identifier. (25995)
  • Show all widget areas on widget screen. (25977)
  • Fix block editor example in storybook. (25976)
  • Fix 9:16 aspect ratio styling. (25972)
  • Fix gallery caption not centered in the front-end issue. (25962)
  • Widgets screen: Add save keyboard shortcut. (25944)
  • Widgets screen: Remove default hover background in panel title. (25939)
  • Fix failing previews end-to-end test. (25938)
  • Fix input control drag and box control change. (25933)
  • Fix end-to-end tests related to template parts. (25923)
  • Fix insertion indicator margin. (25893)
  • Fix blue line indicator not showing at the end. (25849)
  • Fix incorrect attribute type specified in Search block. (25813)
  • Document Actions: Fix Block Editor Inserter Overlap with Document Titles. (25801)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warning in widget utils REST controller. (25797)
  • Include edit-widgets php files in build. (25792)
  • Docs: Fix typo in 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/. Workflow. (25779)
  • Widgets screen: Fix widget-area accessibilityAccessibility 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). (25732)
  • Widgets screen: Fix insertion point in widget areas. (25727)
  • Document Settings: Fix document title hover and select animations. (25719)
  • Define text color for warning message component. (25713)
  • RichText: Remove native props for web. (25700)
  • Use h3 in the legacy widget title. (25690)
  • Navigation block: Use unbounded query when requesting top level pages. (25689)
  • Document Actions: Fix document title misalignment with an open nav sidebar. (25630)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. error in wordpress/block-editor documentation usage example caused by applying args to setState call. (25492)
  • Cover Block: Show spinner while uploading. (25401)
  • Button block: Reduce chance of style conflicts. (24919)
  • Fix skipped 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. transforms in raw handling. (22840)
  • Media links: Fix linking for images inserted from URL. (22195)
  • Refactor reusable block edit component using hooks (and fix interactions with multiple instances of the same reusable block). (21427)

Performance

  • Paragraph: Avoid selector to improve performance. (26150)
  • Remove transition on block selection indicator. (25974)
  • Widgets screen: Preload request to /sidebars. (25726)

Documentation

  • Bring the block-based theme tutorial up to date. (25830)
  • Add more CI status badges to README. (26090)
  • Getting started: MAMP: Add tip to fix WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/. (26057)
  • Update colors readme with additional definitions. (25954)
  • Document isMultiBlock param for block transforms. (25952)
  • Update CI status badge in README. (25907)
  • Adds missing Curly brace. (25748)
  • Add documentation for colors component. (25567)
  • InspectorAdvancedControls: Add README.md. (25566)
  • Add documentation for useResizeCanvas. (25558)
  • Add/block navigation component readme. (24882)
  • Update Block Based Themes Documentation. (25710)

Code Quality

  • Pass all extra attributes down in get_block_wrapper_attributes. (26280)
  • Editor: Refactor PostFormatPanel to use React hooks. (26273)
  • BlockListBlock: Reduce passed props. (26251)
  • Editor: Refactor PostFormat to use React hooks. (26238)
  • Latest posts: Use hooks + API v2. (26122)
  • Latest comments: API v2. (26113)
  • Categories block: Use API v2. (26112)
  • Rename ReusableBlocksButtons to ReusableBlocksMenuItems. (26099)
  • Reusable block: Use API v2. (26091)
  • Gallery block: Use hooks. (26088)
  • Pullquote block: Use hooks + API v2. (26068)
  • Components: Start adding types progressively. (26066)
  • File block: Use hooks + API v2. (26063)
  • HTML block: Use hooks and API v2. (26055)
  • Update all blocks to API v2. (26054)
  • editor: Remove two unused registry controls. (26048)
  • Tweak styles of the document actions area. (26038)
  • Site Editor: Navigation panel replace hardcoded menu strings with constants. (26026)
  • Move left sidebar state to redux. (26003)
  • Refactor Categories to function component. (25806)
  • Classic block: Use hooks. (25737)
  • Remove animation from mover buttons. (25728)
  • Move widget-area to edit-widgets. (25673)
  • InnerBlocks: Add select dependencies. (25672)
  • Refactor Buttons block native edit component to use hooks. (25636)
  • Data: Build the basic data controls into every store. (25362)
  • Block Editor: Use optional chaining and nullish coalescing instead of Lodash.get. (23632)
  • Refactor Latest Comments block to use function component. (23557)
  • WordCount: Add types. (22077)

Security

  • PostCSS Plugins Preset: Update vulnerable dependency. (26140)

Breaking Change

  • Add separate widgets endpoint. (25958)

Various

  • Stabilize batching endpoint as v1. (26295)
  • Make batch opt-in more expressive. (26292)
  • Remove experimental sidebars endpoint shim. (26288)
  • Warn about using core/batch-processing store. (26287)
  • Remove WP_REST_Widget_Utils_Controller class. (26274)
  • Minor iterations to grouping for preferences panel. (26198)
  • Allow transform to Columns from a single block. (26185)
  • Use batch processing in edit-widgets package. (26164)
  • Minor updates to wordpress/edit-widgets for easier Core integration. (26136)
  • TextareaControl: Use CSS-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. (26131)
  • Add template lock attribute to column and group. (26128)
  • Reusable blocks support for widgets editor. (26097)
  • Bump @actions/core from 1.0.0 to 1.2.6. (26087)
  • First pass at using the new sidebars and widget endpoints. (26086)
  • Don’t rely on the exact count of registered widgets. (26085)
  • Try: Make class and style tests less brittle. (26079)
  • Components: Remove size prop from Dashicon. (26067)
  • Adjust media-text attributes to default stacked on mobile to true. (26041)
  • Support batch requests in data layer. (26024)
  • Fallback for dropcap when experimentalFeatures is not present. (25979)
  • Social Links: Update Placeholder experience when first inserting Social Links. (25941)
  • Check that get_current_screen is callable. (25935)
  • Social Link: Rename mail to email. (25924)
  • Autocomplete: Use hooks. (25922)
  • Skip broken template-part end-to-end test until it can be fixed. (25918)
  • Heading block: Add wide and full width options. (25917)
  • Social Links: Avoid conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with themes ul text-indent. (25916)
  • Site editor: Store navigation panel’s active menu state in the store. (25906)
  • Version bump to 9.1.1. (25904)
  • Export and document LinkControl’s building blocks. (25901)
  • Prevent networknetwork (versus site, blog) requests related to ephemeral posts in the widgets editor. (25899)
  • FSE Navigation Sidebar: Move navigation sidebar in DOM hierarchy. (25884)
  • Template part selection component – fix keyboard controls. (25881)
  • FSE Document actions – wrap with heading. (25874)
  • Extract wordpress/reusable-blocks from wordpress/editor. (25859)
  • Unify help description text styling. (25852)
  • BaseControl: Use CSS-in-JS. (25842)
  • Iterations on options modal. (25837)
  • BlockSelectionClearer: Use hooks. (25824)
  • Update pull request documentation URLs. (25815)
  • Add a dark mode to the post title. (25796)
  • Automatically generate required preset classes. (25768)
  • Ensure focus of input when InputControl spinner arrows are pressed. (25753)
  • External Link: Use CSS-in-JS. (25751)
  • Update improve backward compatibility for deprecated settings. (25738)
  • Initialize the state before rendering widgets editor. (25736)
  • Add color palette edit functionality to global styles. (25711)
  • UnitControl: Enable keyboard access (via tab) to unit select by default. (25704)
  • Add EditorStyles CSS to the widgets editor. (25699)
  • Display before_widget/after_widget when rendering WP_Widget_Block. (25693)
  • Remove the right margin for the right-most list items in the lastest posts block. (25688)
  • Update and move some Query filters. (25674)
  • Remove duplicate key from tsconfig.base.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.. (25664)
  • Try adding a ‘spotlight mode’ type effect when template part or child is selected. (25656)
  • Gallery: Add labels to img, figure and figcaption elements for accessibility. (25560)
  • Navigation component: Add back button click handler. (25556)
  • Hide the quick side inserter when the user is typing. (25548)
  • Add border to block "Edit as HTML" style. (25539)
  • Show PostFeaturedImage in editor. (25412)
  • Don’t allow duplicate selectors in styles. (25399)
  • Gallery: Add a margin declaration. (25291)
  • Page parent selector with ComboboxControl. (25267)
  • Add Align support to Separator block. (25147)
  • REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.: Introduce batch controller. (25096)
  • Upgrade TypeScript to v4. (24892)
  • Use UnitControl instead of RangeControl for column width. (24711)
  • Add UI tests to unsupported block editor. (23729)
  • Add a description to the Site Title block. (23462)
  • Add storybook story for the FocusableIframe component. (22324)

Performance benchmark

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/ 9.25.1s31.29ms
Gutenberg 9.15.3s31.03ms

Kudos to all the contributors that helped with the release! 👏

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