What’s new in Gutenberg 11.2.0? (4 August)

Two weeks have already passed since 11.1, so this week 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/ 11.2 was released. This release seems to have had more of a focus on 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 and tooling, but nevertheless there are still some great features to highlight. Color support has been expanded on two blocks, a new layout option is being tested for parent blocks, and there’s now an option for creating a new post after publishing.

Search 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. – button and border colors

The range of options for customizing blocks continues to improve. The search block now has additional options for customizing button and border colors.

Group block – flex layout

An experimental flex layout option is being beta tested on the group block. This is an early glimpse at a feature that would give parent blocks the capability of defining the layout of their inner blocks.

In the near future the intention is to provide options for changing the orientation, alignment, justification, and spacing within a flex layout.

New button for creating posts as part of the publishing flow

If you’re creating more than one consecutive posts, you can now create a new post from the editor as part of the publishing flow.

11.2.0

Features

• Search Block: Add color support to search button. (32416)
• Search Block: Add border color support. (31783)
• Pullquote: Add border and color support. (30951)

Enhancements

• Post Editor
  • Add a new page/post button on publish panel. (33276)
• Widgets Editor
  • 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. inserter: Clarify that the button toggles the inserter. (33561)
  • Update widget editor help links to point to the new support article. (33482)
• Components
  • Spacer: Change props override order, split types. (33555)
  • Elevation: Reduced motion styles, updated documentation and README. (33551)
  • components: Add unit values utils. (33514)
  • components: Add isValueNumeric util. (33206)
  • [Components]: Add SegmentedControl. (31937)
  • Components: Promote VisuallyHidden from ui into full components (#31244). (31902)
• 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)
  • Inserter: In text label mode, use “Close” label when inserter is open. (33534)
• Data
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Pass query argument to data selector shortcuts. (33689)

Bug Fixes

• Block Library
  • 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.: Allow authors to select images uploaded by other users. (33567)
  • Template Part: Avoid button layout shift. (33362)
  • Remove instagram reference from embed block’s description. (33519)
• Block Editor
  • Fixed that the block is selected instead of the title when using the select all shortcut. (33621)
• Post Editor
  • Most Used Terms: Avoid 403 error for non-administrators. (33569)
  • Editor: Set ‘hide_empty’ for the most used terms query. (33457)
  • HierarchicalTermSelector: Use TextControl component. (33545)
  • PWA manifest: icon: Fix error when adminadmin (and super admin) bar is gone. (33702)
• Widgets Editor
  • Fix 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/theme incompatibility, call onChangeSectionExpanded conditionally. (33618)
• Components
  • Fix: Native UnitControl to handle single unit configuration. (33641)
  • NumberControl: Allow empty values. (33485)
  • BoxControl: Prevent invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. style values. (33444)
  • FocalPointPicker: Check if value is NaN. (33637)
  • UnitControl: Set correct unit when units has one option. (33634)
  • components: Use useCx to fix iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. support. (33301)
  • Card: Add missing box-sizing CSSCSS Cascading Style Sheets. rules. (33511)
  • CardBody: Change default value of isScrollable to false. (33490)
  • ItemGroup: Fix padding, split types, rename boolean props. (33553)
• Themes
  • 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 broken 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. in WP_Theme_JSON_Resolver. (33624)
• Site Editor
  • Site editor: Check template resolution. (33527)
  • FSE: Fix content height. (33698)
• Media
  • Format Library: Remove style from inline image if width not set. (32516)

Performance

• Drag and drop
  • Set passive listener option for use popover scroll to avoid affecting scrolling performance. (33478)
  • Drag items via transform property to avoid layout and re-paints. (33395)

Experiments

• Full Site Editing
  • Query Pagination: Update the arrows on the Next and Prev pagination blocks. (33626)
• Block Library
  • Add flex layout support to the block editor. (33359)

Tools

• Testing
  • E2E: Navigation wait for links before counting them. (33704)
  • Automation: Track Gutenberg performance metrics over time. (33694)
  • Re-enable “Save flow should work as expected” end-to-end test. (33548)
  • Skip some widgets editing related tests. (33547)
  • Enable the reusable blocks skipped test. (33510)
  • Skip end-to-end tests. (33503)
  • Tests: Run Prettier after regenerating test fixture. (33502)
  • Fix screenshots not being captured when snapshots failed. (33448)
  • Add coverage folder to .gitignore. (33413)
  • Automated Testing: Disable remote patterns in tests. (33160)
  • Improve function widgets test. (33489)
  • Make the performance CI job more stable. (33710)
  • Update button block corner radius test to px. (33562)
  • Add unsupported block title translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. test. (33340)
  • Re-enable skipped widgets end-to-end test. (33449)
• Build Tooling
  • Update sass version to 1.35.2 with fixes. (33433)
  • Improve Feature mapping in automatically generated changelog. (33625)
  • Add depth to git fetch in npm publishing. (33595)
  • Release docs: Add process for creating a point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. of the Plugin. (33546)
  • Docs: Run Prettier after updating 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. in documentation. (33498)
  • Publish android artifacts with publish to s3 gradle plugin. (33441)
  • Build: Split configuration into two parts – blocks and packages. (33293)
  • Automate grouping of release Changelog PRs by feature. (33229)
  • Fix dependency extraction webpack v5 deprecation. (33090)
  • Scripts: Update eslint-plugin-markdown version. (33432)
  • Replace CRLF with LF when generating unminified assets. (33509)

Documentation

• Add missing space in documentation. (33690)
• Added common steps of plugin translation. (23535)
• Packages: Ensure changelog entries are attributed to the correct release. (33590)
• Add i18n filters to documentation table of contents. (33556)
• Update the create a block theme how-to guide. (33382)
• Block API: Improve how blocks assets are versioned. (33075)
• Update the tested up to version in the readme file. (33760)
• Correct {% end%} 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.) – missing a space. (33189)
• Use tabs instead of spaces in block transform doc example. (33549)
• Fix flaky widgets end-to-end tests by waiting for the snackbar correctly. (33317)
• Scripts: Add changlog entry for module update. (33473)
• Create block: Update “Tested up to” in readme.txt. (33493)

Code Quality

• Block Library
  • Fix optional params in page list rendering. (33639)
• Block Editor
  • Block editor: Use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. events for shortcuts (portal bubbles & contextual). (32323)
  • Block editor: Remove focus stopPropagation from appender. (32003)
  • Block editor: iframe: Incorporate writing flow. (33497)
  • Escape key sanity (avoid event.stopPropagation). (33630)
  • Writing flow: select all: Remove early return for post title. (33699)
  • Remove event.stopPropagation for past WritingFlow/ObserveTyping compatibility. (33632)
• Post Editor
  • Editor: Refactor Post Author component. (33695)

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 11.2	8.48s	37.89ms
Gutenberg 11.1	8.54s	38.17ms
WordPress 5.8	8.43s	39.71ms

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

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