What’s new in Gutenberg? (27 November)

More than 51 contributors helped shape the 7.0.0 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. It’s one of the biggest number of contributors we’ve ever had.

The release includes a big number of fixes and enhancements to the Navigation 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. and marks it as a stable feature.

In terms of APIs, developers will be happy to know that this PR introduced some new APIs like allowing the internationalization of strings containing safe HTML, a new Card component in wordpress/components and a few other enhancements we encourage you to try and provide feedback.

7.0 🇷🇴

Features

• Add a new Navigation block (early version)
  • Highlight menu items without defined URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org.
  • Prevent error in Firefox when removing the block.
  • Remove background color from the Navigation block and rely on the Group block.
  • Remove the background shadow for the submenus dropdown.
  • Rename “Navigation Menu Item” block to “Link”.
  • Remove unnecessary color attributes.
  • Allow addition CSS classes.
  • Drop the “menu” suffix from the block name.
  • Escape special characters in the frontend.
  • Remove from experimental features.
  • Add style variations.

Enhancements

• Use gradient classnames instead of inline styles for the Cover block.
• Inserter: Add keyboard shortcut styling to “/” in the default tip.
• Restore the caret position properly on undo.
• Add keywords to improve the discoverability of the Audio block.
• Show video preview on Cover block inspector panel.

Bug Fixes

• Fix hidden nested images in the content column.
• Fix double border issue in the keyboard shortcuts modal.
• Fix off-centered publish button.
• Fix error when isRTL config is not provided in the block editor settings.
• Fix full width Table block mobile 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..
• 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): Add a screen reader text label for the Search block.
• Fix text patterns undo after mouse move.
• Fix block drag and drop for the  contributor role.
• Update the link when switching the image used in the Image block.
• Fix php error triggered when gutenberg_register_packages_scripts is run more than once.
• Fix special characters escaping for the post title.
• Fix JavaScript errors triggered when selectors are called before the editor being initialized.
• Fix BaseControl component label when no id is passed.
• Preserve whitespace when converting blocks Preformatted and Paragraph blocks.
• Fix multiple paste issues creating unnecessary empty spaces.

New APIs

• Add a new Card component to wordpress/components.
• Add label support for the URLInput component.
• Support the isMatch option for the shorcode transforms.

Experiments

• Block Content areas:
  • Add Post Title and Post Content blocks.
  • Add template parts CPT and the theme resolution logic.
• Widgets Screen:
  • Refactor the legacy widgets block to support all blocks.
  • Fix widget areas margins.
  • Add isRTL setting.
• APIs
  • useColors hook: Enhance the contrast checking API and provide access to the color value.
  • Introduce createInterpolateElement to allow translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. of complex strings with HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. content.
  • A11y: Refactor the accessibility behavior of the Toolbar component.
• Social Links:
  • Capitalize LinkedIn and GitHub properly.
  • Fix frontend styling.

Documentation

• Add a Backward Compatibility policy document.
• Clarify the npm packages release documentation.
• Add documentation for the @wordpress/env wp-env.json config file.
• Typos and tweaks: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20.

Various

• Refactor the RichText component: Remove the inner Editable component.
• Integrate the Gutenberg Playground into Storybook.
• Increase WordPress minimum supported by 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 to 5.2.0.
• Refactor the Paragraph block edit function as a functional component.
• Refactor the Cover block edit function as a functional component.
• Add new components to Storybook.
  • RadioControl component.
  • TabPanel component.
  • Popover component.
  • BaseControl component.
  • Tip component.
• Include WordPress eslint plugin in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. eslint ruleset in wordpress/eslint-plugin.
• Block PRs  on mobile unit test failures in Travis.
• Polish the PostSchedule popover styling.
• Fix the API documentation generation tool when spaces are used in folder names.
• Add missing @babel/runtime dependency to the wordpress/jest-puppeteer-axe.
• Refactor the Layout component to separate the UIUI User interface from the content.
• Align Dropdown and DropdownMenu components styling.
• Remove max-width style from the Image block.
• Remove the CollegeHumor embed block.
• Add unit tests: 
  • Ensure consecutive edits to the same attribute are considered persistent.
  • Test the core-data undo reducer.

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 7.0.0	5.1s	67.7ms
Gutenberg 6.9.0	6.6s	53.5ms
WordPress 5.3	6.3s	61.44ms

---

👏 Kudos to all the contributors. Thank you.

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