What’s new in Gutenberg? (31 July)

The number of 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/ contributors is growing significantly and it’s a pleasure to see how people from all around the world come together to build and improve the software. I’d like to take this opportunity to thank the 48 contributors that participated in this release.

Among the improvements of Gutenberg 6.2, a feature that might seem small but which a lot of people were waiting for: the possibility to customize the target of the Button 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. (open the link in a new tab).

We also had a lot of people asking for the possibility to use all kinds of block types in the Cover and Media & Text blocks, so we’ve removed their nested block restrictions.

From a Developer Experience perspective, this release introduces a new PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher 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 simplify the registration of block styles variations.

// Registering a style variation using a registered WP style.
register_block_style(
	'core/quote',
	array(
		'name'         => 'fancy-quote',
		'label'        => 'Fancy Quote',
		'style_handle' => 'myguten-style',
	)
);

// Registering a style variation using an inline style.
register_block_style(
	'core/quote',
	array(
		'name'         => 'not-fancy-quote',
		'label'        => 'Not Fancy Quote',
		'inline_style' => '.wp-block-quote.is-style-not-fancy-quote { color: blue; }',
	)
);

6.2 🇧🇩

Enhancements

• Introduce Link Target support in Button block.
• Limit the maximum height of the HTML block.
• Show the preview button on mobile viewports.
• Remove nested block restrictions from the Cover and Media & Text blocks.
• 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): Improve and standardize the block styles focus and active states.
• Always collapse block alignment toolbars.

New APIs

• Add a simple API to register block style variations on the server.
• Allow alternative blocks to be used to handle Grouping interactions.
• Add allowedFormats and withoutInteractiveFormats props to the RichText component to control the available formats.
• Expose position prop in DotTip component.
• Support hideLabelFromVision prop in all control components.

Bug Fixes

• Fix using the Classic block in nested contexts.
• Fix lost nested blocks if the container block is missing.
• Fix pasting content into nested blocks.
• Fix race condition in the block moving animation causing blocks to overlap.
• A11y: 
  • Make the Table block accessible at high zoom levels.
  • Change the font size picker markup to use select.
  • Match the primary button disabled state to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.’s color contrast.
• Fix the z-index of the block toolbars for blocks following wide aligned blocks.
• Hide the columns count control when the columns block placeholder is shown.
• Prevent the block movers from disappearing on middle breakpoints for full/wide blocks.
• Slimmer top/bottom spacing inside notices shown outside the editor canvas.
• Fix converting video shortcode into video blocks when file type sources are used.
• Localize the read more link in the latest posts block.
• Fix issue with inconsistent nesting appender.
• Fix styling of IconButton used in ButtonGroup components.
• Remove Change Permalinks button when permalink is not editable.
• Fix aspect ratio typo and recalculate padding in embed block.
• Ensure hour/minute fields are always shown left to right in RTL languages.
• Refactor the empty line padding in the RichText component. This fixes padding issues in the list block in Firefox.
• Improve the stability of the RichText placeholder.
• Add custom placeholder support for the button block.
• Show the image size labels on the block-based widget screen.

Documentation

• Clarify the block title and description conventions.
• Add RichText component documentation to the Block Editor Handbook.
• Improve the repository triage docs.
• Adds documentation for the PluginDocumentSettingPanel SlotFill.
• Tweaks and typos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 , 13, 14.

Divers

• Fix Travis instability by waiting for MySQL availability before installing the 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.
• Continue the generic RichText component refactoring.
• Remove the usage of the editor store from the block editor module.
• Update the MilestoneIt Github action to read the plugin version from master.
• Refactor the post 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 attributes to use a generic custom sources mechanism.
• Avoid docker containers automatic restart.
• Bump Lodash dependencies to 4.17.14.
• Fix the build command on Windows environments.
• Remove inappropriate executable permissions from core-data package files.
• ESLint Plugin: Exempt React hooks from no-unused-vars-before-return.
• 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/. Portal based slots for the block toolbar.
• Use combineReducers utility from the data module instead of redux.
• Adds missing babel-jest and core-js dependencies to the scripts package.

Mobile

• Tapping on an empty editor area creates a new paragraph block.
• Fix video uploads when the connection is lost and restored.
• Track unsupported block list.
• Insert new block below the post title if the post title is selected.
• Run the mobile tests in the Gutenberg CI server.
• Replace use of deprecated componentWillReceiveProps in ImageEdit.
• Show placeholder when adding block from the post title.
• Blur post title any time another block is selected.
• Inserting block from the post title replaces empty blocks.
• Update Video caption placeholder color to match other placeholder text styles.
• Move the post title selection state to the store.

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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 6.2.0	4.8s	67.2ms
Gutenberg 6.1.0	5.9s	67.2ms
Gutenberg 5.3 (WordPress 5.2)	7.6s	80.13ms

---

👏 Kudos to all the contributors. Thank you.

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