What’s new in Gutenberg? (13 November)

In this newest release 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/, 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 block continue to be iterated upon. An experimental block pattern API has been added, and themes can now define custom gradient presets!

The block editor provides default gradient presets. Now, a theme can overwrite them and provide its own:

add_theme_support(
    '__experimental-editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
    )
);

Note that this feature is currently experimental and subject to change.

6.9 🇦🇷

Features

• Support changing the image title attribute in the Image block.

Bugs

• Fix  invalid Pullquote blocks when setting a color from the palette presets.
• Fix the columns left/right full-width margins.
• Prevent fast consecutive updates from triggering blocks reset.
• Fix block movers for floated blocks.
• Fix Radio buttons styling in 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. boxes.
• Fix the default image sizes used for featured images displayed in the editor.
• Prevent the unsaved changes warning from popping-up when deleting posts.
• Revert img and iframe styles to block editor container scope.
• Block Merge: guard for undefined attribute definition.

Enhancements

• Inserter: Immediately insert block when only one block type is allowed.
• Update the list of the default available gradients.
• Disable indent/outdent buttons when necessary in the List block.

New APIs

• Add theme support 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 define custom gradients presets.
• Mark the AsyncMode data module API as stable.
• Mark the mediaUpload @wordpress/block-editor setting as stable.
• Add a wpenv.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. config file support for @wordpress/env.

Various

• Refactor the way HTML is escaped by the RichText component.
• Refactor and simplify the block margins CSS in the editor.
• Use HTTPS git clone in the Gutenberg release tool for more stability.
• Update ExternalLink, BaseControl and FormTokenField components to use the VisuallyHidden component for the screen reader text.
• Add several components to Storybook: 
  • Spinner,
  • Draggable,
  • RangeControl,
  • FontSizePicker,
  • Modal,
  • Snackbar,
  • ToggleControl,
  • ResizableBox.
• Refactor the block-directory search to insert as an Inserter 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.
• Improve the experimental useColors React hook.
• Upgrade Puppeteer to the last version.
• Update to the last version of npm-package-json-lint.
• i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Fix string concatenation in the Verse block example and add translators string.
• Change Detection: Add an e2e test case for post trashing.
• Fix the e2e tests watch command.

Experimental

• Block Content Areas:
  • Support loading block templates from themes.
• Navigation block:
  • Add default frontend styles for the Navigation block.
  • Use RichText for navigation menu item instead of TextControl.
  • Add block navigator to the inspector panel.
  • Use an SVG icon for the color selector.
  • Add a new API for horizontal movers and use it for the navigation block.
  • Add a new Link creation and edition UI and use it for the navigation block.
  • Add an appender to the block navigator.
  • Add a block placeholder.
  • Various fixes and refactorings: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15.
• Add ResponsiveBlockControl component.
• Add initial API for block patterns.

Documentation

• Add an introduction README for Storybook.
• Typos and fixes: 1, 2, 3, 4, 5, 6.

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.

👏 Kudos to all the contributors. Thank you.

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