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:

• Editing overlay for Template Parts and Reusable blocks.
• Support for CSS shorthand properties in theme.json and block attributes.

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.

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

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 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 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.

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