What’s new in Gutenberg 11.6 (29 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/ 11.6 has been released! This release includes a number of nice enhancements and as usual many 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.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo 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.’s toolbar!

Locking control at block level

Alongside template level locking, now you can lock individual blocks to prevent moving or removing them; you can do this by adding a lock attribute on the block settings. Block-level lock takes priority over the templateLock feature and currently, you can lock moving and removing blocks.

The toolbar of locked blocks will have the movers hidden, and the Remove block option won’t be available either.

Query Pagination uses Flex Layout

Following previous releases bringing Flex Layouts to blocks, Gutenberg 11.6 improves the Query Pagination block to support the flex layout along with a justification option, for automatic best-fit.

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means the 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. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and 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. are inherited.

The writing flow has also received some enhancements in this release: the Richtext format toolbar now shows a visual clue for hidden active items and, when using the quick inserter and clicking the Browse all button, your current filter value is now passed to the main inserter without the need to type it again, making this switch between inserters seamless.

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like a 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., and is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

  • Post Title block: Add typography formatting options. (31623)
  • Query Pagination block: Use flex layout. (34876)
  • Site logo: Add site logo crop. (31607)
  • Cover: Move cover min-height into dimensions panel via SlotFill. (34065)
  • Group Block: Add information about selected element types for Group Block. (33976)
  • Image Block: Create two-way data binding for ImageSizeControl. (34649)
  • Columns Block: Update block description of columns block. (34705)
  • Gallery block: Add toolbar button to convert old galleries to new format. (34606)

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass 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. value when clicking Browse All. (34912)

Components

  • ColorPicker: Enhance the new color picker design. (34598)
  • ColorPicker: Add reset timeout to ColorPicker’s copy functionality. (34601)
  • ToolsPanel: Refine component behaviour. (34530)
  • Resize Handles: Fix stroke width of resize handles. (34949)
  • ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. (28289)
  • ServerSideRender: Delayed loading state of ServerSideRender component. (35033)

Global Styles

  • Add a simple Global Styles preview to the 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.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

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. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

  • FSE: Add basic support for child themes. (34354)

New APIs

Block 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.

  • Introduce lock control at the block-type level. (32457)

Design Tools

  • InspectorControls: Wrap block support slots in ToolsPanel. (34157)

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)

  • Improve file block accessibility by adding aria-describedby to download button. (28062)
  • Button Block: Add prefix to the description ID. (34900)
  • Snackbar: Fix focus loss on dismiss. (34736)

Performance

  • List View: Try disabling async mode provider around selected block in ListView. (34519)

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Prevent external styling of editing UI. (34727)
  • Page List Block: Fix gap in vertical page list. (35026)
  • MediaPlaceholder: Fix media library button opening the file upload modal. (34894)
  • QueryPagination: Fix layout support. (34897)
  • Query Pagination: Fix center alignment. (34739)
  • Group block: Lower CSSCSS Cascading Style Sheets. specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in 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.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

  • Fix Dropdown/DropdownMenu toggle closing in all UAs. (31170)
  • Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. (34721)
  • ToolsPanel: Allow SlotFill injection of panel items. (34632)
  • ToolsPanel: Remove / re-register panel items if the panelId changes. (34726)
  • ToogleGroupControl: Fix update when unmounted. (34756)
  • Unit Control: Always display current unit value if valid. (34768)

Template Editor

  • Fixes left & right floats for blocks that are direct children of .wp-site-blocks. (34635)
  • Fix new template form onSubmit logic. (34988)

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/.

  • Add missing field _invalid in menu item REST API. (34670)
  • Fix ‘menu_exists’ response status code. (34888)
  • Remove parent and position validation from menu item REST API endpoint. (34672)
  • Filters are incorrectly applied in the __experimental/menu-items controller. (34857)
  • Fix the parent menu item field in REST API responses. (34835)

Themes

  • Fix block gap added to the block templates skip link. (34986)

Widgets Editor

  • Fix disabled blocks logical error on Widgets screen. (34634)
  • Prevent welcome guide overflow x scroll. (34713)

Experiments

Navigation Block

  • Add a Submenu block for use in Navigation. (33775)
  • Initialize responsive modals with window onload event. (34544)
  • Enable open on click for Page List inside Navigation. (34675)
  • Hide theme-provided underlines when menu item is in setup state. (34486)
  • Only capture toolbars on the parent Navigation block when not in vertical mode. (34615)
  • Polish wavy underline. (34954)

Navigation Editor

  • Add initial navigation editor user documentation. (34985)
  • Adjust header toolbar icon styles. (34833)
  • Consolidate menu name and switcher. (34786)
  • Update Navigation Editor to support new submenu block. (34281)
  • Use response messages returned from API for notices. (34903)
  • Add global inserter to Navigation Editor. (34619)
  • Save menu items using the REST API. (34541)
  • Add space between menu name and switcher button. (34960)
  • Keep Navigation Editor snackbar from overflowing notices. (34661)
  • Navigation Editor: Avoid crash when transforming navigation link. (34980)
  • Correctly display notices. (34852)
  • Display error notice inside modal. (34884)
  • Fix navigation editor missing appender not showing appender when no blocks selected. (34678)
  • Fix navigation editor undo button being active when editor loads. (34839)
  • Open link control if submenu parent is link. (34798)
  • Stop submitting Create Menu form in busy state. (34983)
  • Fix saving locations using the “Manage Locations” popup. (34714)

Site Editor

  • Site Editor – add basic 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 support. (34460)

Documentation

Handbook

  • Minor copy improvements. (35015)
  • Update versions to include 5.8.1. (34789)
  • Fix typography.customLineHeight value in the compatibility table. (34791)

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove 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/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the 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. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

  • Add tests for slug to class/css variable conversion. (34787)
  • Refactor the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data store to thunks. (28389)
  • Remove some low impact APIs that were deprecated on WP 5.3. (34537)
  • Rewrite FocusableIframe as hook API. (26753)
  • Rich text: Only merge neighbouring equal formats when applying a format. (35016)
  • Writing Flow: Merge place caret at edge functions. (30481)
  • Site editor: fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice: Undefined index: __unstableType. (34735)
  • Use rest_is_field_included function in menu endpoints. (34673)
  • Remove duplicate Theme JSON block gap key. (34774)

Block Editor

  • Global shortcuts: Use React events (portal bubbles & contextual). (34539)
  • Rename experimental prop used in BlockControls. (34644)
  • Update callers to handle when getBlockType returns undefined. (34891)

Block Library

  • Latest Comments: Add missing parameter to widget_comments_args. (29403)
  • Navigation submenu block: Replace global shortcut event handlers with local ones. (34812)

Components

  • ColorPicker: Replace global shortcut event handlers with local ones. (34508)
  • Delete the createComponent utility function. (34929)
  • Refactor away from the createComponent function: CardMedia (34915), ControlLabel (34927), Elevation (34916), FlexBlock (34917), FlexItem (34918), Grid (34919), HStack (34920), Heading (34921), Scrollable (34922), Spacer (34923), Surface (34924), Text (34925), Truncate (34926), VStack (34928).
  • Remove all dashicon usages from Storybook stories. (33984)
  • Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. (34966)

Global Styles

  • Fix Global Styles double border. (34906)
  • Rename globalStyles to styles. (34946)

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.

  • Add a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky 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. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

  • Fix package lock inconsistencies. (34790)
  • Update caniuse package to the latest version. (34685)
  • VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. (34269)
    • Replace usages of workspaceRoot with workspaceFolder. (34887)
  • Bump jest-dev-server to v5. (34560)
  • ESLint Plugin: Update eslint jsdoc dependency. (34338)
  • Storybook: Remove G2 prefix from the Components section. (34734)
  • Block Editor: Update react-spring to 9.2.4. (30979)
  • Move react-native-url-polyfill to dev dependencies. (34687)
  • Use Jest related rules only when the package is installed. (33120)
  • Ensure that all *.asset.php files are included in plugin.zip. (34875)

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 11.67.6 s38.38 ms
Gutenberg 11.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

Thanks to @priethor, @mcsf, @matveb, and @jameskoster for helping with the release!

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