What’s new in Gutenberg? (27 May)

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/ 8.2 is released. The team continues to heavily iterate on the two big projects: Full Site Editing and the navigation screen.

The release also includes a number of improvements, features, 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 to the post editor.

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. Patterns

After the introduction of the search support, the Block Patterns UIUI User interface and APIs continue to improve with the introduction of the block pattern categories. In addition to that, a viewportWidth property has been made available to allow tweaking the width used on the block patterns preview. This is especially useful for large block patterns.

Cover Block content alignment

The Cover block saw the introduction of the new content alignment feature which opens up more design possibilities.

Editing flow

The editing flow is a constant priority for the project, and Gutenberg 8.2 introduces several enhancements to improve the writing experience. Copying, cutting, and pasting single blocks is now much easier. You can also split out of captions and button blocks using “Enter” to continue your writing.

8.2 🇮🇹

Features

• Cover block: Support customizing the content alignment. (21091) (22322)
• Add Block Pattern Categories Support. (22164) (22410)
• Copy the whole block if no text is selected. (22186)

Enhancements

• Limit the most used blocks in the inserter to 6 elements. (22521)
• Allow split out of caption on Enter. (22290)
• Buttons block: Allow split and merge. (22436)
• Improve video backgrounds for the Cover block in iOSiOS The operating system used on iPhones and iPads.. (22346)
• Combine Calendar Help and Close buttons in the date and time picker. (22176)
• wordpress/env: Better run command errors. (22475)
• Add support for named orientations and literal colors on custom gradients. (22239)
• Use theme color as focus color. (22261)
• Refine the specificity of the embed block styles. (21599)
• Change inserter search placeholder text color. (22444)
• Improve interactions and add unit parsing to the unit selector used in Cover block. (22329)
• Use smaller spacer and cover block step values. (22320)
• 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 explanatory text before the a11y.speak aria-live regions. (22112)
• Add Animoto, Dailymotion block embed icons. (21882)
• Group block: Match frontend markup in the editor. (21867)
• Iterations on the welcome guide. (21847)
• Don’t show protocol in link suggestions. (20350)
• New Block Patterns:
  • Hero and two columns. (21130)
  • Features or Services. (20898)

New APIs

• ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 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.:
  • Add new React hook UseCopyOnClick as an alternative to the ClipboardButton component. (22224)
  • Add usePrevious hook to wordpress/compose package. (22540) (22597)
• wordpress/env:
  • Granular volume mappings. (22256)
  • Add command to display Docker container logs. (21737)
  • Add a destroy command. (21529)
  • Add phpunit support. (20090)
• wordpress/scripts:
  • Add CSSCSS Cascading Style Sheets. support to start and build scripts. (21730)
  • Support enabling/disabling dev tools, bundle analyzer and externals for build and start scripts. (22310) (22426)
• Support preloading 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. requests using the fetchAllMiddleware middleware. (22510)
• Support controlled InnerBlocks. (21368) (22366)
• Add Close button filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. (22323)
• Block API: Allow block registration without categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (22280)
• Support customizing the viewportWidth for block patterns. (22216)

Bug Fixes

• Fix theme CSS bleed in the Button component. (22460) (22522)
• Fix CSS validation error on Button block styles. (22583)
• Fix editor crash potentially happening when hovering style variations. (22490)
• wordpress/env: Start database service before running tasks. (22486)
• Fix editor crash when zooming. (22408)
• Fix Button border radius set as 0. (22393)
• Fix Cover block resizing. (22349)
• Writing Flow: Fix reverse block selection after block deletion from rich text. (22292)
• A11y: Include reusable blocks in announced inserter search results. (22279)
• Remove the previous style CSS class when the default style variation is chosen. (22266)
• Show the global inserter in container blocks nested inside locked templates. (22115)
• Prevent the Page Break block from showing up as the first block in the inserter. (22523)
• Polish code editor and fix iOS scrolling issue. (22021)
• LinkControl component: Fix search result focus state border. (22553)
• Prevent contributors for accessing the Media Modal. (22306)

Performance

• Adds a command to run performance tests across branches. (22418)
• useMovingAnimation: Avoid initial transform animation. (22536)
• Optimize resizable preview hooks. (22511)
• Short-circuit validation for identical markup. (22506)
• More accurate dependency list for useGenericPreviewBlock hook. (22355)
• Add missing side-effect declarations. (22300)

Experimental

• Full Site Editing and Site Editor screen:
  • Add page-based navigation. (22368)
  • Page and Template switchers improvements. (22449)
  • Add Query block. (22199) (22364)
  • Use the inserter panel. (22413)
  • Add basic “tools” menu. (22539)
  • Implement post switcher and integrate with “navigate to link”. (22543)
  • Add focus mode and top toolbar modes. (22537)
  • Add entity editor to post content block. (22473)
  • Add ‘Review changes’ button for multi entity saving flow. (22450)
  • Fix Post Author block render issues. (22397)
  • Refactor Post Author block to use block context. (22359)
  • Templates Endpoint: Add resolved query arg to return only relevant templates. (21981)
• Navigation Block and Screen:
  • Add block movers to the block navigator. (18014)
  • Add ellipsis menu to block navigator. (22427) (22517)
  • Add standard notices to nav menu page. (22374)
  • Implement the creation of menus on the edit navigation screen. (22309)
  • Add menu location management. (21351)
  • Navigation Link block: Add RichText split-at-end/merge/remove behavior. (21764)
  • Fix navigation block placeholder overlap. (22407)
  • Adds orientation class on frontend for the navigation block. (22272)
  • Refactor block navigation block contents. (22487)
  • Fix navigation screen crash with no menu items. (22342)
  • Adds save and failure notices to the navigation screen. (22326)
  • Display the block appender only for the currently active menu. (22311)
  • Allow editing of new menu items from the block inspector. (22210)
  • Submenu nesting and saving new nested items. (21671)
• Block-based Widgets screen and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. tab:
  • Use interface package on widgets screen 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.. (22304)
  • Use single block editor in the widgets screen. (22140) (22459)
  • Use the mobile view for the Customizer. (22533)
  • Add legacy 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. to calendar transform. (14586)
• Global Styles and theme.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.:
  • Implement Managed CSS for Global Styles. (20290)
  • Support theme.json in Post editor. (22520)
• Block Directory:
  • Activate deactivated blocks if already installed . (22286)
  • Only support an array of assets when injecting assets. (22289)
  • Remove the author rating when none exist. (22184)
  • Update layout for smaller inserter width. (22124)
  • Add error messages inline. (20001)

Documentation

• Document experimental theme.json. (22518)
• Fix duplicate grammar docs. (22466)
• Document the performance testing commands. (22464)
• Docs: Update note for extraProps filter. (22419)
• Recommend adding an API docs section. (22415)
• Add side effect documentation. (22379)
• Update block editor docs to incorporate the block-toolbar Popover Slot. (22308)
• Adds a README to MediaReplaceFlow. (22268)
• Typos and tweaks: (22254) (21968) (21695) (22554)

Code Quality

• Avoid circular dependency issue in AutoBlockPreview. (22425)
• Remove opinionated label color from CustomSelectControl component. (22594)
• Image block:
  • Use hooks. (22499) (22277)
  • Remove extra div wrapper in the editor. (22585)
• Remove redundant condition from setting default grouping. (22563)
• Testing: Replace require.requireActual with jest.requireActual. (22370)
• Use a light block DOM for the Cover block to map frontend markup. (22348)
• Rename a complementary area component property. (22336)
• Block API: WP_Block: Document attributes class property. (22222)
• Polish block wrapper elements file. (21304)
• Move supports to block.json files for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (22422)
• Create Block: Simplify the process of defining a config for templates. (22235)
• Block Edit: Use hooks. (22433)
• Add BlockContext component to type-checking. (22353)

Build Tooling

• ESLint 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: Fix dependency group checking for CommonJS. (22230)
• Restore Playground 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 deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors.. (22443)
• Fix API Docs generation for filenames with spaces. (22513)
• Fix check-latest-npm.js failure on Windows. (22485)
• Refactor the changelog script as a release tool command. (22380)
• Enable import/no-unresolved ESLint rule for Gutenberg. (20905)
• Only allow ECMAScript stage 4 features. (22083)
• Storybook: Use a consistent port number. (22552)
• Add 0BSD to GPLv2 compatible licenses. (22391)
• Refactor the release tool and split it into several command files. (22003)
• Replace wp-scripts env usage with wp-env in CI. (20280)

Various

• Update: ResizableBox make showHandle true by default. (22360)
• Fix dirty state end-to-end test intermittent failuire. (22532)
• Fix dirty state end-to-end test. (22448)
• Add a simple block patterns end-to-end tests and a test utility. (22414) (22495)
• Remove insert block delay from end-to-end tests. (22377)
• Add an end to end test to verify cover can be resized with drag & drop. (22369)
• Upgrade Reakit to stable v1.0.0. (22352)
• Use alternate display for the popover in alignment matrix. (22351)
• Fix deprecated version used for register_pattern. (22341)
• API Fetch: Remove deprecated useApiFetch. (22333)
• Framework: Pin nvmrc to specific current LTS. (22236)

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 8.2.0	7.4s	29.7ms
Gutenberg 8.1.0	8.6s	29.7ms
WordPress 5.4	9.2s	26.8ms

Kudos for all the contributors that helped with the release. 👏

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