What’s new in Gutenberg? (10 July)

A few weeks ago, Matías shared a post about using motion to express change in reactive UIs. This release is a first step in implementing those ideas. It introduces motion to 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. changes, creation, removal, reordering.

In addition to a number of other improvements 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, the contributors also worked on typing performance. As of this release, typing is 30% faster on long posts.

6.1 🇵🇪

Enhancements

• Introduce motion/animation when reordering/adding/removing blocks.
• Improve the Image block link settings and move it to the block toolbar.
• Use a snackbar notice when clicking “Copy all content”.
• Show REST API error messages as notices.
• Clarify the wording of the view link in the Permalink panel.
• Hide the “Copy all content” button if the post is empty.
• Hide the ungroup action when there are no inner blocks.
• Use adminadmin (and super admin) schemes dependent focus state for primary buttons.
• Add support for the table cells scope attribute when pasting.

Experiments

• Introduce a new Customizer Panel to edit 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. areas.
• Add the block inspector to the widgets screen.
• Add a global inserter to the widgets screen.

Bug Fixes

• Show the pre-publish panel for contributors.
• Fix the save in progress state of the Publish/Update Button.
• Fix adding/removing columns from the table block when using 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./footer sections.
• Fix Image block not preserving custom dimensions when opening the media library.
• Resize Image blocks properly when changing the width from the inspector.
• Fix php error that can potentially be triggered by gutenberg_is_block_editor.
• Fix error when using the “tag” block attribute source type.
• Fix chrome rendering bug happening when resizing images.
• Fix the data-block style selector to avoid affecting third-party components.
• Allow the columns layout options to wrap on small screens.
• Fix isShallowEqual edge case when the second argument is undefined.
• Prevent the disabled block switcher icon from becoming unreadable.
• Fix Group Block deprecation and any deprecation relying on 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..
• 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):
  • Make the top toolbar wrap at high zoom levels.
  • Fix the sticky notices at high zoom levels.

Performance

• Improve the performance of the i18n Tannin library.
• Track the block parent in the state to optimize hierarchy selectors.
• Add a cache key tracked in state to optimize the getBlock selector.

Documentation

• Document the plugin release tool.
• Document the use-cases of the dynamic blocks.
• Tweaks and typos: 1, 2, 3, 4, 5, 6.

Various

• Introduce a PluginDocumentSettingPanel slot to allow third-party plugins to add panels to the document 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. tab.
• Deploy the playground automatically to GithubGitHub GitHub is a website that offers online implementation of git repositories that 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/ Pages. https://wordpress.github.io/gutenberg/
• Extract a generic RichText component to the wordpress/rich-text package.
• Refactor the editor initialization to rely on a component.
• Remove unused internal asType utility.
• Fix react-no-unsafe-timeout ESlint rule when using variable assignment.
• Add support for watching block.json files when running “npm run dev”.
• Remove: experimental status from blockEditor.transformStyles.
• Upgrade PHPCS composer dependencies and use strict comparisons to align with the PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. guidelines.
• Fix a small console warning when running performance tests.

Mobile

• Correct the position of the block insertion indicator.
• Unify Editor and Layout components with the web component hierarchy.

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)
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/ 6.1.0	5.2s	56.89ms
Gutenberg 6.0.0	5.4s	80.2ms
Gutenberg 5.3 (WordPress 5.2)	4.9s	66ms

---

👏 Kudos to all the contributors. Thank you.

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