What’s new in Gutenberg? (29th May)

More than 42 contributors participated in this 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 includes a number of valuable improvements and two important 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 are going to be backported into the next WordPress 5.2.2 release.

The work to improve the built-in 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. library is still ongoing. Heading blocks support custom text colors and we plan to expand this to other textual blocks in the future.

Gallery images can now be reordered inline without opening the media modal. Drag and drop support is being explored.

This release includes a working proof-of-concept of the block-based widgets screen. You’ll be able to edit/update your widgets areas using any available block. This will allow us to polish the UIUI User interface and clear out bugs in the next releases.

5.8 🇪🇸

Features

• Support changing the text color in the Heading block.
• Support reordering gallery images.
• Complete the initial version of the widgets screen POC
  • Add an experimental endpoint to fetch the block-based widget areas.
  • Connect the screen to the widget areas endpoint.
  • Load the widget scripts.
  • Load colors, font sizes and file upload settings in the widgets screen.
  • Render the block based widget areas in the frontend.

Enhancements

• Clarify the label of the custom classname inspector panel.
• Update Calendar block icon for better alignment with the Archives block icon.
• Add width constraints to the Media & Text block.
• Allow dropping blocks into container blocks using the new block appender.
• Provide default margins for the Latest Posts block excerpts.

Bug Fixes

• Support block style variations for container 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)
  • Use semantic markup for the document outline.
  • Fix the reading order of the keyboard shortcuts modal.
  • Add a visible help text to the tags input.
  • Update the icon of the Heading block.
  • Move the View Posts anchor out of the toolbar section in the 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..
  • Close the block settings menu after removing the block.
• Fix the blurriness of the disabled block switcher icons.
• Fix missing template validation warning.
• Fix several content splitting issues and make the onSplit prop stable.
• Allow the Shortcode block field to expand automatically.
• Left pad the DateTimePicker minutes input.
• Fix the frontend classname used for the Latest Posts block excerpts.
• Fix error happening when deleting the last block if the paragraph block is unregistered.
• Fix focus jumps when typing in meta block fields.

Documentation

• Improve the Slot/Fill documentation.
• Document the Github teams used in the repository.
• Document the icon prop for the MediaPlaceholder component.
• Update the changelogs maintenance documentation.
• Clarify the save function documentation to discourage side effects.
• Clarify the block attributes documentation.
• Replace @link with @see in JSDocs.
• Fixes and tweaks to the API docs generation tool.
• Typos and tweaks: 1, 2, 3, 4, 5, 6, 7, 8.

Various

• Add a new editor setting to allow disabling the code editor.
• Add a new @wordpress/data-controls package.
• Add an automation tool to simplify the Gutenberg release process.
• Support the all hook in non-production environments.
• Expose hasResolver property on the data module selectors.
• Support multiple pattern replacement for the custom-templated-path-webpack-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 package.
• Update node-sass dependency to support the latest Node.js version.
• Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning showing when loading the editor (Fill component).
• Fix React warning message when using the Image block.
• Refactor the popover component using React 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..
• Remove WebpackRTLPlugin usage.
• Remove an outdated chrome fix for iframes drag and drop.
• Skip Chromium download in Travis by default.
• Rewrite Node.js packages to use CommonJS exports.
• Speed up Docker and e2e tests setup Travis.
• Extracted the deprecated block version declarations to their own files.
• Add missing file from the published @wordpress/dependency-extraction-webpack-plugin-files package.
• Upgrade package dependencies: Lerna and Webpack Bundle Analyzer.

Mobile

• Add the Quote block.
• Make the Video block publicly available.
• Fix bug when merging blocks.
• Improve the UI/UX of the different media blocks.
• Support nested lists.
• Fix Image block with an undefined url.
• Support rich captions in the Image block.
• Improve screen reader support on BottomSheet’s cells.
• Fix several focus related bugs.
• Fix undo related issue.
• Update onSplit method on the native RichText component to the latest version.
• Move the BottomSheet component to the @wordpress/components package.
• Handle the iOS z-gesture to exit modals and block selection.
• Implement the invalid block content UI.

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 5.8.0	5.4s	64.9ms
Gutenberg 5.7.0	5.6s	65.8ms
Gutenberg 5.3 (WordPress 5.2)	6.1s	64.2ms
Gutenberg 4.8 (WordPress 5.1)	7.7s	150.6ms

---

👏 Kudos to all the contributors. Thank you.

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