What’s new in Gutenberg? (30 October)

Work on 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. content areas and the 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. block is accelerating in this release.

In the meantime, this release continues the work on Gradients support and expand it to the Cover block while relying on classnames instead of inline styles

Block Nested selection and interactions is still being improved with a new Block Breadcrumb Bar allowing to quickly navigate the block hierarchy of . the current selection.

6.8 🇮🇳

Features

• Support gradients in Cover block.
• Add a breadcrumb bar to support block hierarchy selection.

Enhancements

• Cover block: change the minimum height input step size to one.
• Allow setting a display name for blocks based on their content in the BlockNavigator.
• Hide the gradients panel if an empty gradients set is explicitly defined.
• Do not transform list items into paragraphs when deleting first list item and list is not empty.
• Replace inline styles with classnames for the gradient palette.
• Preserve list attributes (start, type and reversed) when pasting or converting HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. to blocks. 

Bugs

• Clear local autosaves after successful saves.
• Fix the columns block width overflow issue when using more than two columns.
• Fix the Link Rel input not showing the saved value of the link rel attribute.
• Fix JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com errors triggered when using links without href in HTML mode.
• Move the default list styles to the theme editor styles.
• Fix Invalid import statement for deprecated call in the Modal component.
• Fix a small visual glitch in the Publish button.
• Prevent blank page when using the Media Modal Edit Image “back” button.
• Allow the shortcode transform to apply to all the provided shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. aliases. 
• Fix JavaScript error triggered when using arrows on an empty URLInput.
• Fix extra margins added to Gallery blocks by list editor styles.
• Fix custom button background color not reflected on reload.
• Preserve List block attributes when splitting into multiple lists. 
• Fix checkbox styles when used in metaboxes.
• Make the FontSizePicker style independent from WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. styles.
• Fix overlapping controls in the Inline Image formatting toolbar.
• Fix strikethrough formatting when copy/pasting from Google Docs in Safari.
• Allow media upload post processing for all 5xx 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/ responses.

Experiments

• Navigation block:
  • Support color customization.
  • Improve the Link edition UI.
• Block Content Areas:
  • Implement a frontend template loader based on the  wp_template CPT.
  • Add a temporary UI to edit wp_template CPT posts.
  • Add a Site title block.

New APIs

• Add VisuallyHidden component.
• Add @wordpress/base-styles package to share the common variables/mixins used by the WordPress packages.
• Add Platform component to allow writing platform (web, mobile) specific logic.
• Add isInvalidDate prop to DatePicker.
• wordpress/env improvements:
  • Support custom ports.
  • Support using it for themes.
• Add a new experimental ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org  hook to support colors in blocks.
• Add a new experimental DimentionControl component.

Various

• Storybook:
  • Add a story for the CheckboxControl component.
  • Add a story for the Dashicon component.
  • Add a story for the ColorPalette component.
  • Add a story for the ColorPicker component.
  • Add a story for the ExternalLink component.

Add knobs to the ColorIndicator Story.

• Several other enhancements to existing stories.
• Linting fixes for Storybook config.
• Fix Lint warnings triggered by JSDoc definitions.
• Reorganize e2e tests specs into three folders: editor, experimental and 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..
• Cleanup skipped e2e tests.
• Add a link to Storybook from the 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/ playground.
• Optimize the wordpress/compose package to support tree-shaking.
• Code Quality:
  • Refactor the Button block edit function to use a functional component.
  • Change the name of the accumulated variables in reduce functions.
  • Remove wrapper around the Table block cells.
• Fix several issues related to Node 12 becoming LTS.
• Add the Block Inspector to the Gutenberg playground.

Documentation

• Enhance the Git workflow documentation.
• Clarify block naming conventions.
• Tweaks and typos: 1, 2.

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.8.0	5.68s	47.28ms
Gutenberg 6.7.0	5.83s	47.92ms
WordPress 5.2	6.1s	63.22ms

---

👏 Kudos to all the contributors. Thank you.

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