What’s new in Gutenberg (11 June)

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.3 has been released. The team continues iterating on two big projects -Full Site Editing and Navigation Screen- while improving other areas of the editor as well.

Design Tools

This release features a few additions to the design tools for the blocks.

A new padding control was added to the cover 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.. This is an opt-in feature that themes have to declare support for via add_theme_support('experimental-custom-spacing').

Also a new link color control was added to the paragraph, heading, group, columns, and media&text blocks. It’s opt-in as well, via add_theme_support('experimental-link-color').

WCEU Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.

As part of the Contributor Day at WCEU 2020, the editor team hosted an online session to help people get started with Gutenberg. It was recorded and you can watch at:

As a result, a good number of Pull Requests were created and are part of this release! If you missed it or you want to start contributing, take a look at the Getting Started guidelines, and grab one of the Good First Issues and/or Good First Pull Requests.

And more

In addition to the above, this release consolidates a new organization of block categories that groups blocks into text, media, design, widgets, and embeds.

The block toolbar also got an upgrade and it now comes with a parent selector to improve navigation in nested contexts:

8.3 🇪🇺

Features

  • New padding control to cover block. (21492, 23041)
  • New link color control to paragraph, heading, group, columns, and media-text blocks. (22722, 23025, 23049)
  • Updated default block categories. (19279)
  • New parent block selector to child blocks. (21056)

Enhancements

  • Blocks:
    • SiteTitle: add alignment and tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) level support. (22843)
    • Heading: use toolbar for heading level control. (20246)
    • LatestPost: add the ability to 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. by author. (16169)
    • Add caption split at end to all caption blocks. (22934)
    • Add transforms between the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. widgets that have equivalent blocks. (22644)
  • Interface package:
    • Add block areas tabbed 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. to the widgets screen. (22467)
    • Use isActiveByDefault prop and local storage to determine whether it is active or not. (22381)
    • Add a mechanism to render them on edit site. (21430)
    • Sidebar reacts to screen size and refactor to use interface package. (22565)
  • Add a heading to the block inserter tips and to the block inserter groups (22898, 22903)
  • Move between nesting levels with arrow keys in navigate mode. (22614)
  • Add icons for image tools, other, and update list icons. (22593)
  • Block Navigator: Use default block appender. (22590)
  • Adds a default text label to the block appender when it can only insert a single block type (22293)
  • Make ToolbarButton 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. consistent. (22961)
  • Implement roving tab index on the Image block. (22696)
  • Block Editor: Allow control over drop cap feature with useEditorFeature helper. (22291)
  • 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/.:
    • Add block styles register mechanism. (22680)
    • Update default values for fields in the block type schema. (22695)

New APIs

  • Add new package @wordpress/lazy-import for lazily installed packages. (22684)
  • Added _experimental/block-types endpoint to expose all registered blocks. (REST API 21065, register core blocks in the server 22491).

Experimental

  • Added experimental version of rich image editing tools. (21024, 22870)
  • Full Site Editing
    • New template creation flow for EditSite. (22586)
    • Edit Site: Avoid dirtying un-customized templates on first load. (22876)
    • Edit Site: Refactor business logic into store. (22844)
    • Global Styles: make 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. shape consistent with local styles shape. (22744) and take block supports from block.json. (22698)
    • Edit Site: fixes to template lookup and template parts auto-drafts (22954, 23050)
  • Navigation screen
    • Use a panel for navigation structure on small screens only. (22828)
    • Disable the navigator toolbar button. (22792)
    • Atomic save using 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. API endpoint. (22603)
    • Retain block IDs on save. (22739)
    • Separate concerns in useNavigationBlocks. (22825)
    • Fetch all menus for display in select menu. (22591)
    • Fix keyboard navigation in Navigation block. (22885)
    • Rename EllipsisMenu to BlockNavigationBlockSettings. (22630)
    • Remove BlockNavigationEditor from navigation-link/edit.js. (22629)
  • Block directory:
    • Update the state to store the installing status per block id. (22881)
    • Use semantic element for block directory download heading. (22713)
    • Add the list of installed blocks to the pre-publish sidebar. (22752)
    • Store refactor. (22388)

Bugfixes

  • Blocks
    • Skip null values returned from the server during registration. (22849)
    • LatestPost: fix to display author. (22937)
    • Legacy Widgets: widgets with special chars on classname did not load. (22841)
    • Group: clean up block padding rules. (22746)
    • Gallery: fix initial creation via media library. (22659)
    • Cover: fix height reset on unit change. (22642)
    • Navigation: fix submenu keyboard 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) in IE. (22546)
    • Buttons: fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. property value for margin-right. (22211)
  • CustomSelectControl:
    • Use default cursor style (22926)
    • Fix arrow spacing. (22925)
  • Fix Drag and Drop in Safari by upgrading Reakit. (22960)
  • Font size picker reset button: make it visible in all languages. (22896)
  • Components: ToolbarButton use forwardRef. (22970)
  • Remove aria-label from iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. resizers. (22868)
  • LinkControl: avoid showing “Recently updated” when there are no recently updated Pages from the API. (22856)
  • CopyHandler: Fix unintended Copy override when copying from input or textarea elements. (22793)
  • Customizer complementary area should not include the block areas. (22756)
  • Icons: Fix package references. (22702)
  • Fix missing parentheses in usePrevious hook. (22608)
  • Fix presets in themes that use the default color & gradient palettes. (22526)
  • Fix dark menus in canvas, not in top toolbar. (22516)

Performance

  • Remove ifBlockEditSelected internal higher-order component. (22905)
  • Remove withBlockEditContext internal higher-order component. (22942)

Documentation

  • Handbook
    • Fix links for dynamic blocks page. (22945)
    • theme.json specification: document link color feature (22929) and features integration. (22622)
    • Block Registration: document use of innerBlocks in example property. (22633)
    • Initial documentation for architecture decisions. (22751)
    • Reusable blocks: initial improvement to documentation. (21843)
    • Default to ESNext syntax in MetaBoxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. & Block tutorials. (22748, 22973)
    • Block Tutorial: fixed typo in the wp_register_script function. (22755)
  • JSDoc comments:
  • Contributor docs:
    • Add code examples section. (22974)
    • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. to include release instructions. (22335)
    • Update repository management with proposed guidelines. (22679)
  • Env:
    • Reference destroy command. (22643)
    • Fix use of backticks. (22980)
  • Improve e2e-test README. (22661, 22654)
  • Move BlockDropZone 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 and update documentation. (22619)
  • Update PULL_REQUEST_TEMPLATE.md to include PR documentation nudge. (22681)

Code Quality

  • Refactor some components to use 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.:
  • Polish ImageSizeControl. (22917)
  • Latest Posts Block: add key to categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select box. (22904)
  • Rename the navigation mode BlockBreadcrumb component to BlockSelectionButton. (22882)
  • Extract inserter state into reusable hooks. (22710)
  • Replace function expressions with named function or arrow expression. (22647)
  • Remove unused isDraggable prop from BlockList. (22615)
  • Remove form control resets and include the styles in the components. (22596)
  • Project Management Automation: reorganize folder structure. (22574)
  • Dependency Extraction 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: add types. (22498)
  • Blocks: Avoid separate host matching constant for embeds. (13755)

Breaking Change

  • Scripts: Remove legacy env command. (22953)
  • ESLint Plugin/Scripts: Update ESLint and related deps to 7.1.0. (22771)

Build Tooling

  • Env package:
    • Add support for interactive run commands (like bash). (22611)
    • Ensure correct port setting on related wp-config params. (22559)
    • Update Source type to WPSource. (22785)
    • Fix ssh-auth nodegit + better snap pack detection. (22649)
    • Correct multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site support. (22613)
    • Update copy-dir dependency to version 1.3.0. (22682)
  • Create Block:
    • Integrate CSSCSS Cascading Style Sheets. import in JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. with esnext template. (22727)
    • Enhancements for the upcoming npm release. (22978)
  • Scripts:
    • Add support for postcss.config.js. (22735)
    • Support split Jest configuration for test commands. (22477)
    • Split webpack loader rules for CSS and Sass files. (22786)
  • Release tool: warn about open issues in milestone before starting release. (22764)
  • Changelog tool: Enhance entry normalizations. (22601)
  • Performance tool: fixes to run across branches. (22676)

Various

  • Use Card instead of Panel for the block editor. (22827)
  • Revert add selectionStart and selectionEnd to transientEdits. (22933)
  • BlockEditor: fix readme syntax. (22809)
  • Trigger additional 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. setup actions. (22807)
  • Align navigator icon and buttons to top. (22790)
  • Set default selection to the root navigation block. (22737)
  • end-to-end tests:
    • Disable inconsistent test for gallery. (22726)
    • Specify icon for block context test blocks. (22811)
    • Configure Axe to ignore media modal markup. (22719)
    • Define end-to-end test experimental features utility as lifecycle helper. (22712)
  • CODEOWNERS updates. (22725)
  • Add data-handle to all script tags in the adminadmin (and super admin). (22721)
  • Add onDeleteBlock to the extra data to re-render when it has changes. (22716)
  • Add support for page=1 and perPage=-1 to getMergedItemIds. (22707)
  • Replace three experimental flags (ellipsis menu w/ min level, navigator slots) with just __experimentalFeatures. (22670)
  • Add require headers to plugin and readme (php 5.6). (22669)
  • Update package-lock.json so that CI tests pass. (22667)
  • Framework: Upgrade to wp-prettier@2.x. (22610)
  • Remove the multi-block type check to make __experimentalConvert more useful. (22577)
  • Mousetrap: Update to latest stable version. (22548)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36 000 words, ~ 1 000 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.

VersionLoading TimeKeyPess Event (typing)
Gutenberg 8.311.94s47,75ms
Gutenberg 8.211.43s47.95ms
WordPress 5.413.79s39.32ms

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

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