What’s new in Gutenberg 11.7 (October 13th)

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

Navigation 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. And Navigation Editor Advances

The Lighter Navigation Block Experience and the Navigation Editor efforts led to many quality of life improvements in Gutenberg 11.7! 

The Navigation Block underwent a series of changes intended to provide a more intuitive navigation management experience. New links are now added instantly after clicking the “+” icon without an additional block selection step. There is also an additional new way of adding links: using a slash inserter. It is worth noting that a slash inserter can be enabled for any block using a new, experimental flag called __experimentalSlashInserter. In addition, navigation links may now be transformed into other allowed block types, such as Site Logo, Home Link, or Social Icons. Finally, it’s easier for users to notice linking mistakes thanks to the squiggly line highlighting empty links similarly to grammar errors. 

On the frontend front: The navigation link now supports custom font size and line-height. Link labels, such as “Previous post,” may now be a part of the link to the post itself. Mobile menus now reflect the justification settings of the desktop menus. 

Global Styles And Full Site Editing

The site editing experience got polished in this recent release. The template part editor gained a convenient back button to ease returning to the site editor. Switching between editing different template parts was made more accessible by listing the available areas in template details. Also, the custom gradient picker was refreshed.

There’s more! The Site editor was equipped with padding settings for specific template parts. Color palette settings are now available in a separate panel in the global styles sidebar. In addition, Duotone support was extended to the site logo block.

While we’re talking about Duotone, Gutenberg 11.7 enables theme authors to customize the default Duotone 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. using theme.json styles:

{
	"styles": {
		"blocks": {
			"core/site-logo": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			}
		}
	}	
}

Columns Block Support For Tweaking The Gaps And Margins

The Columns block now allows you to adjust the space between the columns and the margins surrounding the block. Combined with customizable template part padding, it is the most flexible layout-building experience Gutenberg ever had.

Other Notable Highlights

As a part of the effort to get the LinkControl component out of the “experimental” state, 11.7 adds the ability to create pages directly from the link popup. So far, this was only possible in the Navigation block, but now this feature is exposed on every link. The popup also underwent subtle visual adjustments. In addition, empty links can no longer be added, making adding one by mistake harder. The ones that fall through the cracks are now clearly denoted as empty

Gutenberg 11.7 also ships a few formatting improvements. One of them is the ability to highlight text. Another is a new alignment option called “none,” intended for resetting alignment settings.

It is also worth noting that a breaking change the post pagination markup was introduced in PR 35092.

11.7

Enhancements

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)

  • Adjust wording for post format suggestions. (14124)
  • Add a visually hidden label for the Search block. (35034)
  • Add an accessible label to the Back button in preferences. (35340)
  • Global Styles: Add accessible label to Back button. (35325)
  • Template title: Include a button and label text when there is no post/page title. (35148)

Block Editor

  • Allow other blocks to use the slash inserter. (35196)
  • Enable ability to create Pages from the inline Link UIUI User interface. (35083)
  • Polish quick inserter. (35339)
  • Remove visual clue from alignment toolbar. (35080)
  • Remove native block inserter onboarding tooltip. (35150)

Block Library

  • Site Logo: Add duotone support. (35344)
  • Columns block: Enable blockGap and vertical margin support. (34630)
  • File Block: Only display PDF preview height RangeControl when embed is enabled. (35207)
  • Navigation: Add transformations from a link to other allowed nav blocks. (34978)
  • Query 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.: Include a Query Pagination option on the block variations. (35347)
  • Show “none” as an alignment option and use contextual text to clarify settings. (34710)
  • Social Links: Add block gap support. (35236)
  • Site Title: Add option to toggle home link. (31540)
  • Site title: update block description. (34474)
  • Transform Nav Links with children into Submenus. (34831)
  • Add an option for displaying the label inside the Navigation Link block. (34952)
  • Add typography settings for the Navigation Link block. (35324)
  • Add option to remove/clear logo from the Site Logo block. (34820)

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data

  • Add ‘context’ to the query parts type definition. (35069)

Components

  • Add new Navigator components and use them in the global styles 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.. (34904)
  • Use _builtin property of classes in navigation link PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (35166)
  • Item: Remove isAction and use onClick to decide if it should render as button. (35152)
  • Make tooltip delay configurable with a property. (35246)

Design Tools

  • Block gap: Only render CSSCSS Cascading Style Sheets. variable if corresponding theme setting is enabled. (35209)
  • Format library: Add background color. (34680)
  • Update: Custom gradient picker design. (34712)

Global Styles

  • Add Padding to the root level of global styles. (35241)
  • Add duotone 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. styles support. (34667)
  • Extract the color palette to its own global styles screen. (35109)
  • Update the rules to hide/show blocks in the global styles sidebar. (35178)
  • Synchronize user 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. registration and UI visibility. (35427)
  • Enqueue preset styles for all themes in the editor. (35424)

Icons

  • Add color icon. (35187)
  • Rename globe icon to url. (35032)

Site Editor

  • Remove warning box from post terms. (35242)

Template Editor

  • Add back button for isolated template part editor. (34732)
  • Add template areas to template details. (35202)

Bug Fixes

Block Editor

  • Block Editor: Fix duplicate clientIds when dragging patterns. (35124)
  • Disallow creation of empty links using Link UI directly. (35060)
  • Fix Link UI when hyperlink has an empty href value. (35043)
  • Fix missing border in the quick inserter. (35307)
  • Fix toggle off for Duotone control and Post Date block’s date picking control. (35024)
  • useMultiSelection: Avoid crashing editor when block refs aren’t available. (35177)
  • Rich text: fix internal paste across multiline and single line instances. (35416)

Block Library

  • Embed: Remove meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area.-com from variations. (35146)
  • 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 descendent space. (35273)
  • Fix: Broken disabled select style in the editor area. (35135)
  • Fix native BlockAlignmentControl. (35191)
  • Gallery block: Fix Safari image sizing issue. (35309)
  • Gallery block: Fix problem with caption showing encode tags when not selected. (35131)
  • Gallery block: Unset alignment on new images to prevent it breaking layout. (35132)
  • Post Template: Remove margins from the block. (35193)
  • Post Title: Always use blockProps. (35286)
  • Post Title: Only render link element if we have a post. (35284)
  • Query Pagination: Don’t render an empty container. (35092)
  • Navigation Link: Fix PHP notice in the Navigation Link block. (34984)
  • Fix Post Comment Content block’s edit function. (35190)

Components

  • Color Picker: Match figma metrics. (35039)
  • Remove shift-stepping from range in RangeControl. (35020)
  • Popover: fix __unstableBoundaryParent (35082)

Design Tools

  • ToolsPanelItem: Add panelId check before calling toggle methods. (35375)

Media

  • MediaUpload: Ensure current images in a gallery are selected after opening media library. (35070)

Post Editor

  • Fix missing save label. (34948)
  • Keyboard shortcut: Prevent post saving through keyboard if post saving locked. (35361)

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

  • 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. Fetch: Improve isMediaUploadRequest check. (34417)
  • Fix slashing when creating or updating a menu item. (35147)

Server Side Render

  • Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup (35433)

Template Editor

  • Fix the styling of template details. (35285)

Widgets Editor

  • inspector-section: Track isOpen to make a better isContextuallyActive() function. (35055)

Performance

  • Edit Site: Optimize useSelect calls. (35213)
  • Memoize entity records selectors properly. (34323)
  • Widgets: Optimize useSelect calls. (35256)

Experiments

Block Library

  • Polish responsive navigation modal, inherit justifications, fix submenu direction. (35077)
  • Polish submenu indicator button. (35030)
  • Fix: Adding nav items from existing menu. (34837)

Navigation Screen

  • Remove 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. of help link in navigation editor. (35313)
  • Add a tooltip to Navigation items in a setup state. (35139)
  • Fix gap 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. in navigation screen. (35234)
  • Truncate long menu names. (35188)
  • Insert Navigation Link blocks by default in Navigation block. (34899)
  • Migrate resolvers to thunks. (35044)

Full Site Editing

  • Remove extra styling around “Post content” placeholder. (35243)

Documentation

Handbook

  • Docs: Update testing overview with minor fixes. (35232)
  • Fix typos, grammar in contributors release doc. (35268)
  • Update nvm to latest 0.38.0 version in Handbook. (35125)
  • Adding example readme template to contributing guidelines. (34847)
  • Fix erroneous usage of the word master. (35392)

Packages

  • Add instructions for installing plugins/themes with wp-env. (35064)
  • MediaUpload: Reflect the correct filter name in the readme. (35240)
  • Update LinkControl documentation with additional examples. (35199)
  • Update doc block in block editor to fix documentation generation lint error. (35295)
  • Add missing doc blocks for the exported members of edit-widgets store. (35263)

Code Quality

Block Editor

  • Add colord package to block editor; Replace tinycolor2 with colord on duotone. (#34616), 346053516535164)
  • Migrate the toggleFeature action to a thunk. (35075)

Block Library

  • Migrate store actions to thunks. (35031)
  • Post Title Block: Fix argument numbering in ‘sprintf’. (35338)
  • Replace tinycolor2 with colord on block library package. (35184

Components

  • Refactor Navigator* folder structure, rename Navigator to NavigatorProvider. (35160)
  • Replace tinycolor2 with colord. (35185)
  • ToolsPanel component: Refactor to typescript. (34028)
  • UnitControl component: Refactor utils to TypeScript. (35138)
  • Do not export SimpleColorSwatch in Storybook examples for Item Group. (35179)
  • Refactor Navigator to TypeScript. (35214)

Global Styles

  • Simplify code that deals with user data for clarity. (35248)
  • Simplify how we register preset metadata. (35228)
  • Reorganize the global styles UI code base. (35218)
  • Don’t output preset classes for colors defined by the theme (35514)
  • Clean up logic to retrieve GS settings depending on context. (35437)

Post Editor

  • Keyboard Shortcuts: Use a new selector getter method. (35385)

Navigation Component

  • Refactor the preferences modal to use the new Navigator components. (35142)
  • Navigation Editor: Remove duplicated stripHTML. (35189)

Widgets Editor

  • Migrate edit-widgets store to thunks. (35110)

Tools

Build Tooling

  • Remove polyfills from view.js block scripts. (35038)

Testing

  • Add tests for Navigator*. (35163)
  • Enable flaky tests reporter bot in PRs. (35029)
  • Replace tinycolor2 with colord on getMostReadableColor util. Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (34625)
  • Try fixing flaky navigation test. (35380)
  • Fix not archiving failure artifacts for flaky tests. (35379)

Plugins

  • Add oandregal and tellthemachines to codeowners file. (35233)

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.

VersionTime To Render The First BlockKeyPress Event (typing)
Gutenberg 11.73.7 s24.68 ms
Gutenberg 11.63.5 s25.88 ms
WordPress 5.84.0 s34.06 ms

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

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


Want to know more about recent Gutenberg releases? Check out the release post for Gutenberg 11.6!

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

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

What’s new in Gutenberg 11.5? (16 September)

It’s been two weeks since 11.4, so it’s time for another 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/ release, 11.5!

This update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools.

Theme / Block Gap Support

Block Gap support adds the ability for blocks to opt-in to a control that allows users to choose the distance between items within a block.

The groundwork for this feature was introduced in 11.4, and was initially opt-out for themes. Following feedback, this feature is now opt-in. Thanks so much for the testing and feedback!

With Block Gap support in place, it has also been added to the Columns, Title, and Navigation blocks.

Buttons in the the Buttons Block move closer together or farther apart as the Block Gap is changed.

Flex Layout Highlights

Following the introduction of Flex Layout in 11.2.0, now Flex Layouts are supported within the Social Links and Group blocks! The Social Links block now has a ‘flex’ justification option, for automatic best-fit. 

There is also a new variation of the Group block that allows for flex layout. You can try it out by choosing “Row” from the block inserter.

Social Icons change flow when flex justification is selected.

Site Title and Logo Inside Navigation Block

It’s now possible to build your site logo or title directly into menus, enabling new design possibilities! Insert, and modify the title or logo that you prefer, using design tools, then re-order for your ideal look.

A Site Logo is added to a Navigation Block, then resized and placed.

Global Styles 

Global styles are now available to themes by default, allowing block, theme, and patterns to have a reliable set of styles provided by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Themes are now able to selectively disable text and background colors. This allows theme authors to provide exactly the experience they’d like to provide users, whether allowing custom colors, gradients, or only their curated selections.

Other Notable Highlights

The Heading Levels menu has been redesigned, and is now vertical, making it easier to visualize the hierarchy.

There is a new setting to customize the Next and Previous Page indicators in the Query Pagination block, allowing the addition of an arrow or a chevron to your designs.

New vertical Heading Levels menu, with H2 selected.

11.5.0

Features

Design Tools

  • Block Support: Add gap block support feature. (33991)

Enhancements

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)

  • Font weight screen reader description. (34312)

Block Editor

  • Media Placeholder: Change media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input type to allow a local URL path. (29138)

Block Library

  • Columns Block: Use blockGap between Columns blocks. (34456)
  • Group Block: Add a row variation. (34535)
  • Heading Block: Vertical heading levels menu. (32926)
  • Navigation Block: Allow Site Title and Logo inside Navigation block. (33316)
  • Navigation Block, List View: Do not show appender and avoid closing the modal on block select. (34337)
  • Navigation Block: Remove horizontal and vertical navigation block variations from inserter. (34614)
  • Navigation Block: Use gap instead of margin. (32367)
  • Post Author Block: Add duotone suport. (34408)
  • Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block’s arrow. (33656)
  • Site Logo Block: Update block description to be concise. (34471)
  • Site Title Block: Update block description to be concise. (34475)
  • Social Links Block: Use the new flex layout. (34493)
  • Video Block: Use existing video poster image on insert. (34415)

Components

  • MenuItem: Add right padding for unchecked radio and checkbox items. (34406)
  • ToggleGroupControl: Update stories to use knobs. (34497)

Core Data

  • Add isRawAttribute to entity configuration. (34388)

Design Tools

  • Add wide alignment control only if theme provides layout.wideSize. (34586)
  • Update justification control in flex layout. (34651)
  • ToolsPanel: Change icon from horizontal to vertical ellipsis. (34369)

Full Site Editing

  • Limit FSE adminadmin (and super admin) notices to the Themes screen. (34353)

Global Styles

  • Allow disabling text and background color via theme.json. (34420)
  • Make global styles available to all themes. (34334)

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 context to ‘none’ strings for better translations. (34341)
  • Make permalinks documentation URL translatable. (34282)

Post Editor

  • Expose ThemeSupportCheck component. (20506)
  • Title block gap. (34570)

Themes

  • Add default editor styles applied to themes without theme.json and without editor styles. (34439)

Widgets Editor

  • Add ‘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’ block to widgets screens. (34484)
  • Legacy widget rendering endpoint. (34230)

New APIs

Design Tools

  • Allow themes with theme.json to opt-out of block gap styles. (34491)

Bug Fixes

Accessibility

  • Fix button block focus trap after a URL has been added. (34314)

Block Editor

  • Fix menu item padding 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.. (34435)
  • Fix text-menu min widths. (34532)
  • Keep id on paste if internal link points to it. (31107)
  • Fix caret position on block merging. (34169)

Block Library

  • Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. (34222)
  • Gallery Block: Fix 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. with stalled upload when image size too large. (34371)
  • Gallery Block: Fix media placeholder height in site editor. (34629)
  • Gallery Block: Fix problem with overflowing captions on new gallery block format. (34402)
  • Latest Posts: Fix various 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 in development log. (34428)
  • Navigation: Fix navigation block classname issues. (34344)
  • Navigation: Fix Page List styles inside responsive Navigation. (34517)
  • Navigation: Fix responsive menu height regression. (34488)
  • Navigation: Fix submenu layout in navigation page list. (34342)
  • Navigation: Fix submenus to only take up space when visible. (34382)
  • Navigation: Fix undo/redo ‘trap’ in navigation link block. (34565)
  • Site Title: Allow empty title in edit mode. (34274)
  • Social Links Block: Fix deprecation. (34639)
  • Video Block: Fix TypeError when removing poster. (34411)

Components

  • Align labels on focal point picker position controls above the inputs. (34209)
  • Check if in browser env before calling CSS.supports. (34572)
  • Combobox Component: Only force expanded state if the input has focus. (34090)
  • CustomSelectControl: Add describedBy fallback. (34385)
  • DateTime Component: Fix sizing of help info. (34370)
  • Fix ToggleGroupControlBackdrop not updating size when isAdaptiveWidth prop changes. (34595)
  • Fix selected value computation in CustomSelectControl when no initial value is set. (34490)
  • Fix subheadings from wrapping. (34319)

Design Tools

  • Border Controls: Display color indicator and check selected color. (34467)
  • Border Support: Fix check for displaying border support panel. (34516)
  • Gap block support: Force gap change to cause the block to re-render (fix Safari issue). (34567)
  • Letter Spacing: Group letter spacing correctly under typography supports. (34515)

Global Styles

  • Fix block-level global styles color panels. (34293)
  • Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. (34520)

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

  • Change default value of enableCustomFields to undefined. (33931)
  • Fix metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. reordering. (30617)

Packages

  • Blocks: Register block when 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. value provided for the icon. (34350)
  • Core Data: Add ‘include’ to the query key. (34583)
  • Core Data: Use resolveSelect instead of select in saveEntityRecord. (34584)
  • Interface: Block Toolbar & Popover component – Prevent sticky position from causing permanently obscured areas of the selected block. (33981)
  • Scripts: Only use svgr/webpack in js files. (34394)
  • Scripts: Convert legacy entry point arguments for compatibility with webpack 5. (34264)

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

  • Default batch processor: Respect the batch endpoint’s maxItems. (34280)

Widgets Editor

  • Fix Block Settings 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. unexpectedly collapsing. (34543)
  • Legacy widget’s preview functionality is broken when the page is moved. (34384)
  • Prevent focus trap in Legacy Widget block’s preview 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.. (33614)

Performance

Block Editor

  • Improve the getBlock and getBlocks performance. (34241)
  • Remove duplicated useValidAlignment hook. (34593)

Core Data

  • Move locks state from store to local variable. (34374)

Global Styles

  • Remove colors classes from the packages that are already provided by global styles. (34510)

Experiments

Navigation Editor

  • Add undo redo buttons in navigation editor. (34533)
  • Decode entities in the menu names. (34263)
  • Disable “block-nav-menus” feature for the purposes of removing the “experimental” status on the Navigation Editor. (34444)
  • Preload menu REST API requests on new navigation editor. (34364)
  • Update navigation editor placeholder. (34568)

Documentation

Handbook

  • Replace withSelect references with useSelect. (34549)
  • Updated Template Section copy. (34383)
  • Update block variations documentation about block scope. (34455)

Packages

  • Blocks: Correct typo in Blocks Documentation. (34396)
  • Componentes: Fix/update documentation alignment matrix control. (34624)
  • Componentes: Update DuotonePicker documentation for accuracy. (34494)
  • Eslint: Add no-unsafe-wp-apis to rules list in the documentation. (34416)
  • Prettier: Correct syntax in README.md for prettier-config. (34600)

Code Quality

Block Editor

  • Code cleanup to the getBlock refactoring. (34326)
  • Ensure that blockType is defined when accessing apiVersion. (34346)
  • Migrate lightBlockWrapper support to apiVersion for blocks. (34459)
  • Fix Animated warning log. (34197)
  • Rich Text: Replace global event handlers with local ones. (34492)
  • Rich text (core): OnFocus method can be replaced with HTMLElement.focus. (32054)
  • Use Setting: Consolidate the PATHS_WITH_MERGE constant to one instance. (34407)

Block Library

  • Gallery Block: Add docblockdocblock (phpdoc, xref, inline docs) comments to the new gallery 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.. (34562)
  • Gallery Block: Remove IE specific CSSCSS Cascading Style Sheets. hacks. (34372)
  • Button Block: Replace global shortcut event handlers with local ones. (34498)
  • Navigation Block: Refactor to use generic classnames. (34171)
  • Navigation Link Block: Replace global shortcut event handlers with local ones. (34500)
  • Gallery Block: Remove redundant css selector. (34277)

Components

  • CustomGradientBar: Replace global shortcut event handlers with local ones. (34505)
  • Guide: Replace global shortcut event handlers with local ones. (34503)
  • Navigate regions: Use React events for shortcuts (portal bubbles & contextual). (33633)
  • Rename PolymorphicComponent* types to WordPressComponent*. (34330)
  • Simplify Modal with hooks. (34412)
  • Simplify & polish heading levels. (34378)

Core Data

  • Fix linting errors. (34596)
  • Fix linting error in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (34464)
  • Migrate canUser resolver to thunks. (34580)
  • Migrate entities.js to thunks. (34582)
  • Migrate getAutosaves resolver to thunks. (34581)
  • Migrate getEntityRecord resolver to thunks. (34576)
  • Migrate getEntityRecords resolver to thunks. (34578)
  • Migrate resolvers to thunks: GetAuthors, _getCurrentUser, __getCurrentTheme, __getThemeSupports. (34579)
  • Refactor deleteEntityRecord to use thunks instead of generators. (34386)
  • Refactor editEntityRecord, undo, and redo to be thunks instead of generators. (34387)
  • Remove the PROCESS_PENDING_LOCK_REQUESTS action. (34343)
  • Refactor saveEntityRecord from redux-rungen to async thunks. (33201)
  • Remove extraction of raw values in saveEntityRecords. (34502)

Other Packages

  • Compose, useDropZone: Ensure drag event targets HTMLElement. (34272)
  • Editor: Replace hardcoded store key. (34296)
  • Env: Clarify config error within parse-config.js. (34322)
  • Post Editor: Fix gray W menu color. (34318)
  • URL: Add getFilename method to the URL package. (34313)

Tools

Build Tooling

  • ESLint: Add useSelect to direct function calls list. (34301)
  • ESLint: Update error message for @emotion/css with info about the useCx hook. (34418)
  • Fix build hang on Windows 10. (23589)
  • Linting: Remove global event listener warning. (34528)
  • More work on the stability of the performance metrics. (34229)

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

  • Added janw-me to the Codeowners for the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher FSE folder. (32990)
  • Fix title missing in bug report form. (34504)
  • Update bug form to use drop downs. (34458)
  • Update the minimum supported WordPress version to 5.7. (34536)

Testing

  • Add unit tests for edit site editor utils. (34401)
  • Debug e2e-tests in vscode. (29788)
  • Jest Preset: Restore the default setting for the verbose option. (34327)
  • Make Test_Widget compatible with WP_Widget. (34355)

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.56.71s40.42ms
Gutenberg 11.46.80s44.79ms
WordPress 5.87.53s50.72ms

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

Thanks to @beafialho and @joen for the release post assets, @priethor for coordination and review, @youknowriad for release and tools wrangling, @mamaduka for answers and help throughout, and @talldanwp for inviting me to shadow a release in preparation.

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

What’s new in Gutenberg 11.4? (1 September)

Depending on where you live, it’s the first day of Spring. Or Autumn. Or, if you live on Venus, just another season of sulphuric acid showers.

No matter where you are, 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.4 has been released with new features to brighten your mood including the refactored Gallery 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., duotone filters for featured images, and more block design tools!

Gallery Block now uses Image Blocks

The Gallery Block now acts as a wrapper for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Image Blocks.

Individual gallery images will therefore feature all existing and future functionality of not only Image Blocks – for example, the ability to add custom links, filters, and styles – but also standard block behavior such as move, drag and drop, copy, and keyboard navigation.

For now, the new Gallery Block can be enabled on the Gutenberg Experiment page, but the plan is for the Gallery Block to ship with WordPress 5.9.

Theme and 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 authors can get wise about backward compatibility recommendations over in the Gallery Block Refactor Dev Note.

Duotone filters for featured images

Duotone filters were introduced to image and cover blocks in 10.6. By extending duotone filters to 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. blocks, 11.4 enables us to set consistent effects across post and page templates, recent posts lists, and Query Block content.

Padding support for Button Blocks

As of 11.4, we can define padding for Button Blocks with the further option of linking padding values to vertical and horizontal axial sides.

The aim is to provide greater control as well as uniformity in the way we display button elements. We can still set a single padding value for all sides – adding extra vertical or horizontal padding just gives us that extra flexibility to create variations on our design patterns.

Support for block gap spacing

Having a consistent way to tweak the margin/gap between blocks has been a long-standing feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged.. 11.4 introduces the groundwork for adding gap spacing control to blocks such as Buttons, Images, and Columns, opening up the possibility of more powerful and precise layout tools.

There’s work in progress to bring this to the editor so stay tuned for updates in upcoming releases!

Other notable highlights

Font weight support is now available for the Post Date and Post Terms Blocks.

An “early 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.” feature has also made it into 11.4: the ability to expose a parent block’s toolbar controls to its child blocks. A use case would be changing the alignment of Buttons when editing a single Button. Keep an eye out for a request for feedback on this developing feature soon.

11.4.0

Enhancements

  • 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)
    • Cover Block: Allow alt text in Cover blocks. (33226)
    • Add aria-describedby to custom select control component to describe currently-selected font size. (33941)
  • Block Editor
    • Block Lists: improve 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. block, pattern and template previews. (28165)
  • Block Library
    • Query 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.: update Post Template sub-block icon. (34204)
    • Convert Gallery block to use Image blocks. (25940)
    • Post Featured Image: add duotone block supports. (34113)
    • Post Featured Image: add contextual help text to the scaleproperty. (34158)
    • File block: update transform from image to use image filename if caption is empty. (34256)
    • Post date Block: add font weight support to the block. (34070)
    • Post terms: add font weight support to the block. (34142)
    • Site Tagline: add font weight support. (33983)
    • Button: update spacing support to use axial padding. (33859)
  • Components
    • Add deprecated props adapter for ColorPicker. (34014)
    • Wrap SegmentedControl in a BaseControl with an added help property. (34017)
    • Combobox: update the current selection if the list of suggestions is filtered. (33928)
    • Post Title: use rich text hook and updating 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.) to h1 (31569)
  • Design Tools
    • Add layout default value support for blocks. (34194)
    • Dimensions Panel: add padding tool as default for blocks where this is a common setting. (34026)
  • Navigation Screen
    • Update navigation screen topbar. (34166)
  • Packages
    • Updates the “settings” icon, which toggles the display of additional controls in an interface. (34165)
  • Post Editor
    • Migrate post editor feature preferences to the interface package. (34154)
  • Widgets Editor
    • Migrate customize widgets feature preferences to interface package. (34135)
    • Refactor editor ‘feature’ preferences to interface package. (33774)

Bug Fixes

  • 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.
    • Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. (34059)
  • Block Editor
    • Font-size adjustment for tablet and mobile device previews. (33342)
    • Fix single block selection by holding shift key. (34137)
    • Fix unwanted additional spaces added around pasted text on Windows. (33607)
    • Inserter: prevent non-deterministic order of inserter items. (34078)
    • Try: Fix multiselect toolbar indent and reformat BlockContextualToolbar(). (34038) (34173)
  • Block Library
    • Latest Comments: use site localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. in the editor. (33944)
    • Navigation: fix vertical layout on the frontend. (34226)
    • Navigation: add z-index value to responsive menu overlay. (34228)
    • Navigation: enable flex on container to fix space between. (34258)
    • Navigation: fix submenu icon positioning. (34168)
    • Navigation block: add missing </ul> closing tag. (34077)
    • Post 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.: remove interactive formatting. (34083)
    • RichText: fix space key for button and summary elements. (30244)
    • Search Block: add space between generated border class names. (34025)
  • Build Tooling
    • Webpack: Fix watch on .json and .php files. (34024)
    • Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. (34422)
  • Components
    • Fix RTL on Flex component. (33729)
    • NavigationSidebar: fix template content for content-navigation-item preview. (34203)
    • Remove deprecated import style for storybook/addon-docs. (34095)
    • ToolsPanel: add tools panel item deregistration. (34085)
    • Post Title: remove wrapper div and fix border style. (34167)
  • Core Data
    • GetEntityRecords returns items even if some included IDs don’t exist. (34034)
  • Design Tools
    • Allow zero values for theme.json styles. (34251)
  • Global Styles
    • Site editor: fix for how CSSCSS Cascading Style Sheets. custom properties are generated. (33932)
  • Packages
    • Rich Text: add check to toTree() in replacements before accessing its type. (34020)
  • Post Editor
    • Fix selector params in isPluginItemPinned() selector. (34155)

Performance

  • Data Layer
    • Data: Add a batch function to the data module to batch actions. (34046)

Experiments

  • Block API
    • Block Editor: absorb parent block toolbar controls. (33955)
    • Block Editor: use groups for InspectorControls. (34069)
  • Block Library
    • Add generic classnames to children of Navigation. (33918)
  • Global Styles
    • Add slashes back to 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.. (33919)
    • Add block spacing gap configuration to theme.json and add support for this CSS variable to the “flow/default” layout. (33812)

Documentation

  • Handbook
    • Alphabetize glossary entries. (34058)
    • Correct minor typos in wp-plugin.md (34185)
    • Remove extraneous params from block_type_metadata hook. (34151)
    • Update incorrect settings examples in “Global Settings & Styles”. (34084)
    • Use block.json to add attributes in create block tutorial. (33978)
    • Fix typo in block gap documentation in theme-json.md. (34231)
    • Fix broken mobile testing documentation link in testing-overview.md. (34187)
    • Fix typo in legacy-widget-block.md. (34103)
    • Update spelling and fontSize examples in create-block-theme.md. (34152)
  • Library
    • Bump mobile version in experiments page for Gallery. (34220)
  • Packages
    • Add documentation for mobile components directory. (33872)

Code Quality

  • Block Editor
    • Render head and body with single portal for block previews. (34208)
    • BlockList: refactor element context for style/svg appending. (34183)
    • BlockList: use InnerBlocks internally. (29895)
  • Components
    • Unit Control: add unit tests for getValidParsedUnit utility method. (34029)
    • Rename SegmentedControl to ToggleGroupControl. (34111)
    • Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping (33995)
  • Core Data
    • Allow passing store definitions to controls. (34170)
  • Site Editor
    • Remove extra DOM element used for template part overlay. (34012)

Tools

  • Build Tooling
    • Automated Changelog: force group all documentation tasks under Documentation. (34042)
    • Automated Changelog: rename “Editor” grouping to “Post Editor” to avoid ambiguity with other editors. (34093)
    • Automated Changelog: sort feature groups by issue name. (34071)
    • Automated Changelog: use nested headings for feature groups instead of indenting lists. (34040)
    • Automated Changelog: remove Uncategorized 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. in output and place items at top. (34037)
    • Add Typescript extensions to watched files. (34094)
    • Remove obsolete step that pushes tags in NPM publishing flow. (34114)
    • Release workflow: only commit modified changelogs. (34211)
  • ESLint
    • Eslint plugin: use @typescript-eslint/no-duplicate-imports in TS projects. (34055)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Contributor Templates
    • Issue Forms: simplify the 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. report form template. (34007)
  • Logs
    • Hide deprecation logs under a console group. (34163)
  • Testing
    • Emulate reduced-motion in end-to-end tests. (34132)
    • Re-enable Android end-to-end tests. (34243)
    • Remove extra props from Cover deprecations. (34066)
    • Remove the ENVIRONMENT_DIRECTORY env variable that was added to the performance jobs. (34086)
    • Add snapshot test for changelog formatting. (34049)
    • Experiment with using 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/. in end-to-end tests to build up states. (33414)

Performance benchmark

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.46.35s36.87ms
Gutenberg 11.36.29s36.97ms
WordPress 5.86.91s35.48ms

Thanks to @critterverse for our release preview assets, @priethor for guiding the release, @noisysocks, @talldanwp, and @andrewserong for their help with the release build and deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors., and to all who contributed to this release. Thank you for your splendid work!

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

What’s new in Gutenberg 11.3? (18 August)

Two weeks have passed since 11.2, so here we are again for a new 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/ release, 11.3.0. This update includes inserter performance improvements, new controls for 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. Dimensions, and some enhancements around how we handle Featured Post Images.

New Dimensions Panel

Replacing the Spacing Panel, this new Dimensions Panel gives us a deeper control over supported spacing, size, and other related style options. It also offers the ability to customize what you’d like to have shown. This is a great addition that builds on the overall dimension controls work across blocks.

Block inserter performance improvements

The block inserter is getting a big performance boost! Enjoy searching and inserting blocks with speed and ease.

Dimension controls for 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. Block

There are now new height, width, and scale controls for the featured image block, bringing it into greater parity with the Image block. This change impacts the Query 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. block in a big way by allowing even more layout options.

New icons for Reusable Blocks and Template Parts

New icons are now available for Reusable Block and Template Parts to make them each more recognizable and more intuitive to interact with.

11.3.0

Enhancements

  • Block Library
    • Button: Add padding block support. (31774)
    • Post Featured Image: Add basic dimension controls. (31634)
    • Template Part: Try new icons for reusable blocks and template parts. (34002)
  • Block Patterns
    • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context on titles. (33734)
  • Block Editor
    • Enable rich previews for internal links. (33086)
  • Components
    • Add new ColorPicker. (33714)
    • Promote ItemGroup. (33701)
    • Polish the focus style for the segmented control. (33842)
    • Tune appender margin. (33866)
    • Update snackbar to use framer motion instead of reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. spring. (33717)
    • Use updated range styles. (33824)
  • CSSCSS Cascading Style Sheets. & Styling
    • Reduce specificity of reset & classic styles. (32659)
  • Document Settings
    • Disable spellcheck and autocomplete in permalink slug field. (33708)
  • Global Styles
    • Dimensions Panel: Add new ToolsPanel component and update spacing supports. (32392)
  • 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/.
    • Improve the likelihood of getting rich link previews by modifying UA string for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details REST API endpoint. (33747)
  • Site Editor
    • Add error boundary. (33921)
  • Template Editor
    • Template Mode: Add busy state to template creation modal. (33076)
  • Widgets Editor
    • Add error boundaries to 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. screens. (33771)

Bug Fixes

  • 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)
    • Fix some JAWS bugs. (33627)
  • Block Library
    • Button: Fix justification for button block when selected. (33739)
    • Image: Fix issue with canInsertCover not being set to false for empty arrays. (33863)
    • Query Pagination Numbers: Fix first page’s link. (33629)
  • 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.
    • Dimensions Support: Switch dimensions block support back to using spacing key. (34030)
  • Block Editor
    • Closing the block inserter decrements block type impressions. (33906)
    • Fix block appender position in classic themes. (33895)
    • Fix positioning discrepancy with draggable chip. (33893)
    • Force link text to wrap in the Link UIUI User interface when encountering extra long link text. (33753)
    • Improve display of LinkURL menu and fix spacing. (33652)
    • Only show rich preview for image and description if data is available. (33660)
    • URL Details: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when parsing protocol-relative icon URLs. (33779)
  • Components
    • useBreakpointIndex: Attach resize event listener to window instead of document. (33902)
    • Components: Fix RTL on custom gradient picker. (33831)
    • FontSizePicker: Use number values when the initial value is a number. (33679)
    • FormTokenField: Avoid error when maxLength value is hit. (33623)
  • CSS & Styling
    • Fix navigation block placeholder preview markup. (33963)
  • Global Styles
    • Avoid rendering duplicate elements stylesheet. (33680)
    • Fix presets for blocks with multiple selectors. (33951)
    • Fix Global Styles transient key clash. (33844)
  • 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. Boxes
    • Fix Safari 13 metaboxes from overlapping the content. (33817)
  • Navigation Editor
    • Avoid React warning when creating a new menu. (33843)
    • Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. (33748)
  • Site Editor
    • Fix the site editor breaking in firefox. (33896)
  • Post Editor
    • Editor: Safer isPreviewingPost check. (33840)
  • Template Editor
    • Only show post template actions to users with correct capabilities. (33392)

Performance

  • Block Library
    • Improve the rendering/update performance of the image block. (33974)
    • Do not add to the block-library CSS bundle the colors that come from theme.json. (33924)
  • Block Editor
    • Lazy render the inserter search results. (33868)
    • Lazy render block types in the inserter. (33749)
  • Parsing
    • Improve the performance of the parser by removing the automatic custom classnames handling. (33903)
  • Post Editor
    • Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. (33418)
  • Template Editor
    • Template Mode: Remove ‘per_page’ argument from the template data selector. (33742)

Experiments

  • Full Site Editing
    • Site Editor: Implement a settings object 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.. (33737)
    • Template part selection popover – minor style updates for visiblity. (33733)
    • Template Part placeholder – Add title step to creation flow. (33703)
  • Navigation Block
    • Navigation: Fix navigation block appender 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (33964)
    • Enable the ability to remove a link from the Nav Link block in the Nav Block. (33777)
    • Fix navigation margin collapsing. (33021)

Documentation

  • Handbook
    • Add documentation to disable remote calls for block patterns. (33930)
    • Add missing comma. (33764)
    • Add more details about block attributes. (33880)
    • Add spaces in add_theme_support documentation code. (33796)
    • Correct spelling and grammar in documentation. (33860)
    • fix: supports.color.gradients is plural. (33781)
    • fix: Broken link in documentation to block support mechanism. (33780)
    • Update documentation to reflect new automated process for feature grouping. (33573)
    • link fix: Block editor 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. Tutorial. (33308)
  • Library
    • Fix gutenberg_resolve_template() return documentation. (33800)
    • Fix misspelling of “queries” in filter documentation. (33799)
  • Packages
    • Example for rest_endpoints filter in PHP. (33738)

Code Quality

  • Block Library
    • Site Logo: Use getMedia shorthand. (33992)
    • Featured Image: Use getMedia shorthand. (33943)
    • Search Block: Removed components class from icon button and polished css. (33961)
  • Components
    • Components utils: rtl() return type, rtl.watch() utility. (33882)
    • InputControl to TypeScript. (33696)
    • Use the __unsafe_useEmotionCache in the useCx hook. (33982)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data
    • Deprecate getAuthors in favor of getUsers. (33725)
  • Global Styles
    • No longer read from experimental-theme.json. (33904)
    • Remove the experimental prefix and rename theme.json files. (33925)
  • Post Editor
    • Refactor MetaBoxesArea to to functional components using 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.. (30542)
  • Scripts
    • Fix typo in format change message. (33945)

Tools

  • Testing
    • Add search performance measures and make other measures more stable. (33848)
    • Avoid double parsing the content when loading the editor. (33727)
    • Block Hierarchy Navigation waits for the column to be highlighted. (33721)
    • Widgets Editor: Try to fix flaky 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. inspector test. (33890, 33965)
  • Build Tooling
    • Readable JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. assets 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: Fix webpack 5 support. (33785)
    • Scripts: Use cssnano to minimize CSS files with build. (33750)
    • Scripts: Webpack configuration update to minimize CSS. (33676)
    • Scripts: Update webpack to v5 (try 2). (33818)
    • Scripts: Add missing fallback for target in webpack 5 configuration. (34112)
  • ESLint
    • Include .jsx extenstion when linting import statements. (33746)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Contributor Templates
    • Update 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. issue template to use forms. (33713, 33786, 33761)
  • Plugin
    • Plugin: Fix jsdoc/check-line-alignment ESLint warnings. (33901)
    • Correct function_exists() check typo introduced in #33331. (33513)

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.37.23s38.57ms
Gutenberg 11.27.82s37.89ms
WordPress 5.87.99s41.44ms

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

Thanks to @javiarce for our preview assets, @cbringmann and @mkaz for proof reading this post, @annezazu‘s great copy edits, @priethor for shepherding the process along so helpfully, @youknowriad for helping 🧑‍🚒 with the release, and everybody else who contributed to this release for your wonderful work!

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

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.28.48s37.89ms
Gutenberg 11.18.54s38.17ms
WordPress 5.88.43s39.71ms

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

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

What’s new in Gutenberg 11.1.0? (21 July)

Two weeks have passed since the last 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/ release, which means a new version is available! Gutenberg 11.1 adds the ability to edit a 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. border easily, enables drag and drop support for the List View component, and includes 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 centered around the Widgets Editor and Block Library.

Block supports: border

Take an early look at custom block borders! When borders are enabled in a theme.json file, and a block declares that it supports it with the block supports 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., a new block panel is available that lets us change the border radius, width, style, color, and border units.

Set and style custom block borders

List View drag and drop

Intuitively move and reorder blocks using drag and drop in the List View.

Use the persistent list view to reorder blocks

11.1.0

Enhancements

  • Adminadmin (and super admin) panel available as PWA. (33102, 33310)
  • Block Breadcrumbs: Small chevron icon for breadcrumb separators. (33042)
  • Block Library:
    • Columns Block:
      • Add stack on mobile setting to allow for columns without mobile breakpoints. (31816)
      • Add the percent unit to the default units in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (33468)
    • Latest posts: Remove grey color for dark themes. (33325)
    • List Block: Add link color control to list block. (33185)
    • Post Terms Block: Add a “separator” attribute to post-terms block. (32812)
    • RSS Block: Update block styles. (33294)
    • Tag Cloud Block:
      • Add ability to change number of tags shown. (32201)
      • Remove editor style so editor matches frontend. (33289)
  • Design Tools, Border:
    • Add support for custom border units. (33315)
    • Update border support UIUI User interface. (31585)
    • Set border style none when border width zero. (32080)
  • Link Editing: Add Unlink button to LinkControl popover. (32541)
  • List View: Enable drag and drop in List View. (33320)
  • 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. Editor: Adds auxiliary class names for editor styles. (33388)
  • General UI:
    • Block Settings Menu: Don’t render ‘Move to’ if there is only one block. (33158)
    • Disable ‘Post Publish’ button if saving non-post entities. (33140)
    • Preferences: Polish labels and consolidate options in preferences. (33133)

New APIs

  • 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/.: Block editor settings endpoint. (33128)
  • UI Components: Add a SearchControl component and reuse across the UI. (32935)

Performance

  • Improve List View performance. (33320)
  • Pattern Directory: Caching updates. (33052)

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 high contrast mode rendering of icon buttons. (33062)

Bug Fixes

  • Block Breadcrumbs: Fix breadcrumbs htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure and 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. (33159)
  • Block Editor:
    • Move layout styles to document head (instead of rendering inline). (32083)
    • Warn only in edit implementation when using useBlockProps. (33380)
    • 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.: Remove reset styles. (33204)
  • Block Library:
    • Buttons Block: Remove green background color in button preview. (33116)
    • Embed Block: Include missing attributes when upgrading embed block. (33235)
    • Image Block:
      • Improve “can switch to cover” check. (33095)
      • Fix replace link control styling. (33326)
    • Query 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. Block:
      • Prevent entering 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. values in the Query Loop block configuration. (33285)
      • Update getTermsInfo() to workaround parsing issue for translatable strings. (33341)
    • Search Block:
      • Fix search block button position dropdown accessibility/UXUX User experience issues. (33376)
      • Update search block to handle per corner border radii. (33023)
    • Site Title: Decode entities in site title. (33323)
    • Home Link: Remove padding. (33461)
    • Post Except: Fix excerpt_more 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. 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. and remove wordCount attribute. (33366)
  • Design Tools:
    • Color: Prevent color panel from showing as empty. (33369)
    • Duotone:
      • Avoid rendering duplicate stylesheet and SVG. (33233)
      • Update conditions to hide duotone panel. (33295)
    • 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.
      • Allow themes to provide empty values for color.duotone and spacing.units. (33280)
      • Specify what settings can be part of settings.layout. (33303)
  • Rich text:
    • Fix format deregistration. (31518)
    • Autocomplete: Reset state for empty text. (33450)
    • Run input rules after composition end. (33416)
  • Site Editor: Close navigation 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. when all posts clicked. (33393)
  • Slash Inserter: Fix slash command focus style. (33084)
  • Widgets Editor:
    • Fix moving inner blocks in the Widgets 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.. (33243)
    • Fix inserter size on Widgets Editor 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.. (33118)
    • Merge conflicting wp.editor objects into a single, non-conflicting module. (33228)
    • Retrieve latest widgets before loading sidebars. (32997)
  • Writing flow:
    • Allow select all from empty selection. (33446)
    • Attempt to fix preview end-to-end failure. (33467)
  • Components:
    • Suggestion List: Check if a node exists to scroll into view. (33419)
    • Navigation component: Fix item handling onClick twice. (33286)
  • Editor: Extract snackbars into a separate component. (33355)

Experiments

  • Component System:
    • Promote g2 Popover as Flyout. (32197)
    • Add useControlledValue. (33039)
    • Add normalizeArrowKey. (33208)
    • Add mergeEventHandlers. (33205)
    • Add useCx. (33172)
    • Add useLatestRef hook. (33137)
    • Remove @emotion/css from Divider. (33054)
  • Navigation Block:
    • Add Color Options for Submenus. (31149)
    • Change Navigation block markup on front end only. (30551)
    • Improve handling of open overlay. (32886)
    • Menu item placeholder inheritance. (32512)
    • Pass block attributes with rendering with location. (33043)
    • Refactor of navigation block rendering using location attribute. (33244)
  • Global Styles:
    • Cover against non existing styles. (33127)
    • Missing link color on style properties to css var mapping. (33150)
    • Preset variables not being user on the site editor. (33149)

Documentation

  • Admin PWA: Make readme private. (33216)
  • Handbook:
    • Block API:
      • Apply enhancements included in WordPress 5.8. (33252)
      • Clarify the type of apiVersion in block metadata. (33249)
      • Fixes a typo in the documentation for block supports. (33247)
    • Block Editor API: Changes to support multiple admin screens in WP 5.8. (33262)
    • Custom Block Editor: Fixed bad image syntax and bold text. (32897)
    • Fix API documentation for data reference guides. (33384)
    • 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 Release: Update Gutenberg release documentation to clarify release post workflow. (33328)
    • theme.json:
      • Add examples and highlight backward compatibility. (33421)
      • Update theme.json documentation for WordPress 5.8. (33131)
      • Fix codetabs syntax in theme.json documentation. (33417)
    • Use markdown headings instead of links for API declarations. (33381)
  • Update documentation for link color in WordPress 5.8. (33162)
  • Packages:
    • Add PanelBody for InspectorControls. (33227)
    • Correct wrong setState call. (32808)
    • Remove withState HOC references. (33173, 33222, 33259)

Code Quality

  • Avoid calling gutenberg_ functions within code shipped through WordPress Core. (33331)
  • Block Editor:
    • Refactor the user autocompleter to avoid apiFetch and rely on the data module. (33028)
    • Warn when useBlockProps hook used with a wrong Block API version. (33274)
  • Block Library:
    • Image Block: Fix uncaught error. (24334)
    • Latest Posts Block: Refactor to drop apiFetch usage in favor of using the data module. (33063)
    • Template Part Block: Remove unnecessary function exists check on wp_filter_content_tags. (33182)
  • Components:
    • BlockNavigation: Restructure the BlockNavigation component. (31892)
    • Box Control: Rename VerticalHorizontalInputControls to AxialInputControls. (33016)
    • GradientPicker: Stabilises GradientPicker and CustomGradientPicker components. (31440)
    • Toolbar: Enforce isAlternate on ToolbarDropdownMenu. (33129)
    • ZStack: Remove @emotion/css from ZStack. (33053)
  • Packages: Hoist dependencies for WordPress packages. (33387)
  • Plugin: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Add basic Site Title block coverage. (32868)
    • Add some functionality to createUser and deleteUser. (33067)
    • Enable previously skipped widgets tests. (33121)
    • Skipping more end-to-end tests. (33353)
    • Skip unstable end-to-end tests. (33352)
    • Switch to new puppeteer APIs for emulating conditions. (33410)
    • Update end-to-end tests to use new puppeteer drag and drop api. (33386)
  • Dependencies:
    • Update CopyWebpackPlugin to v6. (33220)
    • Upgrade Husky to 7.0.0 and git ignorance improved. (33183)
    • Upgrade Puppeteer to 10.1. (33327)
    • Upgrade Storybook to v6.3. (33219)
  • NPM Packages: Introduce release types to npm publishing script. (33329)
  • Plugin: Introduce tools folder with configuration files. (33281)
  • Workflows:
    • Release Workflow: Remove “experimental” status from WP 5.8 stable items. (33214)
    • Re-enable manually triggered workflows on forks. (32821)
    • Use NPM caching built into action/setup-node. (33190)

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.16.38s26.12ms
Gutenberg 11.06.06s29.55ms
WordPress 5.78.52s36.26ms

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

Thanks to @javiarce for creating the release post assets, @cbringmann for proofreading, and @priethor, @youknowriad, and @get_dave for guiding me through this release!

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

What’s new in Gutenberg 11.0.0? (9 July)

Two weeks have passed since the last 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/ release, which means the time is now upon us for Gutenberg version 11.0.0 (released 7th July).

With efforts still concentrated on the WordPress 5.8 release, this version of the Gutenberg Plugin is heavily focused on backports and 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.

That being said however, it is not without its highlights! Gutenberg 11.0 introduces:

And of course, this release also includes a plethora of updates and fixes for the Widgets editors.

Editing overlay for Template Parts and Reusable blocks

Gutenberg 11.0 improves the user experience when interacting with Reusable blocks and Template parts via the addition of a new “clickthrough” behaviour which requires the block to be actively selected before child blocks can be interacted with.

The new editing overlay and interaction – shown here on a reusable 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..

When the block is not selected, hovering the block results in a blue overlay, whilst clicking anywhere inside the block will act to select the block itself, preventing its children from being selected before the parent.

This mechanic aims to address feedback from users who were surprised at the lack of friction when editing these reusable symbols, which resulted in a frustrating experience.

The new workflow is an improvement that streamlines the experience of working with these powerful blocks.

Support for CSSCSS Cascading Style Sheets. shorthand properties 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. and block attributes

Theme JSON is becoming a powerful way of defining reusable CSS rules across Themes. As usage of this feature grows, it’s important to support common ways of setting style properties.

To this end this release introduces full support for CSS shorthand (eg: margin: 0) and longhand (eg: margin-left: 0)  properties.

For example, the following is an 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. from an example theme.json file which adds unique padding and border values for the Button block:

{
	"styles": {
		"blocks": {
			"core/button": {
				"spacing": {
					"padding": {
						"top": "20px",
						"right": "40px",
						"bottom": "20px",
						"left": "40px"
					}
				},
				"border": {
					"topLeft": "1em",
					"bottomRight": "60px"
				},
			},
        },
    },
}

Aaron Robertshaw has a full working example of custom CSS units in his theme.json gist.

This feature also extends to block attributes which allows for improved UIs to be developed to accommodate properties such as border-radius which can have both unique or uniform values set for each side (as shown in the video below).

CSS short/long-hand properties in action with border-radius.

11.0.0

Enhancements

  • Template Parts & Reusable Blocks: Add editing overlay. (31109)
  • General UIUI User interface: Improve UI/UXUX User experience for block manager search. (32922)
  • Widgets editor:
    • Display shortcuts for navigating regions. (32757)
    • Improve insertion point and drag-n-drop in the widgets screen. (32953)
    • Set 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. form to display only when not hidden. (33015)
    • Stretch Widgets editor layout to full height. (32905)
    • Add ability for Legacy custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. widget to transform into custom HTML block. (32862)
    • Remove the widget switcher block toolbar button for the Legacy Widget. (32733)
    • Wire handle_legacy_widget_preview_iframe to admin_init_hook. (32854)
    • Add to WidgetAreasBlockEditorProvider. (33166)
    • Replace “technical” error notice with a user-friendly version. (33165)
    • Replace legacy widget icon with its new version. (33041)
  • Block Library:
    • Media Text block: allow drag and drop media replacement for Media & Text. (29710)
    • Categories block: Add a label for screen readers. (33060)
    • Post Template Block: Add post-classes in the 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. for Post Template block. (30497)
  • Global Styles and Templates:
    • Allow left/right/center alignments when a layout is defined. (32810)
    • Allow longhand and shorthand properties in theme.json and block attributes. (31641)
    • Add filters to get_block_templates functions. (31806)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data:
    • Allow making context-specific requests using the data module. (32961)
    • Make apiFetch requests abortable via AbortController in @wordpress/api-fetch. (32530)

New APIs

  • Add 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. to define the default template used for the template mode. (32771)

Bug Fixes

  • Widgets Editor:
    • Adjust widget form margins in the new Widgets Editor. (33040)
    • Adjust Legacy Widget form styles to match editor. (32974)
    • Fix creating and editing non-multi widgets. (32978)
    • Fix wide widget styles to allow floated contents. (32976)
    • Fix to allow adding the same image twice in Widgets Editor. (32951)
    • Fix Legacy Widget edit style bleed. (32871)
    • Fix flaky widgets-related end-to-end tests. (33066)
    • Fix widgets background when loading theme styles. (32683)
    • Fix widget preview not working if widget registered via an instance. (32781)
    • Don’t display adminadmin (and super admin) notices on the Widgets Editor. (32877)
    • Remove classic block in Widgets Editor. (32800)
    • Disable “FSE” blocks in Widgets Editor. (32761)
    • Align widget 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. button. (32738)
    • Fix move to widget area checkmark. (33213)
    • Fix Widget Block: widget_id is undefined when a widget is placed. (33152)
    • Reset z-index on focused widget form. (33122)
    • Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. (33200)
    • Fix legacy widget height overflow. (33191)
    • Fix pasting blocks by setting html block as freeform content handler. (33164)
    • Fix slash inserter for widgets screen. (33161)
    • Add width: 100% to components-base-control inside wp-block-legacy-widget. (33141)
    • Fix error message – bail out if get_current_screen() returns null. (33261)
    • 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.:
      • Fix block toolbar deselection when clicking scrollbar. ([32762]
      • Avoid adding default block to empty widget areas in customizer. (32979)
        (#32762))
      • Fix apparent overflow in Customizer caused by widgets editor. (32749)
      • Fix scroll jitter in Customize Widgets. (32479)
  • Block Library
    • [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.] Button block: Add deprecation for style.border.radius number. (33117)
    • Query loop:
      • Select first Query Loop found from pattern selection. (32737)
      • Fix race condition for making Post blocks inside uneditable. (33037)
      • Fix full width children from scrolling horizontally only in the editor. (32892)
      • Set default block variations not to inherit from global query. (33163)
    • Group block: Avoid rendering the layout configuration twice. (33045)
    • Button block:
      • Use border support provided styles and classes. (33017)
      • Adding buttons should respect the preferred style. (31089)
    • Categories block:
      • Fix broken experience for lower privileged users when fetching Categories . (32994)
      • Fix crash when trying to access categories on insertion. (32989)
    • Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. (32983)
    • Archives block: add custom classes to archive dropdown. (32971)
    • Post terms block: Fix broken experience for lower privileged users when fetching Terms. (32947)
    • Site Title and Site Tagline blocks: readonly view when the user has no the right permissions. (32817)
    • Image block:
      • Fix block validation errors when clearing height/width. (32524)
      • Correctly set image size slug. (32364)
    • Site Logo block: fix broken experience for lower privileged users via permissions handling. (32919)
    • Site Logo block: Update Site Logo block UI and option syncing. (33179)
    • Show fewer warnings when blocks try to render themselves. (33032)
  • Block editor:
    • Fix switcher focus style. (33031)
    • Fix drag and drop indicator above first block and RTL drop indicators. (33024)
    • Fix glitchy block focus style when multi selecting blocks. (32927)
    • Fix collapsing appender when paragraph disabled. (32894)
    • Fix unintended HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. search request in <LinkControl> when showSuggestions is false. (32857)
    • Ensure only valid URLs or anchors within the text are automatically created as links. (32663)
    • Fix drag and drop indices when a block list contains a style element. (32776)
    • Consistent border with focus styles for block appender. (33022)
    • Improve scrolling experience in Safari (32824)
    • Avoid flash of background color when scrolling in Safari. (32747)
    • Refactor appender margin. (33088)
    • Block Inserter: Prevent page scroll when searching a block. (33012)
  • Components:
    • useNavigateRegions: Don’t remove click event if there’s no element. (32816)
    • Stop modifying the parent context and correctly memoize it. (32745)
    • Clear event listeners on unmount in Tooltip component. (32729)
    • Allow decimals in spacing controls. (32692)
  • CSS and styling:
    • Remove “is-dark-theme” rules from mixins. (33058)
    • Set explicit z-index on interface body to ensure it’s pinned under interface 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.. (32732)
    • Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. (32869)
  • Template editor:
    • Fix: Template editor header area is difficult to navigate with screenreaders. (32938)
    • Do not allow users to create templates with blank titles. (32809)
    • TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. (32744)
  • Global styles:
    • Fix a regression where custom-units are forced as an array. (32898)
    • Allow custom properties to merge. (31840)
  • Editor
    • Fix “Select all” behavior in the editor. (33167)
    • Prepublish Panel: Disable the Publish and Cancel buttons while saving. (32889)
    • Revert “Prepublish Panel: Disable the Publish and Cancel buttons while saving”. (33113)

WordPress Core compatibility

  • Block Library: Improve view script integration to account for WordPress Core. (32977)
  • Auto-enable the template editor for themes with theme.json only. (32858)
  • Unify handling for block view scripts. (32814)

Documentation

  • Handbook:
    • Update ESnext code in the block toolbar documentation. (32422)
    • Fix “Gutenberg” typo in dynamic blocks tutorial. (33013)
    • Polish the Gutenberg release docs, performance audit section. (32770)
    • Update 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. in Widget Block Editor documentation. (32759)
    • Block Editor and Block API:
      • Add link color supports to Block API documentation. (32936)
      • Unify Block Editor readme language and example. (31850)
    • Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. (32921)
    • Testing: Update testing overview documentation. (32829)
  • Components:
    • ServerSideRender: Update documentation for placeholder props. (33030)
    • Add ‘area’ key to function doc for gutenberg_get_block_templates. (32746)
  • Widgets: Add technical implementation details for Widgets Customizer. (33026)

Code Quality

  • Block Library:
    • Query Loop: use plain div for wrapper element in patterns. (32867)
    • Post Template block: remove gutenberg domain from Post Template block. (32804)
    • Ensure there is no direct import from core/editor store. (32866)
    • Improve block categories by moving several blocks from Design to Theme. (32568)
  • Typings:
    • Begin adding types, starting with redus-store/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./actions. (32855)
    • Type promise-middleware. (32967)
    • Add types to redux-store/metadata/selectors. (32965)
    • Add types to redux-store metadata reducer. (32942)
    • Redux routine: Add types. (21313)
  • Card component refactor:
    • Remove the g2 implementation of Card. (32764)
    • Update Card component Storybook story. (32763)
    • Update components provider story. (32743)
    • Update to g2 implementation. (32566)
  • Components:
    • Remove duplicated space utilities. (32852)
    • Unit control Utils: Update JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. documentation and add basic test coverage. (32774)
    • Allow for non-polymorphic components. (32796)
  • Editors & Interface:
    • Update pre-publish setting copy. (32874)
    • Update FullscreenMode from class components to functional components. (32925)
    • Remove @wordpress/editor as a dependency from @wordpress/block-library. (32801)
  • Testing:
    • Iframed editor: Add Masonry integration end-to-end test. (33008)
    • Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. (32797)
    • Fix broken the post-template-editor test. (32904)
  • Linting:
    • Promote lint rule to error when validating store string literals. (32537)
    • Cleanup PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Codesniffer warnings and enable fail. (26516)
  • Data: Handle context state updates in core-data reducer on edits. (32991)
  • APIs: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Improve image caret e2e-test. (32832)
    • Add getCurrentUser() to e2e test utils: , and use it for user switching. (33050)
    • Fix WP editor metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. e2e test. (32915)
    • Fix failing PHPUnit test caused by changes in WP core. (32888)
  • CSS & Styling:
    • Restrict imports of @emotion/css. (33051)
    • @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. (32834)
    • Upgrade to Emotion 11. (32930)
  • Linting:
    • Fix eslint-import resolver with extraneous dependencies. (32906)
    • Scripts: Update lint-md-docs script to use ignore-path. (32633)
  • Workflows:
    • Recursively clear node modules when building for ci. (32856)
    • Allow point releases after a new RC is out. (32560)

Performance

  • Add in memory cache for rich link previews data. (32741)

Experiments

  • Navigation Block and Editor:
    • Update the function name and correct the comment. (32918)
    • Correct the case of navigation __unstableLocation. (32783
    • Navigation block: Add an unstable location attribute. (32491)
    • Avoid double encoding of URLs in Navigation Link block. (32840)
  • Site Editor:
    • Fix logic error on site editor useSetting. (32793)
    • Fix oEmbeds not working in block template parts. (32331)

Performance Benchmark

Due to an ongoing issue with the benchmark tests details on the performance of Gutenberg 11.0 are currently delayed. They will be published here as soon as they become available.

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.04.82s29.82ms
Gutenberg 10.94.69s29.54ms
WordPress 5.75.51s29.79ms

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

Particular thanks to @bernhard-reiter, @priethor and @ntsekouras for guiding me through this release, and also to @hellofromtonya for a super quick last minute bug fix!


Updated on 2021-07-09: Added performance benchmark.

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

What’s new in Gutenberg 10.9? (23 June)

Two weeks have passed since the last 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/ release, which means the time has come for a new version. Gutenberg 10.9 introduces rich URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org previews for Link Control, the ability to expand/collapse nested blocks in List View, and a new name for the Query 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. 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. — Post Template. The release also includes enhancements and 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 for Widgets Editor.

Rich URL Previews

When clicking on links in the editor, it’s now possible to see a rich preview of a URL including site title, meta description, icon and image. This is the first feature to take advantage of the new `url-details` endpoint, the enhanced form of which was shipped in 10.8. Currently, rich previews are only enabled for links which point to external URLs and then only for rich text blocks that utilize the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. link format library. In the near future however, we expect to extend this to provide previews of internal URLs and to roll out support to more areas of the software.

List View Enhancements

This release brings a new feature to the List View. It’s now possible to expand and collapse nested blocks, which helps users navigate complex block structures. For example, users can collapse the content in sibling columns to concentrate on that hierarchy level and expand a single column to focus on it.

A new home for the Block Manager

The Block Manager has been moved from the Tools menu, and is now integrated with the new Preferences modal under the Blocks section, consolidating all editor-related preferences in the same modal.

Block Manager preferences

Updated template creation modal

This modal has been polished, including an improved welcome guide, to make creating new templates a breeze.

Renamed Query and Query Loop blocks

With the Query and Query Loop blocks becoming stable and coming to WordPress 5.8, they have been renamed to increase clarity about their functionality. The Query Loop block has been renamed to Post Template to better represent its purpose within Query, whereas the Query block label now refers to it as Query Loop.

10.9

Enhancements

  • Components:
    • UnitControl: Reduce code duplication for defined units. (32731)
    • BoxControl: Add support for grouped directions (vertical and horizontal controls). (32610)
    • Notice: Added onDismiss option in createInfoNotice. (32338)
  • Block Library:
    • Latest Posts: Limit latest-post authors dropdown to users with published posts. (32662)
    • Calendar: Add loading and empty state. (31504)
    • Query Loop: Add helpful text to the block. (32694)
    • Query Loop: Rename QueryLoop to PostTemplate and change Query label. (32514)
    • Spacer: Try an alternate min-height fix. (32543)
    • Heading: Show all heading levels in toolbar group. (32483)
    • Post Terms: Add a CSSCSS Cascading Style Sheets. class to identify the taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies.. (31832)
    • 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.: Move block to @wordpress/widgets. (32501)
  • Block Editor:
    • Enhance link control UIUI User interface with rich URL previews. (31464)
    • List View: Allow expanding and collapsing of nested blocks. (32117)
    • Editor Breadcrumb: Add a rootLabelText prop. (32528)
    • Don’t hardcode CSS units. (32482)
    • Refactor LinkControl component to support ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 17. (32552)
    • Remove snapshots from tests for LinkControl. (32592)
  • Block Support:
    • Update border support to allow non-pixel units. (31483)
  • Icons:
    • Add new icons. (32371)
    • Tweak people icon. (32354)
    • Expose trendingDown and trendindUp icons. (32124)
  • Template Editing Mode:
    • Update welcome guide language for the template editor. (32639)
    • Translate delete template confirmation message. (32647)
    • Disable renaming templates named by core; Display descriptions. (32636)
    • Update the template creation modal. (32427)
  • Post Editor:
    • Use the post type singular_name as the root Block Breadcrumb label. (32609)
    • Absorb block manager within blocks preferences. (32166)
  • Widget Editor:
    • Hide some settings from the “Options” menu on small screens. (32690)
    • Add Breadcrumbs Block. (32498)
    • Use button block appender in widget areas. (32580)
    • Add show block bread crumbs feature toggle to more menu. (32569)
    • Unhide the classic menu widget. (32431)

Bug Fixes

  • Block Library:
    • Image Block: Fix cover block exists check. (32666)
    • Embed: Fix embed to paragraph transform when caption has rich text formats. (32355)
    • Columns: Fix deprecation caused when adding a column. (32378)
    • Site Logo: Fix site-logo not getting removed on remove_theme_mod. (32370)
    • Social: Try to fix color inheritance for social links. (32625)
    • Social: Correctly position the link popover when List View is open. (32525)
    • Code: Try an experimentalSelector. (31742)
  • Block Editor:
    • RichText: Fix loss of list content when switching list types. (32432)
    • useBlockDropZone: Fix horizontal indicator. (32589)
    • Inserter: Fix insertion point displaying when there are no inserter items. (32576)
    • Drop indicator: Show around dragged block and show above selected block for file drop. (31896)
    • Fix vertical scroll in horizontal toolbar. (32655)
    • Fix block multi selection in nested blocks. (32536)
    • Fix block toolbar overlap with 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.. (32424)
  • Blocks:
    • Avoid keeping the same client ID when transforming blocks. (32453)
    • Allow themes to add inline styles for all blocks when using lazy styles loading. (32275)
  • Components:
    • RadioControl: Add hideLabelFromVision prop. (32414)
    • DatePicker: Fix crash when navigating between months. (31751)
    • Autocomplete: Prevent setting state for unmounted component. (32654)
  • Editor:
    • Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. (32658)
  • Widget Editor:
    • Don’t delete a widget if it is moved to a different area. (32608)
    • Fix button spacing in header. (32585)
    • Decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities for name and description props. (32503)
    • Fix dirty state after adding new block. (32573)
    • Don’t add undo levels when editing records on save. (32572)
    • Save deleted and restored widgets. (32534)
    • Don’t show widgets in menu without theme support. (32420)
    • Fix inspector opening on click outside widget area. (32450)
    • Legacy Widget: Don’t display “No preview” when widget has image tags. (32605)
  • Post Editor:
    • Prevent locking users in saving state when saving 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. boxes fails. (32485)
    • Edit Post: Add metaBoxUpdatesFailure action. (32623)
  • Full Site Editing
    • Only add skip-link for block themes & templates on the frontend. (32451)
  • Storybook:
    • Fix misc warnings. (32401)
  • Data:
    • useSelect: Silently error (for block zombie children). (32088)

Performance

  • Block Editor: Remove is-typing root class. (32567)
  • Header Toolbar: UseCallback to avoid unnecessary rerenders. (32406)

Experiments

  • Component System:
    • Promote Scrollable component to a full export. (32446)
    • Promote Surface component to a full export. (32439)
  • Global Styles:
    • Allow presets to provide an empty set of values. (32679)
    • Allow theme authors hook into the preset classes generated by global styles. (32627)
    • Update WP_Theme_JSON 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. so presets are always keyed by origin. (32622)
    • Make syntax errors in theme.json visible to users. (32404)
    • Enqueue global styles in editor only once. (32377)
    • Enqueue core and theme colors by using separate structures per origin. (32358)
    • Do not migrate the old typography support if core already did it. (32487)
    • Generate classes and custom properties for global styles in the same way the post editor does. (32766)
  • Full Site Editing:
    • Template resolution for new posts and pages. (32442)
    • Monopolize navigation in Site Editor. (31810)
    • Prevent duplicate queries. (32700)
    • Split theme.css styles loading. (31239)
  • Navigation Editor:
    • Alternative fix: Set persisted menu id when no menus or missing menu. (32313)

Documentation

  • Handbook:
    • Update references to register_block_type_from_metadata. (32582)
    • Fix duotone support documentation. (32440)
    • Detail the Gutenberg release post process. (32429)
    • Update Legacy Widget documentation with new info on show_instance_in_rest feature. (32726)

Code Quality

  • Components:
    • Remove duplicated compose dependencies. (32709)
    • Sort entries in packages/components/tsconfig.json. (32675)
    • Update the popover component to rely on useDialog. (27675)
    • Card: Add types. (32561)
    • Card: Refactor subcomponents folder structure. (32557)
  • Compose:
    • Add types to useDialog and useFocusOnMount. (32676)
    • Add types to withSafeTimeout. (32674)
    • Type withState as any. (32326)
  • Block Library:
    • Page List: Avoid generic function names for page list block internal functions. (32736)
    • Latest Comments: Correct the format used for duplicate hook documentation. (32563)
    • Login/out: Update documentation for render_block_core_loginout function. (32158)
  • Block Editor: Remove unused select block function. (32532)
  • Core Data: Fix typos. (32480)
  • Editor: Fix different typos in inline comments, deprecation warnings and variable names. (32474)
  • Linting:
    • Edit Post: Fix no-string-literals warning. (32518)
    • Add ESLint import resolver. (31792)
  • 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:

Tools

  • Workflow:
    • Fix the add milestone githubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ action. (32691)
    • Use a different cache key for the PR automation workflow. (32588)
    • Improvements to NPM package caching across workflows. (32458)
    • Limit when release artifacts are built on forks: Pt. 2. (32494)
  • Build:
    • Load .min.js files even in dev mode, output unminified assets only in prod. (32621)
    • Upgrade husky package to the latest version. (32077)
    • Generate minified .min.js and unminified .js files for GB js entry points when building. (31732)
    • Include Legacy Widget block files in the plugin build. (32803)
  • End to End Tests:
    • Update mentions tests to use toMatchInlineSnapshot. (32727)
    • Add more user auto-completer (mentions) coverage. (32697)
    • Ignore JQMIGRATE (jQuery migrate) deprecation warnings. (32656)
  • Linting:
    • Update linting and formatting for test plugin files. (28033)
    • Update Eslint JSDoc package, introducing JSDoc line alignment check. (25300)
  • wp-env: Bump TT1 Blocks to v0.4.7. (32661)

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.94.50s28.93ms
Gutenberg 10.84.91s30.30ms
WordPress 5.75.71s32.09ms

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

Thanks, @priethor, @get_dave, and @mikeschroder for helping with the release post.  Thanks to @youknowriad and @bernhard-reiter for coordinating the release.

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