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

What’s new in Gutenberg 10.8? (9 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.8 focuses on stability and performance, while also introducing enhancements to the Template Editor and enables more design tools for blocks, among many other things!

Performance Improvements

This release puts a focus on performance by providing iterative improvements. For instance, Gutenberg now allows passing of __experimentalLayout to a memo’d object so re-renders are not triggered when layout data doesn’t change. Thanks to this, blocks like BlockList don’t need to re-render so often, optimizing the editor performance.

More 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. Design Tools

To extend the design capabilities of blocks, more design tools have been enabled in this release, including support for font-weight for the heading block and support for custom fonts for the List block. As with other design tools, you can easily configure them in your theme.json file. 

Furthermore, it is now possible to add custom margin and padding to the Navigation link block.

Template Editor Enhancements

Gutenberg 10.8 also introduces a couple of enhancements for the Template Editor for a better user experience. Now, the title area in the Template Editor corresponds to the current post title. Also, the appearance of the template details popover has been enhanced with more detailed information and an improved layout. 

These improvements help users understand what post and template are being edited with a more clear and descriptive interface.

10.8

Enhancements

  • Block Editor:
    • Update Modal styling. (31639)
  • Block Library:
    • Archives Block: Show the label for archives block dropdown. (30527)
    • Audio Block: Add an example preview. (32333)
    • File Block: Add an example preview. (32350)
    • Heading Block: Add support for font-weight. (27639)
    • List Block: Add font family to the list block. (27510)
    • Page list block: Add active page classes. (32134)
    • Site Logo: Use option instead of theme-mod. (32229)
  • Components:
    • BoxControl: Add allowReset option. (32345)
      General Interface:
    • Remove opacity animation on canvas. (32266)
  • Design tools:
    • Add Letter-spacing and enable this for site title and site tagline. (31118)
    • Block Supports: Allow skipping spacing support serialization. (31973)
  • Reusable Block:
    • Add Convert to Regular Blocks button to ellipsis Dropdown. (32310)
  • 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 parsing and retrieve additional data in REST url-details endpoint. (31763)
  • Template Editing Mode:
    • Don’t display snackbar with the Welcome Guide. (32076)
    • Update the appearance of the template details popover. (32042)
    • Update the title area in the template editor. (32037)
  • Block-based 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.:
      • Add preferences menu group label to widgets and customize 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. (32259)
      • Display wide widgets as popovers in Customizer. (31736)
    • Editor:
      • Link to widgets.php instead of themes.php?page=gutenberg-widgets. (32299)

Bug Fixes

  • Block Library:
    • Image Block: Fix image border radius. (32393)
    • List Block: Fix theme.json styles for the core/list block. (32343)
    • Latest Posts: Limit latest posts 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. width to 100%. (32245)
    • Legacy Widget Block:
      • Fix legacy widget block 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.. (32300)
      • Fix legacy widget previews. (32260)
    • Search block: Fix vertical alignment of the search button text. (32340)
  • Block Editor:
    • Block Variation Transforms: Make focus style valid CSSCSS Cascading Style Sheets.. (32305)
    • Fixed Random Collapse of Colors Setting Section. (32388)
    • Block Toolbar:
      • Always close the options menu after toggling 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.. (31921)
      • Fix toolbar alignment in widget block editor. (31991)
    • Iframe: Fix embed dimensions with missing wp-embed-responsive class. (32057)
    • Patterns: Fix allowed patterns check. (32376)
  • Block-Based Widgets:
    • Editor:
      • Fix error when saving empty Legacy Widget block. (32359)
      • Assume light theme when editor canvas background color isn’t set. (32477)
    • Customizer:
      • Center the welcome image in the narrow viewport of widgets customizer. (32264)
      • Fix aspect ratio of welcome image. (32302)
      • Fix deselecting block when inspector is opened. (32361)
      • Fix escape key events in customizer closing the editor. (32175)
      • Fix some smaller styling issues and bugs in Widgets Customizer. (32072)
      • Fix creating and replacing legacy widgets in customizer. (32005)
  • Components:
    • SuggestionsList: Try to use a unique “key”. (32344)
    • Update Dropdown’s close-on-blur logic to work inside dialogs. (32133)
  • Editor:
    • Allow non-latin characters in slugs. (32232)
    • Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. (32341)
  • General Interface: Fix overlap of Notices and block toolbar. (32238)
  • Template Editing Mode: Remove metaboxes from template mode. (32315)
  • Fix the layout definition in the template mode. (32425)

Performance

  • Buttons: Move options to constants to avoid unneeded renders. (32356)
  • Experimental Layout: Pass the same object when no data changes. (32380)
  • Navigation: Avoid rerendering when the placeholder does not change. (32357)
  • Update Welcome Guides to use external image URLs. (32026)

Experiments

  • Block Editor:
    • Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. (32063)
  • Component System:
    • Add missing Divider, Heading type reference in tsconfig. (32104)
    • Adds a new ZStack component. (31613)
    • Adds new ItemGroup and Item components. (30097)
    • Add new BaseField Component. (32250)
    • Fix Shortcut polymorphism. (31555)
    • Promotes the Elevation component to a full export. (31614)
  • Global Styles:
    • Bugfix: Generate classes from preset slugs in the same way (server & client). (32352)
    • Fix Logic to enable custom colors, gradients, and font sizes. (32200)
    • Fix incorrect useCustomUnits import. (32248)
    • Group typographic block supports under a typography key. (32252)
    • Letter spacing should also respect skip serialization flag. (32459)
    • Skip typography serialization. (32444)
  • Full Site Editing:
    • Align block hover and select styles across list view, site editor, select mode. (31277)
    • Alignment styles: Centre blocks using grid not margins. (32231)
    • Avoid duplicate skip-links in WP 5.8+. (32346)
    • Remove now-obsolete get_template_hierarchy(). (32116)
    • Templates: Remove now-obsolete gutenberg_get_template_paths(). (32066)
  • Navigation:
    • Block:
      • Fix css bleed from navigation. (32384)
      • Fix collapsing 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. of Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.. (32081)
      • Lock the document from scrolling when the modal is open. (32269)
      • Refactor Navigation block paddings/margins to inherit global styles. (31878)
    • Editor:
      • Allow block attributes passed to block renderer by way of wp_nav_menu. (31911)
      • Hide sidebar when a menu isn’t selected. (32090)
      • Fix the visible widget area toolbar. (32262)
      • Fix block toolbar position after scroll. (32212)
      • Move modal state to ManageLocations component. (32078)
  • Site Editor:
    • Fix broken template part converter modal styles. (32097)
    • Remove title attribute from NavigationItem inside the site-editor. (30744)

Documentation

  • Handbook:
    • Fix broken contributors readme files. (32272)
    • Fix misspelling in the Widgets Block Editor section. (32242)
    • Mark all experimental components in the handbook. (32147)
    • Update the create a block theme tutorial. (31269)
    • Update iOSiOS The operating system used on iPhones and iPads. Simulator device command in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native documentation. (32383)
  • Packages:
    • Navigation Editor: Augment and improve Nav Editor (and block) documentation. (31891)
    • Components: Fixed documentation for units attribute in Unit Control. (31901)

Code Quality

  • Block Editor:
    • Rich text:
      • Contextual default shortcut removal. (32327)
      • Remove inline display warning. (32013)
    • Colors: Remove __experimentalUseColors hook. (31438)
    • Remove usages of withState from edit-post and editor. (32349)
  • Block Library:
    • List View: Simplify the BlockNavigation component. (31290)
    • Navigation: Simplify htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. selector in nav burger menu. (32303)
    • Remove “class=” wrapper to already wrapped attributes. (29214)
    • Query Block: Remove query context leftovers. (32093)
  • Blocks Package: Make getBlockSupport support any lodash path.. (32322)
  • Block Supports: Avoid a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice when render_block() is called without attributes. (32135)
  • Components:
    • Button: Deprecate isPrimaryisSecondaryisTertiary and isLink props in favour of variant prop. (31713)
    • Combobox: Remove duplicated ComboboxControl component. (32397)
    • Dashicons: Add types to Icon . (32219)
    • Disabled: Add types to Disabled components. (32105)
    • Remove all withNext wrappers. (32205)
    • Rename ViewOwnProps to PolymorphicComponentProps. (32053)
    • Require explicit children prop for all components. (31817)
    • UIUI User interface Context: Delete unused types from context. (32254)
    • UI Popover: Remove unused content property from types definitions. (32049)
  • Compose:
    • Add types to useRefEffect and clipboard 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.. (31603)
    • Add Types to withGlobalEvents as any. (32290)
    • Add types to useWarnOnChange. (32288)
    • Add types to useViewportMatch. (32287)
    • Add types to useDropZone. (32286)
    • Add types to useDragging. (32285)
    • Add types to useThrottle and typecheck useFocusOutside. (32170)
    • Add types to useKeyboardShortcut. (32168)
    • Add types to useResizeObserver and type checking to useIsomorphicLayoutEffect. (32111)
    • Add types to useFocusReturn. (31949)
    • Add types to usePrevious. (31944)
    • Add types to useReducedMotion and useMediaQuery. (31941)
    • Add types to useMergeRefs. (31939)
    • Add test to useMergeRefs for disabling refs + better documentation. (32044)
    • Add types to useDebounce. (32015)
    • Deprecate withState in favor of useState. (32368)
    • Simplify compose function documentation and point to lodash documentation for it. (32324)
  • Global Styles:
    • Avoid enqueuing global styles twice when running on WordPress 5.8. (32372)
  • Keyboard Shortcuts:
    • Multi select: select all: Restore ref callback. (32318)
  • Linting:
    • Fix eslint warnings in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data package. (32198)
    • Fix eslint warnings in the edit-navigation package. (32196)
    • Fix eslint warnings in the edit-post package. (32195)
    • Fix eslint warnings in the edit-site package. (32156)
    • Fix eslint warnings in the edit-widgets package. (32155)
    • Fix eslint warnings in the editor package. (32153)
    • Fix eslint warnings in the nux package. (32145)
    • Fix eslint warnings in the rich-text package. (32142)
    • Fix eslint warnings in the reusable-blocks package. (32141)
  • Navigation Editor:
    • Fix React warning. (32165)

Tools

  • Babel presets: Prefix build with node command for Windows environments. (#32258). (32329)
  • Workflow:
    • Limit when workflows run on forks. (32114)
    • Only calculate the compressed size on pull requests when necessary. (32161)
    • Performance Tests Workflow:
      • Polish Bash script. (32284)
      • Run suite atop latest stable major WordPress version. (32244)
      • Use latest WP branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". for release tests. (32277)
  • End to End Tests:
    • Fix inserting cover block intermittent failure. (32014)
    • Navigation Editor:
      • Fix failing end-to-end tests. (32043)
      • Skip “Change detection” tests. (32151)
    • Move the Query and PostTitle end-to-end tests out of the experimental directory. (31691)
    • Multi select: Add end-to-end test for gruadual select all. (32304)
    • Remove redundant widget 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. endpoint tests. (32298)
    • Skip tests that are failing with the latest WordPress core. (32228)
  • Eslint: Ignore some eslint rules in react-native folders. (32143)

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.85.78s42.03ms
Gutenberg 10.76.75s41.96ms
WordPress 5.76.95s42.81ms

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

Thanks, @ntsekouras for managing the release and @priethor for helping and guiding me with the release post.

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

What’s new in Gutenberg 10.7? (26 May)

We are already at the end of May and, after making it through the WordPress 5.8 feature freeze, 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/ version is among us! Version 10.7 represents the last Gutenberg release that will be included in the upcoming WordPress 5.8, so efforts have been focused on bringing forward many of the features that will be included in it. Gutenberg 10.7 introduces new features like the persistent List View in the Post Editor, responsive navigation menus, many design tools for blocks, and enhancements to the top toolbar, as well as iterative performance improvements and a lot of 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.

Persistent List View in the Post Editor

Before Gutenberg 10.7, the List View available in the Post Editor was displayed in a popover and would close after focusing somewhere else on the page. Starting with Gutenberg 10.7, the persistent List View previously available in the Site Editor is enabled in the Post Editor as well, providing a 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. that displays a full post 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. tree. This List View also provides some visual cues as it highlights the currently selected block(s), as well as accents in the canvas the corresponding block when hovering over the list entries. Moreover, anchors added to blocks are displayed in the list, providing a comprehensive view of the post hierarchy and structure. All these improvements combined will make navigating complex content much easier!

Responsive Navigation block

This release introduces the first iteration of responsive menus in the Navigation block. By introducing the new “Enable responsive menu” block option, the Navigation block will collapse into a so-called “Hamburger menu” when displayed on smaller screens. This implementation also prioritizes 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) by providing a fully keyboard-navigable menu.

More block design tools

Gutenberg 10.7 continues to bring us new design tools and to support existing ones in blocks.  This includes custom margin block support with configurable sides, supported by blocks like Site Title and Site Tagline.  The Query block had a special focus in this release with new design options in the form of supporting layout and color options along with the Column block, which now supports color and padding for individual columns.

Top toolbar enhancements

The “Top toolbar” mode’s behavior and placement have been refined in this release so that wider screens won’t display the editor bar and the block toolbar together anymore, improving the user experience. Now when enabled, the top toolbar has a fixed position stacked on top of the canvas, below the editor top bar, independent of the browser width. Furthermore, implementers will also benefit from this iteration unifying toolbar APIs under one simple <BlockTools /> component.

Loading patterns from the Pattern Directory

Working towards providing rich collections of block patterns from the inserter, patterns can now be inserted directly from the WordPress.org Pattern Directory, in a similar way blocks can. This integration opens the door to an exciting future full of beautiful patterns as the number of patterns available in the directory grows. If you want to know more, you can stay tuned for Block Pattern Directory updates and check the most recent design iterations for the Pattern Directory.

10.7

Enhancements

  • Block Editor:
    • Standardize block styles cursor on hover. (31188)
    • Support scripts in iframed editors. (31873)
  • Block Library:
    • Normalize theme block toolbars. (31952)
    • Buttons: Use column-gap for styling. (31386)
    • Column: Add color and padding support to individual column block. (31778)
    • Cover: Allow transforming from group block. (30890)
    • Media & Text: Add media width control. (31002)
    • Post Comments: Add basic CSSCSS Cascading Style Sheets. to the block. (30382)
    • 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.: Update read more placeholder text. (30959)
    • 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.: Change wrapper element to figure. (31595)
    • Query:
      • Add layout and color support. (31833)
      • Update bundled patterns to have inherit:False. (31856)
      • Allow term addition from user case-insensitive input. (31301)
    • Site Logo: Add link toggle option. (31162)
    • Site Tagline:
      • Add margin block support. (31809)
      • Expand the site tagline block description. (31426)
    • Site Title:
      • Add additional text formatting options. (31734)
      • Add margin block support. (31728)
    • Social Links: Add some padding to the “click plus to add”. (31927)
  • Components
    • Add Spacer. (31509)
    • Improve display for multiple action buttons in notices. (31799)
    • Polish the switcher for horizontal blocks. (31645)
    • Promote Divider and use readable prop names. (31556)
    • Promote Grid. (31559)
    • Promote View. (31542)
    • Promote VStack and HStack. (31300)
    • UnitControl: Add support for unit step per unit type. (30376)
  • Design tools:
    • Add margin block support with configurable sides. (30608)
    • Add option to disable duotone. (32002)
    • Add reset button to Layout controls. (30828)
    • Add server-side support for margins. (31808)
  • Icons: Update icons. (31533)
  • List View:
    • Display block anchor in List View when set. (31992)
    • Enable persistent List View in the post editor. (31047)
  • Patterns: Load patterns from wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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.. (28800)
  • Template Editing Mode:
    • Add a welcome guide to the template editor. (31330) (32055)
    • Add a Delete template action. (31678)
  • Word count: Adjust to count numbers as words. (27288)

New APIs

  • Babel Preset Default: Configure @babel/preset-env preset to respect a local Browserslist configuration. (31898)
  • Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType. (32030)
  • Global Styles: Rename and stabilize useEditorFeature as useSetting. (31587)
  • Stacked/unified block toolbar. (31134)
  • Babel Preset Default: Add polyfill for WordPress built from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-js. (31279)

Bug Fixes

  • Block Library:
    • Cover:
      • Remove fixed background when previewed in patterns list. (31640)
      • Show placeholder only if it has no inner blocks. (31402)
    • Gallery:
      • Fix focus caption prop for native. (32029)
      • Fix identical images getting duplicated when moving. (30555)
    • Image:
      • Remove figure margins consistently in image blocks. (31650)
      • Fix cover transform and excessive re-rendering. (32102)
    • Post Content: Apply the_content 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. even if content is empty. (31997)
    • Post Comments Count: Fix attributes declaration. (31976)
    • Post Comment Form:
      • Fix stylesheet dependency. (31528)
      • Fix to allow post comment button to inherit button & global styles automatically. (31338)
    • Post Featured Image:
      • Fix non-interactive placeholder when outside of a post context. (31663)
      • Fix placeholder 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.. (31709)
      • Fix selection scroll into view. (31835)
      • Fix image width for wide aligned Post featured image. (32070)
    • Site Logo:
      • Fix duplicate supports declaration. (31544)
      • Return nothing if logo is not set. (31513)
      • Only request media entity when a site logo has been chosen. (31673)
    • Template Part:
      • Don’t show the currently used template part as an option in the ‘replace’ flow. (31720)
      • Fix template part selection searches to use title/area instead of slug/theme. (31520)
      • Use label and icon per variation when displaying placeholders. (31721)
  • Block Editor:
    • Clear selection on 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element click, fix bottom click redirect. (31385)
    • Fix block ref when multiple useBlockProps 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. are called. (31906)
    • Fix moving animation for nested blocks. (31945)
    • Fix selecting aligned blocks. (31904)
    • Fix scrolling to the inserted block issue in the iFramed block editor. (31448)
    • Prevent rendering self also when the wrapper block matches the inserted block. (31592)
    • Toolbar:
      • Fix showing toolbar when caret enters formatting (and extract as implementation detail for the block editor). (31664)
      • Fix toolbar in device preview. (31600)
  • Design tools:
    • BoxControl:
      • Filter out unit only values when checking values defined. (31779)
      • Fix tooltip display for unlinked box control inputs. (31741)
    • Color picker:
      • Fixes color picker segmented control rendering and scrolling issues. (30994)
      • Fix text. (30039)
    • Duotone:
      • Fix duotone transform not transferring settings between blocks. (31801)
      • Fix duotone padding crash. (31780)
    • Font-family: Fix typo in font-family supports for dynamic blocks. (31974)
    • Spacing Support:
      • Properly hide UIUI User interface for disabled properties. (31726)
      • Fix custom units for margin. (31776)
  • Inserter: Hide patterns tab if no patterns are available. (31687)
  • Patterns:
    • Check for allowed blocks recursively in patterns. (30366)
    • Fix unregister_block_pattern notices. (32025)
  • Post Editor: Fix template name displaying incorrectly. (32035)
  • Server Side Rendering: Re-enable passing post_id query arg (#31786). (31787)
  • Template Editing Mode: Fix wrapper block name for template mode. (31985)
  • Writing flow, multi-selection:
    • Fix caret placing when the target is out of view. (31506)
    • Gradually ‘select all’ layers of nested blocks. (31859)
  • Fix errors caused by commits to WordPress core. (32176) (32183) (32059)
  • Components: Fix the list of package dependencies. (32167)
  • Fix issue with 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. title overlapping block toolbar. (32140)
  • Correctly read rawRequest for frontend ESM. (31917)
  • Fix generation of presets classes per block. (32190)
  • 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. Screen:
    • Fix unsaved changes notification. (31757)
    • Fix call to undefined __experimentalRegisterExperimentalCoreBlocks. (32138)

Performance

  • Block editor styles: Memoize transform. (31553)
  • Block editor async mode: Enable only for blocks out of view. (30995)
  • Improve performance of term search. (31703)
  • Blocks package: Memoize getBlockVariations selector. (32120)

Experiments

  • Block Library: Hide the PostAuthor block behind the Gutenberg experimental flag. (31983)
  • Block-based Widgets:
    • API:
      • Improve get_merged_data API so it requires less knowledge from the consumer. (31552)
    • Customizer:
      • Add ‘more’ menu. (31970)
      • Add undo redo to Widgets Customizer. (31653)
      • Add Welcome messaging. (31968)
      • Clear selected block when focusing on element outside the editor. (31530)
      • Fix removing legacy widget not working in customizer. (31535)
      • Implement mobile responsive block toolbar. (31589)
      • Remove Widgets Customizer experimental flag. (31876)
    • Widgets Editor:
      • Add default notices support. (31578)
      • Add more menu. (31926)
      • Add Welcome Guide. (31925)
      • Remove widget screen empty link in adminadmin (and super admin). (31408)
      • Update toolbar and notice positioning. (31582)
  • Navigation Editor and Block:
    • Add home link block. (30926)
    • API:
      • Add locations to the menu response. (31656)
      • Change default to 100 menu items returned. (21243)
    • Allow space between on page list. (29771)
    • Bring implementations of convert nav menu items to blocks back into sync. (31602)
    • Editor:
      • “Add new pages” use menu entity. (31643)
      • Add padding for navigation screen. (31583)
      • Clear ‘stub’ navigation post edits on save. (31735)
      • Fix menu location assignment. (31594)
      • Fix editor margin. (31493)
      • On mobile viewports, reveal the block inspector when clicking the menu name button. (31220)
      • Update sidebar. (31821)
      • Warn the user about unsaved changes. (31197)
    • Enable justification for burger menu. (31877)
    • Extract Navigation Block data fetching and management to hook(s). (31825)
    • Fix nav block hover z index. (31929)
    • Fix nav placeholder colors and height. (31875)
    • Improve the navigation block setup state / placeholder. (31371)
    • Introduce useMenuEntityProp hook. (31132)
    • Normalize converting nav menu items to blocks between Editor and Block. (31606)
    • Responsive Navigation. (30047)
    • Submenus shouldn’t take space unless they’re actually open. (31881)
  • Global Styles
    • Block Supports: Allow skipping serialization of typography attributes. (30880)
    • Fix condition for global styles on mobile. (31844)
    • Fix global styles settings retrieval for REST. (31534)
    • Make core color classes and custom properties always available. (31669)
    • Remove color.link from valid styles and alphabetize the rest. (31516)
    • Return consolidated global styles in REST Request. (31762)
    • Use elements mechanism for link color instead of a CSS variable. (31524)
    • Use mobile context in settings request & global styles. (31819)
    • Use wp_theme 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. for wp_global_styles cpt. (31436)
    • 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.: Replace hardcoded CSS_UNITS and inherit units from theme.json. (31822)
  • Full Site Editing:
    • Template Loader: Make templates arg required. (31671)
    • Simplify template loader logic. (31604)

Documentation

  • Handbook:
    • Add dedicated Block Styles page under Block API directory. (31055)
    • Add info on how to connect to the WP ENV MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. database. (31975)
    • Capitalize 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/ properly in contributors README. (31549)
    • Clarify ‘Applying styles from a stylesheet’ how-to guide. (31824)
    • First pass at the documentation for the Widgets Block Editor. (31577)
    • Fix link to ESNext in callout. (31512)
    • Make the theme.json examples copy-pasteable. (32040)
    • Update Glossary with more FSE terminology. (31525)
  • Packages:
    • Add required “directory” prop to package.json template in packages documentation. (31570)
    • Fix typo: “packages” -> “package”. (32036)
    • Improve packages documentation – document root package json and public API knowledge. (31598)
    • Remove duplicate 1.52.0 changelog entry. (31659)
    • Scripts: Fix the CHANGELOG for @wordpress/scripts package. (31532)
    • Typo in edit-navigation layout translators note. (31541)

Code Quality

  • Block editor:
    • Block popover: Move scroll handling to block tools. (31611)
    • Log an error if styles are loaded through the compatibility layer. (31870)
  • Block Library:
    • Post Comments: Make CSS less specific. (31711)
    • Image/Gallery: Remove use of unstableOnFocus. (31796)
  • Linting:
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher lint issues. (32039)
    • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warning for alignment. (31931)
    • Fix lint issues. (31790)
    • Ignore data-no-store-string-literals rule for native files. (31936)
  • Components:
    • Add ToolbarDropdownMenu to render dropdown menus properly inside toolbars. (31460)
    • Don’t pass down index through context. (31852)
    • Remove color() utility function, use values directly. (31661)
    • Remove config() utility function, use values directly. (31646)
  • Compose:
    • Add types to withInstanceId and corresponding hook. (31341)
    • Add types useConstrainedTabbing. (31548)
    • Add types useAsyncList. (31523)
  • Docgen:
    • Replace assertions for getIntermediateRepresentation unit tests with snapshots. (31547)
    • Split getIntermediateRepresentation unit tests in smaller tests. (31468)
  • Inserter: Mark the inserter slot as unstable. (31417)
  • Multi-select:
    • Use ref callback for focus out, merge native selection hooks. (31618)
    • Use writing flow container for focus. (31572)
  • Rich text:
    • Build in isSelected check for children. (31802)
    • Consolidate applying from props. (31635)
    • Each hook should create its own ref. (31477)
    • Extract implementation-specific undo handling of automatic changes. (31676)
    • Extract internal delete handling. (31637)
    • Extract persistent change marking. (31760)
    • Extract splitValue to separate file. (31803)
    • Extract input and selection. (31631)
    • Extract indent list item on space. (31628)
    • Extract select object. (31627)
    • Extract paste handler. (31619)
    • Fix props on DOM element warnings. (31883)
    • Move autocomplete key handler to ref callback. (31770)
    • Move implementation specific attributes. (31674)
    • Move implementation specific delete and enter handling. (31644)
    • Remove avoiding setting selection on mount. (31788)
    • Remove dependency on block client ID. (31752)
    • Remove duplicate active formats state. (31771)
    • Remove old broken format prop. (31767)
    • Remove 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.) name dependency. (31679)
    • Simplify with hooks. (31718)
  • Rename construct_wp_query_args to build_query_vars_from_query_block. (32041)
  • Theme.json:
    • Remove unused code. (31666)
    • Remove declarations so API has coherence. (31596)
    • Remove: Declarations parameter from compute_style_properties. (31573)
  • Writing flow:
    • Extract and simplify “select all”. (31855)
    • Extract arrow nav. (31851)
    • Extract tab behavior to hook. (31834)
  • 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/.: Use batch endpoint included in Core. (32174)
  • Prepare for adding the Widgets block editor to Core. (32136)
  • Remove gutenberg domain from core blocks. (32152)
  • Remove filter_var from blocks. (32046)
  • 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: Update block editor settings to work with context. (32159)

Tools

  • End-to-end tests:
    • Add template loader unit tests. (31498)
    • Fix end-to-end test inserting the cover block. (31866)
    • Fix flaky change detection tests causing intermittent failures. (31861)
    • Fix intermittent embeds failure. (31860)
    • Fix intermittent failure of rich text end-to-end test. (31864)
    • Increase test coverage for pattern transforms. (31689)
    • Navigation: Add unit tests for onChange handler and fix cases around custom links tags and post-format. (31259)
    • 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. filters performance test. (32028)
    • Skip unstable end-to-end tests. (32031)
    • Try stabilizing customize widgets end-to-end tests. (32023)
    • Update skip failing template mode end to end test. (32017)
    • Update tests for changes in core logic. (31982)
  • Gutenberg plugin: Update compatibility layer for loading separate core block assets. (31894)
  • Workflow:
    • Replace the Cancel workflow with native GitHub Action functionality. (32016)
    • Remove Custom Properties PostCSS plugin. (31715)

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.75.28s28.4ms
Gutenberg 10.65.51s26.18ms
WordPress 5.75.35s29.19ms

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

Thanks @youknowriad for managing the release.

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

What’s new in Gutenberg 10.6? (12 May)

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.6 introduces 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. supports, 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. Pattern suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, 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. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilities of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe

Dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.: Loading the template editor inside of an 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. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/.. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the 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.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • A11yAccessibility 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): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • 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 color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • 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:
    • Call deprecated 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. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • 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.:
      • Add white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not 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/.. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of 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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen collapsing 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice to 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. block attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponentifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken 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.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on 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/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

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.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

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

Special thanks to @priethor and @youknowriad for guiding me through this release!

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

What’s New In Gutenberg 10.5? (28 April)

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 already available! Gutenberg 10.5 introduces many new 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. patterns, embedded PDFs, enhancements to the Template Editing Mode, improvements to Widgets 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., and 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 as well.

New block patterns and pattern transformations

Gutenberg 10.5 puts the focus on bringing several new block patterns, revisiting the bundled block patterns as well as adding more opinionated Query Block ones. It also enables block pattern transformations that are contextual to the currently selected simple block, without inner blocks.

Enhancements to the Template Editing Mode

With the goal of editing templates with blocks, a “Template Editing Mode” was introduced in recent Gutenberg versions so that users can edit a template directly from the post editor, switching between post and template editing. This release provides several flow and interface enhancements to this feature, including the possibility to create custom block templates in classic themes. Other improvements include unifying the saving flow between Template Mode and Default Mode, moving the Template Mode Edit and New links to a dedicated new panel, and replacing the Document tab with a Template tab in Template Mode.

Embedded PDFs with File Block

The File Block now supports embedding PDFs in most major browsers. This option can be enabled or disabled through a 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. toggle.

Improvements to Widgets in the Customizer

While Gutenberg 10.4 enabled Block Widgets in the Customizer, this new iteration enhances the experience by enabling upload capabilities for media and Richtext formats.

No more auto-scrolling when selecting blocks

Before 10.5, when any block that was slightly out of view was selected, the page would automatically scroll so that the top of the selected block was visible, potentially disorienting the user. From 10.5 onwards, the scroll will only happen if the block is not selected directly by the user.

10.5

Enhancements

  • Buttons Block:
    • Add Typography support. (30394)
    • Explicitly add text-align-center to legacy buttons. (30525)
    • Update to use color support utils to retrieve classes and styles. (30870)
  • Columns Block: Add column count to the column block label. (30248)
  • File Block: Add support for embedding PDFs. (30857)
  • List Block: Add placeholder attribute. (30958)
  • Post Comments Link Block: New block added. (29564)
  • Site Logo Block:
    • Update the site logo description to be more illustrative. (30909)
    • Add a default width value. (30907)
  • Site Title Block:
    • Normalize the toolbar. (30999)
    • Normalize the toolbar (II). (31032)
  • Social Links Block:
    • Add text placeholder next to the appender. (29851)
    • Remove obsolete hardcoded focus style from Social Links. (30721)
  • Template Part Block: Add active block variation information in Block Parent Selector. (30731)
  • Term Description Block: Don’t output if there’s no description. (30564)
  • Verse Block: Add support for custom colors. (27736)
  • Video Block: Add uploading state. (30837)
  • Block Patterns:
    • Revisit the bundled block patterns. (29973)
    • Suggest block pattern transformations that are contextual to the currently selected ‘simple’ blocks (no InnerBlocks). (30469)
    • Small adjustments to bundled block patterns. (31105)
    • Query Patterns:
      • Try more opinionated query block patterns. (30763)
      • Add the small image and title pattern back in, fix 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. length.. (30817)
  • Components: Add create-styles. (30509)
  • Design Tools:
    • Add border color, style, and width support. (30124)
    • BoxControl: Allow configurable sides. (30606)
    • Color Block Support: Add utilities to retrieve color classes and styles. (30869)
  • General Interface:
    • Animate the canvas transitions. (30802)
    • Include block title into block switcher label. (30808)
    • Inspector Controls: Rephrase, polish, and make consistent color labels. (30075)
    • Update design of the resize handles. (30339)
    • Icons: Update icons for text overlay and crop. (30673)
  • 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 resetLocaleData method. (30419)
  • Publishing Flow: Show post events in the post schedule calendar. (29716)
  • Template Editing Mode:
    • Allow creating custom block templates in classic themes. (30438)
    • Move the template mode edit and new links to a dedicated template panel. (30900)
    • Replace the document tab with a template tab in template mode. (30860)
    • Unify saving flow between template mode and default mode. (30793)
    • Update the template mode canvas padding and adds a backlinkBacklink Incoming links to a web page. Search engines view backlinks as a reputation builder. The more quality (as determined by the search engine) incoming backlinks a site has usually helps a site to rank better in search engine results.. (30658)
  • Site Editor:
    • Add ‘area’ selection to convert to template part flow. (30395)
    • Add do_block_template_part function. (30345)
    • Add skip link to block templates. (30336)
    • Remove single-post from the default templates set. (29668)
    • Themes: Fix template-hierarchy fallbacks. (30599)
  • Writing Flow: Scroll selected block only if it has no focus. (30924)

Bug Fixes

  • Apply a StyleProvider around fills that can be used inside the 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.. (31073)
  • 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: Make preloaded OPTIONS requests use parse setting. (28862)
  • Block Library:
    • Duplicate media types to avoid bad imports. (30973)
    • Image Block: Disable media buttons in the uploading state. (30863)
    • Query: Fix max-height to query pattern preview. (30757)
    • Post Title: Fix warnings for RichText in inline containers. (30666)
    • Site Title: Add default block after pressing enter at the end of Site Title. (30996)
  • Block Editor:
    • Bring back imageDefaultSize shim for WP 5.7. (30955)
    • Fix the position of vertical add a new block in RTL mode. (31035)
    • Template part: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice for placeholder block. (30928)
  • Components:
    • Add a StyleProvider to support CSSCSS Cascading Style Sheets.-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. components inside iframes. (31010)
    • Fix “RadioControl: checked” style outside of Gutenberg. (30670)
    • Fix Post Date component. (30790)
    • Fix Post Publishing Popover moving when certain dates are clicked. (30298)
    • Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. (30667)
  • General Interface: Fix is-link style to take colors from wp-adminadmin (and super admin) theme. (30823)
  • Inserter: Stop event propagation for the select element’s onBlur to fix the behavior in iOSiOS The operating system used on iPhones and iPads. when selecting a pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (30717)
  • Site Editor:
    • Focus save button when entities save states panel is opened. (30873)
    • Remove call to wpautop that unintentionally alters block markup in template parts. (30552)
  • Template Editing Mode: Hide the template selector and template mode from non-viewable post types. (30861)

Experiments

  • Block-based Widgets:
    • API:
      • Don’t use deprecated widget_class property. (30429)
      • Fix null instance property when instance settings are empty. (30713)
      • Remove deprecated properties. (30853)
    • Customizer Integration:
      • Add media uploader capabilities to block-based 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. customize screen. (30954)
      • Add move to widget area dropdown in customizer. (30896)
      • Add rich text formats. (30952)
      • Fix editing performance in Widgets Customizer. (30654)
      • Fix block-based widget customizer initializing too soon. (30864)
      • Refactor the inspector in Widgets Customizer to use coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. controls. (30431)
    • Legacy Widget: Improve backward compatibility. (30709)
    • Widget editor:
      • Add a toolbar button to move between widget areas. (30826)
      • Fix the undo/redo buttons in the standalone block-based widgets editor. (30989)
  • Navigation Editor and Block:
    • Fix navigation placeholder height issue. (30824)
    • Fix alignment issue on the nav screen manage locations buttons. (30441)
    • Limit navigation nesting depth to 5. (30199)
    • Nav-created drafts should not render on the frontend. (29692)
    • Page List: Add ability to convert to navigation links. (30390)
    • Show justification controls for vertical variant. (30351)
    • Use theme locations description instead of the slug for navigation screen location labels. (30797)
  • Global Styles:
    • Absorb editor settings transformation in WP_Theme_JSON. (30610)
    • Clean cached data when switching themes. (30830)
    • Extract sanitize method. (30809)
    • Fix: CSS variable reference mechanism 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.. (31015)
    • Make the dependency of the star matcher explicit when translating theme.json. (30604)
    • Only remove the default font family in the editor from themes with theme.json file. (30895)
    • Refactor how we iterate over the tree. (30801)
    • Remove no longer needed translations handled in PHP for settings. (30605)
    • 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.: Add util to transform from a v0 schema to the latest. (30600)

Documentation

  • docgen:
    • Add support for TS exported static non-function variables. (30971)
    • Add support for assignment patterns. (30681)
    • Add support for object-destructuring. (30675)
    • Find parameters by index rather than name and handle array destructuring. (29945)
  • Handbook:
    • Add documentation for border block supports. (31039)
    • Add documentation for border styles. (31040)
    • Add fix to suggested prefixes of the branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".. (30953)
    • Change references from Block Style Variations to Block Styles. (30911)
    • Fix Block Editor 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) link. (30569)
    • Fix more examples for register_block_type – apiVersion to api_version. (30819)
    • Fix PHP example for register_block_type – apiVersion to api_version. (30818)
    • Fixed a type and made the whole explanation more clear. (30487)
    • Fixes broken 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/ links to commonly used labels. (30875)
    • Improve semantics in the block-based theme guide. (30946)
    • Include a note about is_default property for register_block_style. (30792)
    • Organize Block API Reference. (30980)
    • Packages: Further clarify the npm publishing process. (30733)
    • Update getting started with code. (30447)
  • Libs:
    • Blocks: Fix PHPDocs of gutenberg_block_has_support. (31050)
    • Query Utils: Fix return type of construct_wp_query_args(). (30611)
  • License: Interim dual license of future contributions. (30383)
  • Packages:
    • Block Library – Social Links: Update param type. (30652)
    • Components: Add documentation for the text prop on the Button component. (30796)
    • Core Data: Fixes return type for getEntitiesByKind. (30639)
    • Block Editor: Update import statement of ImageSizeControl component. (30704)
    • 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.: Add namespace param clarification. (30501)

Code Quality

  • Block Editor:
    • Simplify focus capture. (31036)
    • Standardize loading default block editor settings. (30245)
  • Block Library:
    • Button Block: Use hook-based border support. (30194)
    • Cover: Rename isBlogUrl to isUploadingMedia. (30435)
    • Cover: Use ALLOWED_MEDIA_TYPES shared constant. (30977)
  • Block Patterns: Clean up bundled pattern titles & categories. (30998)
  • Components: Remove create-styles in favor of vanilla emotion. (31048)
  • dom:
    • Add types to caret placement functions. (30750)
    • Add types to document-has-selection. (30386)
    • Add types to is-edge and dependencies. (30546)
    • Add types to miscellaneous files. (30774)
    • Add types to removeInvalidHTML and stripHTML. (30752)
    • Only assert defined in development. (30807)
    • Type the remaining files. (30841)
  • Drop zone: Rewrite without provider. (30310)
  • Gutenberg 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:
    • Account for editor styles file removal on WP 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.. (30894)
    • Format all markdown files using Prettier formatter. (30715)
    • Format all JSON files using Prettier formatter. (30714)
    • Updated .editorconfig files to work with automatic file formatting. (30794)
    • Update WP compatibility check in gutenberg_pre_init(). (29938)
  • Improve get_merged_data() code. (30612)
  • Remove unnecessary semicolons in PHP. (30780)
  • Replace older-style PHP type conversion functions with typecasts. (30531)

Tools

  • Testing:
    • Cover Block:
      • Add edit media integration tests. (30270)
      • Replace media end-to-end test. (30306)
    • Fix end-to-end test failure screenshots not capturing at the right time. (28449)
    • Fixture regeneration: Infer tabs use from the prettier configuration. (30813)
    • Skip unstable template part end-to-end test. (30748)
    • Trim block fixture HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. when generating other test fixture files. (30981)
    • Wire PHP tests for block editor settings. (30984)
  • wp-env:
  • Build Tooling:
    • Add comments to the webpack entry point function. (30629)
    • Create frontend entry points for block-library, outputting code loadable from the browser. (30341)
    • Perf Workflow: Trigger upon release publishing. (30628)
    • Pull trunk before pushing. (30615)
    • Remind about required cherry-picks after npm publishing. (30868)
    • Update development tools to work with PostCSS (try 2). (30347)
    • Use consistently the latest keyword for npm publishing. (30866)
  • Scripts:
    • Allow CSS modules in the build commands. (29182)
    • Include YAML files in prettification. (30240)

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.57.86s55.86ms
Gutenberg 10.47.25s42.51ms
WordPress 5.76.86s37.1ms

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

Thanks @youknowriad and @priethor for helping with the release and the release post, respectively.

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

What’s new in Gutenberg 10.4? (14 April)

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 already available! Gutenberg 10.4 introduces cool features like 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. widgets 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., enhancements to the Site Editor, improvements to rich text placeholders, and, as always, 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 as well.

Block widgets in the Customizer

As part of the Block-based 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 project, one goal is to enable block widgets in the Customizer, with Gutenberg 10.4 introducing the first iteration of this feature.

List View design updates

This release brings us a set of design updates to the Site Editor List View, including updates to icon sizes and spaces and new colors for hover, focus, and select states.

More descriptive publishing UIUI User interface

The publishing content UI found in block editors now includes the site icon and name so that it’s clearer in certain cases, such as full-screen or mobile, where you are publishing to.

Revert template to theme defaults within the Site Editor

Until now, to revert a template to the default provided by a theme, it had to be done outside the Site Editor. Thanks to this new feature, it is now possible to revert template customizations directly in the editor.

Rich text placeholder enhancements

To improve the editing experience, rich text block placeholders have seen a few tweaks in this release. Starting in Gutenberg 10.4, blocks containing rich text will display a shorter placeholder text that will remain shown even when being focused.

Improvements to Navigation Block

The Navigation Block has good momentum and has received many improvements in this release, including a new “Post Format Link” variation, a clearer placeholder state, and more style polishing. 

Editor and frontend parity refinement

Providing a consistent markup between the editor and the frontend is key to deliver a smooth editing experience. Gutenberg 10.4 iterates towards this goal by ensuring a frontend-editor parity in blocks such as Quote, Separator, and Archives, among others.

10.4

Enhancements

  • Ensure Frontend/Editor block styles parity:
  • Block Library:
    • Latest Comments: Remove list padding and margin. (29402)
    • Post Date: Add option to make it a link. (30499)
    • 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.: Fix toolbar for post excerpt warning. (30280)
    • Post Title: Fix “‘length’ of undefined” error. (30208)
    • Preformatted: Add color controls. (28396)
    • Query: Use a WordPress 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 the query block. (30405)
    • Search: Add border radius support. (30227)
    • Site Logo: Style polishing. (30526)
    • Template Part: Add padding support to template parts. (29779)
    • Update placeholder text across blocks. (30404)
  • RichText:
    • Add min width to show caret for empty inline container. (30224)
    • Always show placholder on focus. (30393)
  • General Interaface:
    • Add site icon and name to the publish flow. (30231)
    • Use a darker canvas color. (30282)
    • Update the save button label in the site editor. (30439)
  • Icons:
    • Polish media & text icons. (30239)
    • Update “close small” icon so that its shape matches the “add” icon dimensionally. (30014)
    • Update site-logo block icon. (30211)
  • Inserter: Clarify that when the Inserter is open clicking the + button in the top bar will close it again. (29759)
  • Writing Flow: Use a shorter writing prompt. (29611)
  • List View: Improve the spacing, colors and icons (30455) (30303)
  • Block Themes: Clarify the empty block templates message. (30145)
  • Site Editor:
    • Allow reverting custom templates to their original theme-provided files. (28141)
    • Use “Custom Styles” label to signal there are global styles changes in the saving panel. (30521)

Bug Fixes

  • Inserter: Show only the patterns that use allowed blocks. (30300)
  • Block Library:
    • Buttons: Prevent overlapping button blocks in the frontend. (30253)
    • Columns: Prevent having a width > 100%. (30229)
    • Cover: Add ‘object-position’ to allowed inline style attributes list. (30243)
    • Gallery: Avoid adding all media items in galleries using external URLs. (30122)
    • Image: Do not preserve custom sizes when replacing images. (29919)
    • Query:
      • Fix undo trap during creation. (30203)
      • Pagination Numbers: Print nothing if content is empty. (30554)
    • RichText: Fix arrow navigation around emoji. (30206)
    • Search block: Fix alignment issues. (30444)
    • Site Logo: Delete sitelogo option when custom logo does not exist or was removed. (30427)
  • Block List: Fix mover position in the docked toolbar. (30242)
  • Code Editor: Revert save editors value on change (#27717). (30524)
  • Post Editor:
    • Avoid focus attempt on a non-existent post title in code editor. (29922)
    • Fix the post author selector for contributor roles. (30218)
  • Gutenberg 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: Ensure that plugin does not error with older versions of WordPress. (30230)
  • Inner blocks: Memoize allowedBlocks to prevent needlessly updating settings. (30311)
  • Server side renderer: Fix errors in template part editor context. (29246)
  • Writing Flow:
    • Fix copy pasting non textual blocks. (30225)
    • Fix horizontal caret placing for empty editable with placeholder. (30463)
    • Fix multi-selection copying in Safari. (30202)
  • Site Editor:
    • Fix nested template parts. (30416)
    • Fix media upload behaviour and error state. (30436)
    • Select the block inspector top upon selection. (30387)
  • Components: Stop matching autocompleter upon mismatch. (30649)

APIs:

  • Add padding server-side block support. (30332)
  • Remove small APIs deprecated in WordPress 5.2. (30283)
  • Block Patterns: Remove scope from Query patterns and introduce blockTypes. (30471)

Experiments

  • Customizer
    • Add customize widgets inserter. (29549)
    • Add Legacy Widget block. (30321)
    • Fix adding blocks in the widgets customizer. (30221)
  • Navigation Editor and Block
    • Apply mover tweaks to navigation and widgets. (30284)
    • Add src/navigation-link/index to side effect whitelist. (30200)
    • Add post format variation to navigation link block. (30403)
    • Avoid creating a new array/object on every render. (30374)
    • De-emphasize “Link” block. (30172)
    • Fix arrow inheritance, polish. (30287)
    • Fix hardcoded color in navigation submenu icon. (30385)
    • Fix Navigation Link block constantly updating its inner block list settings. (30274)
    • Fix navigation link block dragging error. (30219)
    • Fix snackbar list component blocking clicks to UI it overlaps. (30381)
    • Flip orientation of submenus that are towards the right of the viewport. (30342)
    • Indicate when a menu is deleted and show the menu switcher afterwards. (29201)
    • Make the navigation placeholder clearer. (30281)
    • Polish navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. submenus. (30335)
    • Replace arrow with chevron. (30180)
    • Save theme location on button click. (30340)
    • Use same default implementation of __experimentalFetchLinkSuggestions in post, site, navigation, widget editor. (29993)
  • Widgets Editor
    • Add manage with live preview link. (29839)
    • Handle when $instance is empty and use str_replace instead of sprintf in the Widget block. (30217)
    • Iterate on Legacy Widget block. (29960)

Documentation

  • Handbook:
    • Add description for templateParts 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.. (30118)
    • Add instructions for finding attributes for use in templates. (30258)
    • Added a practical example of adding a component 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.. (30379)
    • Clarify what is meant by “block wrapper”. (30315)
    • Fix broken links to typescript documentation. (30188)
    • Fix code snippet for disabling the block directory. (30365)
    • Fix formatting. (30309)
    • Fix typos in block-controls-toolbar-and-sidebar.md. (30513)
    • Rename, changed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Link. (30483)
    • Rich Text: Add section for disabling specific format types. (29383)
    • Updated documentation to reflect the output created currently by npx wordpress/create-block gutenpride. (30353)
    • Update feature deprecation guide. (30220)
  • Packages:
    • Api-fetch: Fix example code for apiFetch middlewares. (30534)
    • Block supports: Fix typos in layout supports comment. (30537)
    • Block Editor: Fix block-editor typo. (30401)
    • Components:
      • Remove references to __experimental* in the DateTimePicker component documentation. (29322)
      • Update CustomSelectControl component README.md. (29854)
  • docgen:
    • Components: Add types to Draggable. (29792)
    • Add types to clean-node-list. (30412)
    • Add types progressively to dom modules. (30103)
    • Add types to phrasing-content. (30102)
    • Export all types from api-fetch. (30539)
    • Fix arrow functions and TS index module support. (30028)
    • deprecated: Export DeprecatedOptions to align with DefinitelyTyped. (30677)
    • api-fetch: Align exported type names with DefinitelyTyped types. (30570)

Code Quality

  • Block Editor: Use proper insertion point for drop. (29933)
  • Block Library: Fix Post Excerpt warnings for RichText in inline containers. (30498)
  • Components: Simplify ScrollLock, adding types. (29634)
  • Gutenberg Plugin:
    • Prettify YAML scripts. (30409)
    • Remove deprecations planned for 10.3 release. (30417)
    • Update the objectFitPolyfill vendor library. (30507)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Coding Standards fixes. (30346)

Tools

  • Add /packages/stylelint-config to CODEOWNERS. (30264)
  • Build: Ensure non-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. changes are processed in the watch mode. (30343)
  • Testing:
    • Added end-to-end tests for navigation menu name editor. (29774)
    • GHA workflow improvements when setting up NodeJS. (29078)
    • Include NodeJS version in the cache key. (30512)
    • Remove button from forbidden elements. (30223)
    • Remove cache restore-keys. (30510)
    • Skip flaky end-to-end tests. (30344)

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.45.94s35.14ms
Gutenberg 10.35.98s32.58ms
WordPress 5.75.05s31.34ms

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

Thanks @youknowriad for managing the release and @critterverse for helping with the release post assets.

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