What’s new in Gutenberg 10.2? (17 March)

It’s that time of the fortnight again: We’ve just published a new release of 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/! Version 10.2 brings to you a number of additions to Full-Site Editing (FSE) and Global Styles, and a sizeable list of improvements to the editing experience, as well as bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Offering Patterns on 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. setup

Introducing some initial explorations on how specific patterns can be better surfaced from a block’s placeholder state. Upon inserting a Query block there’s now a setup step that allows picking a block pattern for it to use. This allows users to start with a good design basis. Note that this goes beyond what block variations afford, as it’s an 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. that can directly connect with a block pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The candidate block patterns are fetched via a new API that allows querying for patterns that include a given block type.

Alternatively, the user has the option to “start empty”, in which case they’ll be able to choose from the existing CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block variations (e.g. Title & Date, Title & 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., etc).

Spacer Block width can be adjusted (in Navigation Block)

When inserted into a parent block that dictates a horizontal orientation (such as the Navigation Block), the spacer block’s width (rather than height) can now be adjusted. This makes some new cool customizations possible on horizontally-stacked blocks.

Transform Media & Text to Columns

It has been possible for a while to transform any single block into a Columns block (with a single column). For the Media & Text block, that behavior is unlikely to produce the desired outcome. Thus, when transforming a Media & Text block into a Columns block, it will now result in two columns (and all the relevant fixings from the original block).

Hide writing prompt from subsequent empty paragraphs

Rather than showing the “Start writing or type / to choose a block” prompt in each of a number of subsequent empty paragraphs, we now only show it in the first one.

10.2

Features

  • Template part block: Add category panel. (29159)

Enhancements

  • Add check for button text before rendering button block. (29717)
  • Skip CSSCSS Cascading Style Sheets. minification via PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (29624)
  • Restore the margins of blocks relying on the figure element. (29517)
  • Add Columns transform from Media & Text. (29415)
  • Fix: Invert gallery gravity. (29367)
  • Components: Try to make the order of fills stable in regular slots. (29287)
  • Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. (29110)
  • Hide writing prompt from subsequent empty paragraphs. (28275)

New APIs

  • Plugins: Add scoping functionality to the Plugins API. (27438)

The registerPlugin() function (in the @wordpress/plugins package) now accepts a scope argument that will limit that pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to be displayed only by <PluginArea /> components with a matching scope prop. See #27438 for more details.

Bug Fixes

  • Reusable Blocks:
    • Fix editor crash when converting block with visible styles to reusable (after a save and page reload). (29059)
    • Fix reusable block crash when converting a just created reusable block to blocks. (29292)
  • Buttons Block:
    • Buttons: Fix links inside links. (29273)
    • Fix legacy button center alignments inside the buttons block. (29281)
  • Cover Block:
    • Fix cover block content position not migrating correctly from deprecated version. (29542)
    • Fix solid-color only cover has small gray border in the editor only. (29499)
  • Social Icons and Links:
    • Fix social icons vertical spacing issue. (29657)
    • Yelp: Fix foreground color, make background transparent. (29660)
    • Social Links: Replace CSS variables with block context approach. (29330)
  • Table of Contents block:
    • Fix links when in archive loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. or when using “Plain” permalink structure. (29394)
    • Fix class attribute. (29317)
  • Add theme styles in the site editor. (29704)
  • Fix broken links to the block editor developer handbook. (29663)
  • Fix in between inserter edge case. (29625)
  • Fix the button component styles when used with a dashicon. (29614)
  • Revert moving is-typing class. (29608)
  • Fix inline block styles minification issues with calc(). (29554)
  • Packages: Update the publishing command for npm with next dist 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.). (29379)
  • Ignore build folders when native unit tests. (29371)
  • Fix mobile issue template label. (29344)
  • Interface: 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/. warnings triggered in ActionItem component. (29340)
  • Search block: Add missing space to provide valid HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (29314)
  • Blocks: Ensure that metadata registered on the server for core block is preserved on the client (try 2). (29302)
  • Fix off-center appender in some themes. (29290)
  • Add enableCustomSpacing to block editor settings. (29277)
  • Border Radius Support: Fix application of zero radius values. (28998)
  • Fix Document Outline mouse click. (28589)
  • Fix typos in template part area tags. (29937)
  • Gallery Block: Fix the crop images setting. (29823)
  • Fix Error: Could not process the ‘wp-config.php’ transformation. (29800)

Performance

  • Revert “Block edit: Avoid memoized block context in favour of useSelect”. (29621)

Experiments

  • Global Styles:
    • Do not add padding sub-properties if there’s no values in 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.. (29712)
    • Fix specificity 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. of blocks with single classes as selectors. (29378)
    • Fix specificity issue between theme and user styles. (29533)
    • Custom Link Color: Do not apply to buttons. (29557)
    • Implement skip serialization for color key in style att. (29253)
  • Full-Site Editing:
    • Site Title: Add text decoration and text transform controls. (29622)
    • Make border work on the site editor. (29618)
    • Prevent clicking on tag and category links in the site editor. (29583)
    • Print nothing in the front end if there are no results in Query block. (29521)
    • [Query block] Remove exclusion of current page id. (29432)
    • Handle missing categories/tags in Query block. (29424)
    • Query block setup with block patterns integration. (28891)
    • Update template descriptions for clarity and humanity. (29531)
    • 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 the template area unassigned type string. (29617)
    • Template Part: Prevent infinite recursion. (28456)
    • Update title, description, and icon of Post Categories. (29400)
    • Show Site Logo’s block toolbar when selected, after the editor loads. (29336)
    • Remove delete toolbar option from Site Logo. (29331)
  • Navigation Editor and Block:
    • Allow very thin menus. (29555)
    • Refactor and simplify navigation block CSS. (29465)
    • Make navigation placeholder state visible in dark themes. (29366)
    • Update navigation editor menu selection dropdown. (29202)
    • Make Spacer block width adjustable and add it to Navigation block. (29133)
    • Navigation: Try adding navigation link variants via server. (29095)
    • Navigation Editor: Allow menu renaming. (29012)
  • Group Block: Add support for custom border settings. (29591)
  • Pass block settings to the client for all blocks. (29474)
  • Button block: Add color support via block.json. (29382)
  • Add/new nav link icon. (29369)
  • Temporary hack to render blocks in 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.. (29365)
  • Fix 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. not showing in the widgets screen. (29282)
  • Fix: More resilient appender CSS. (28908)

Documentation

  • Add block variations page to Block API summary. (29725)
  • Update Readme of Animate Component to remove todo comment. (29702)
  • Docs; Organize contributors section using READMEs. (29688)
  • Remove mid-paragraph newlines. (29674)
  • Update Versions in WordPress to include release notes. (29532)
  • Extract block variations API into its own handbook page. (29515)
  • Docs: Fix deprecation message to be clear. (29451)
  • Fix typo in block-based-themes.md. (29410)
  • Fix typo in modularity. (29405)
  • Fix typos in git workflow documentation. (29324)
  • Docs: Table of contents – fix typos. (29319)
  • Add NVDA instructions to the 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) testing documentation. (29312)
  • Component Systems: Update references to external module. (29233)
  • Docs: Add info about npm release types and their schedule. (29028)
  • Docs: Update slug for block-based theme tutorial. (25839)

Code Quality

  • Rename load_separate_block_styles to load_separate_block_assets. (29703)
  • Update the minimum WordPress version required by the gutenberg plugin too 5.6. (29701)
  • Components: Ensure that SlotFill does not use portals in React Native. (29631)
  • Remove the subheading block. (29627)
  • useFocusFirstElement: Include useRef. (29435)
  • Include PHP: Replace dirname( __FILE__ ) with __DIR__. (29404)
  • Run phpcbf to fix PHP CS issues. (29368)
  • Register style attribute when any color property is supported. (29349)
  • Block context:
    • Remove unused onFocus block context. (29318)
    • Reduce memoized block context: Class names. (29186)
    • Remove obsolete block context. (29313)
    • Block edit: Avoid memoized block context in favour of useSelect. (29333)

Tools

  • Scripts:
    • Fork jest-environment-puppeteer to use puppeteer-core directly. (29418)
    • Add TypeScript support to linting command. (27143)
  • Needs Info / Stale bot
    • Add stale issues bot to help triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. efforts. (29321)
    • Do not automatically close message, update stale message. (29310)
  • Tests:
    • Temporary skip flaky test. (29601)
    • Paragraph block: Add test to ensure unwrapped editable paragraph. (29299)
    • Testing: Use snapshot-diff serializer to remove noise in snapshots. (29270)
    • Inserter: Add end-to-end test to make sure last inserted block is being focused. (29187)
  • Blocks: Preprocess validation log with util.format instead of sprintf. (29334)
  • Docs: Update release.md. (29091)
  • Docs/Tools/CI: Update references from master to trunk. (28433)

Various

  • Full-Site Editing
    • Site Editor: Browsing 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. templates menu restructure. (28291)
    • Site Editor: Persistent List View. (28637)
    • Template part block: Add variations based on areas. (29122)
    • Template Part: Update switching trigger. (29257)
    • Template part ‘area’ term – reword confusing ‘type’ terminology. (29679)
    • Add i18n support for template part variations’ descriptions. (29612)
    • Multi entity save panel – remove dynamic copy. (29637)
  • Table of Contents block
    • Add Table of Contents block (dynamic rendering + 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. version). (21234)
    • Deregister TOC block until issues are resolved. (29718)
  • Components:
    • Add next Button, ButtonGroup. (29230)
    • Add Card. (29350)
    • Add Divider. (29433)
    • Add Popover. (29084)
    • Add TooltipButton. (29523)
    • Add Tooltip and Shortcut. (29385)
    • Do not use ViewOwnProps for Portal. (29345)
    • Update Elevation story. (29454)
  • Component System:
    • Add basic tests for style system. (29320)
    • Add tests for color utils. (29301)
  • Types
    • api-fetch: Add incremental type checking. (29685)
    • docgen: Add TypeScript support. (29189)
    • docgen: Incrementally add types. (29684)
    • Dom: Add type-checking to data-transfer. (29682)
    • Components: Add types to Shortcut. (29633)
  • Button Block: Removes “Link settings” panel. (29664)
  • Add 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. test for editor JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. crash caused by rtlcss parsing exception, take 2. (29598)
  • Reset all WP Adminadmin (and super admin) styles in the wrapper of the editor styles. (29590)
  • Revert “[Mobile] – Fix splitting/merging of Paragraph and Heading”. (29587)
  • Try updating the minimum required WordPress version for the plugin. (29579)
  • Documents how the widgets editor works. (29572)
  • Drop zone: Fix media lib duplicate issue. (29567)
  • Update the category icons. (29553)
  • Try: Remove important on disabled switcher state. (29552)
  • Remove base control negative help text margin. (29550)
  • Navigation: Re-enable navigation block end-to-end tests. (29543)
  • Accessibility improvement on #29530 issue. (29534)
  • Pin SHA values as version numbers for 3rd party GHAs. (29485)
  • Update the visual design of the Sidebar Menu. (29476)
  • Focus on block selection: Skip inner blocks. (29434)
  • Use correct classname for nested Navigation Link container. (29380)
  • Integrate AztecEditor-iOSiOS The operating system used on iPhones and iPads. 1.19.4. (29355)
  • Block context: Separate native context. (29315)
  • Focus input when InputControl spinner arrows are pressed. (29305)
  • WP Block Styles: Only load in the editor if a theme opts in. (29252)
  • Add new overlay text icon, and use for image. (29215)
  • Add Missing URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org state to Navigation Link Block. (28861)
  • Improve dropcap behavior. (28685)
  • Improve the block editor handbook table of content. (28665)
  • RN: Add Bottom Sheet Select Control component. (28543)
  • RichText: Bypass paste filters for internal paste. (27967)
  • Block Directory: Update search results list UIUI User interface. (25521)

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 10.25.25s25.8ms
Gutenberg 10.15.01s23.1ms
WordPress 5.75.13s22.3ms

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

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