Kerry Liu 4:26 am on July 21, 2021
Tags: block-editor ( 44 ), core-editor ( 395 ), gutenberg ( 263 ), gutenberg-new

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

Two weeks have passed since the last GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ release, which means a new version is available! Gutenberg 11.1 adds the ability to edit a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. border easily, enables drag and drop support for the List View component, and includes many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes centered around the Widgets Editor and Block Library.

Block supports: border

Take an early look at custom block borders! When borders are enabled in a theme.json file, and a block declares that it supports it with the block supports APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., a new block panel is available that lets us change the border radius, width, style, color, and border units.

Set and style custom block borders

List View drag and drop

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

Use the persistent list view to reorder blocks

11.1.0

Enhancements

Adminadmin (and super admin) panel available as PWA. (33102, 33310)
Block Breadcrumbs: Small chevron icon for breadcrumb separators. (33042)
Block Library:
- Columns Block:
  - Add stack on mobile setting to allow for columns without mobile breakpoints. (31816)
  - Add the percent unit to the default units in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (33468)
- Latest posts: Remove grey color for dark themes. (33325)
- List Block: Add link color control to list block. (33185)
- Post Terms Block: Add a “separator” attribute to post-terms block. (32812)
- RSS Block: Update block styles. (33294)
- Tag Cloud Block:
  - Add ability to change number of tags shown. (32201)
  - Remove editor style so editor matches frontend. (33289)
Design Tools, Border:
- Add support for custom border units. (33315)
- Update border support UIUI User interface. (31585)
- Set border style none when border width zero. (32080)
Link Editing: Add Unlink button to LinkControl popover. (32541)
List View: Enable drag and drop in List View. (33320)
WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor: Adds auxiliary class names for editor styles. (33388)
General UI:
- Block Settings Menu: Don’t render ‘Move to’ if there is only one block. (33158)
- Disable ‘Post Publish’ button if saving non-post entities. (33140)
- Preferences: Polish labels and consolidate options in preferences. (33133)

New APIs

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.: Block editor settings endpoint. (33128)
UI Components: Add a SearchControl component and reuse across the UI. (32935)

Performance

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

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

Improve high contrast mode rendering of icon buttons. (33062)

Bug Fixes

Block Breadcrumbs: Fix breadcrumbs htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure and ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings. (33159)
Block Editor:
- Move layout styles to document head (instead of rendering inline). (32083)
- Warn only in edit implementation when using useBlockProps. (33380)
- Iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.: Remove reset styles. (33204)
Block Library:
- Buttons Block: Remove green background color in button preview. (33116)
- Embed Block: Include missing attributes when upgrading embed block. (33235)
- Image Block:
  - Improve “can switch to cover” check. (33095)
  - Fix replace link control styling. (33326)
- Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block:
  - Prevent entering invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. values in the Query Loop block configuration. (33285)
  - Update getTermsInfo() to workaround parsing issue for translatable strings. (33341)
- Search Block:
  - Fix search block button position dropdown accessibility/UXUX User experience issues. (33376)
  - Update search block to handle per corner border radii. (33023)
- Site Title: Decode entities in site title. (33323)
- Home Link: Remove padding. (33461)
- Post Except: Fix excerpt_more filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. and remove wordCount attribute. (33366)
Design Tools:
- Color: Prevent color panel from showing as empty. (33369)
- Duotone:
  - Avoid rendering duplicate stylesheet and SVG. (33233)
  - Update conditions to hide duotone panel. (33295)
- Theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.
  - Allow themes to provide empty values for color.duotone and spacing.units. (33280)
  - Specify what settings can be part of settings.layout. (33303)
Rich text:
- Fix format deregistration. (31518)
- Autocomplete: Reset state for empty text. (33450)
- Run input rules after composition end. (33416)
Site Editor: Close navigation sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. when all posts clicked. (33393)
Slash Inserter: Fix slash command focus style. (33084)
Widgets Editor:
- Fix moving inner blocks in the Widgets CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (33243)
- Fix inserter size on Widgets Editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. (33118)
- Merge conflicting wp.editor objects into a single, non-conflicting module. (33228)
- Retrieve latest widgets before loading sidebars. (32997)
Writing flow:
- Allow select all from empty selection. (33446)
- Attempt to fix preview end-to-end failure. (33467)
Components:
- Suggestion List: Check if a node exists to scroll into view. (33419)
- Navigation component: Fix item handling onClick twice. (33286)
Editor: Extract snackbars into a separate component. (33355)

Experiments

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

Documentation

Admin PWA: Make readme private. (33216)
Handbook:
- Block API:
  - Apply enhancements included in WordPress 5.8. (33252)
  - Clarify the type of apiVersion in block metadata. (33249)
  - Fixes a typo in the documentation for block supports. (33247)
- Block Editor API: Changes to support multiple admin screens in WP 5.8. (33262)
- Custom Block Editor: Fixed bad image syntax and bold text. (32897)
- Fix API documentation for data reference guides. (33384)
- PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Release: Update Gutenberg release documentation to clarify release post workflow. (33328)
- theme.json:
  - Add examples and highlight backward compatibility. (33421)
  - Update theme.json documentation for WordPress 5.8. (33131)
  - Fix codetabs syntax in theme.json documentation. (33417)
- Use markdown headings instead of links for API declarations. (33381)
Update documentation for link color in WordPress 5.8. (33162)
Packages:
- Add PanelBody for InspectorControls. (33227)
- Correct wrong setState call. (32808)
- Remove withState HOC references. (33173, 33222, 33259)

Code Quality

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

Tools

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

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version	Loading Time	KeyPress Event (typing)
Gutenberg 11.1	6.38s	26.12ms
Gutenberg 11.0	6.06s	29.55ms
WordPress 5.7	8.52s	36.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

David Smith 6:45 am on July 9, 2021
Tags: block-editor ( 44 ), core-editor ( 395 ), gutenberg ( 263 ), gutenberg-new

What’s new in Gutenberg 11.0.0? (9 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.