What’s new in Gutenberg (August 5)

WordPress 5.5 is around the corner and 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/ contributors have been busy fixing a number of important issues to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). sure the editor on 5.5 is as stable as possible. Gutenberg 8.7 changelog reflects that with a number of fixes including important 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) ones.

At the same time, contributors are increasing the development pace on the next big projects. Global styles are being worked heavily on with the hope of shipping it by WordPress 5.6.

This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. also saw a lot of improvements to the Post 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. suite that constitutes one of the important bricks for the Full Site Editing project.

8.7.0 🇹🇼

Enhancements

  • Make “Attempt Block Recovery” the default option of block invalidation. (24263)
  • Add a block example to the Buttons block. (24249)
  • Make the padding for the nav block inserter content the same for all sides. (24084)
  • Improve margin within the media replace popover. (24309)
  • Move “Convert to regular blocks” button to the reusable block toolbar. (24066)
  • Consistently autosave edits. (23962)
  • Use Post Type label for Document tab in Settings 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.. (17311)
  • Update the Group block description. (24297)
  • Remove bottom margin of components dropdown menu item. (24227)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Block Patterns improvements:
    • Adds “Heading and paragraph” pattern. (24143)
    • Updates “Large header and a paragraph” pattern. (24142)
    • Updates the “Large header” pattern. (24141)
    • Updates the “Quote” pattern. (24140)
    • Updates “Two images” pattern. (24139) (23856)
    • Updates “Three columns of text with buttons” pattern. (24138)
    • Updates “Three buttons” pattern. (24137)
    • Updates “Two buttons” pattern. (24136)
    • Updates ‘”wo columns of text” pattern. (24135)
    • Update “Two columns of text with images” pattern. (24134)
    • Update the “Large header and button” block pattern. (24177)
  • Block Directory: Use local assets with automatic asset detection. (24117)

New APIs

  • Add support for delete operations to @wordpress/core-data entities. (21557)
  • Add server-side handling for the block ‘align’ supports flag. (24122)
  • Add isDestructive style to Button. (22921)
  • wordpress/create-block: Enable loading translations for created blocks. (24125)

Bug Fixes

  • Fix htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. mode for non light blocks. (24335)
  • Fix block movers overlapping. (24349)
  • Fix List RichText backward compatibility for multiline root 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.). (24324)
  • Block patterns: Fix translatable strings. (24317)
  • Preserve the seconds when editing dates using the TimePicker component. (24305)
  • A11y:
    • Announce block selection changes manually on windows. (24299)
    • Fix arrow navigation in the LinkControl suggestions. (24222)
    • Avoid focus style from being cut on the categories panel. (24197)
    • Avoid focusing the block selection button on each render. (24195)
    • Avoid rendering the clipboard textarea inside the button. (24194)
    • Fix missing focus outline in Add New Tag. (24187)
    • Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover. (24186)
    • Fix the gallery buttons focus style. (24157)
    • Update the editor landmark regions. (24196)
    • Mover control: Remove drag cursor. (23759)
  • Fix block insertion place after clicking Browse All in the inline inserter. (24285)
  • Fix last.fm svg icon alignment. (24278)
  • Cover: Fix padding controls showing null units. (24251)
  • Consistently show the default style variation if none provided. (24217)
  • Fix gradient RGBA/HSLA inputs’ width. (24214)
  • Popover: Fix arrow color to match content border color. (24208)
  • Fix dragging multiple blocks downwards resulted in blocks inserted in wrong position. (24183)
  • Fix Button block colors in the editor. (24153)
  • Fix the save shortcut in the code editor. (24151)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 notices when a block hasn’t declared ‘supports’. (24131)
  • Fix Block Directory icons. (24086)
  • Block Breadcrumb: Fix arrow direction in RTL. (24074)
  • 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 missing plural forms for block related strings. (24071)
    • Merge similar translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings in the RSS block. (24159)
    • Merge similar translation strings – tables. (24169)
  • useBlockSync: Fix race condition when onChange callback changes. (24012)
  • Allow enter to insert line breaks even if template is locked. (23330)

Experiments

  • Full Site Editing and Site editor:
    • Add alignment support to post content block. (24014) (24077)
    • Post Title Block: Add style attributes. (24246)
    • Remove more initial PHP state. (23775)
    • Template Part: Improve title editing interactions. (23661)
    • Update the Post author, ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. and Comment blocks to use lightBlockWrapper. (24253)
    • Query blocks: Support wide alignments in the editor. (24229)
    • Post Comments Block: add block alignment support. (24226)
    • Post Excerpt block: Added icon and description to Post Excerpt block. (24203)
    • Post Date block: Added Post Date icon and updated block with icon and desc. (24178) (24225)
    • Post Author block: Added a description. (24171)
    • Post Comments Counts: Add style attributes. (24167)
    • Post Comments Form: Add style attributes. (24162)
    • Post Author and Post Excerpt: change editor selector class. (24104)
    • Post Comments block: add style supports for text and background settings. (24080)
    • Post excerpt block: Add color, fontSize, lineHeight, and text alignment. (23945)
    • Add Post Tags block description and icon. (23496)
    • Add a description to the Post Title block. (23494)
    • Update Post Author block to use __experimentalColor and __experimentalLineHeight. (23044)
  • Global styles:
    • Fix link color style property name in global styles. (24296)
    • Fix merge algorithm. (24294)
  • Navigation Block and screen:
    • Fix Navigation Block submenu being overlapped by Cover block overlay. (24062)
  • APIs:
    • Add initial support for themes to control the editor. (24275)
    • Prefix useSimulatedMediaQuery __experimental. (24279)
    • URLInput Customizable control rendering. (24115)

Documentation

  • Update Gutenberg FAQ with more recent information. (24202)
  • Clarify custom link color documentation for themes. (24056)
  • Add a link to the WordPress Data guide. (24327)
  • Document the new block tools theme support and core block patterns. (24265)
  • Replace the demo link of the Gutenberg Storybook in the documentation. (24212)
  • Docs: Update default values for Popover props ‘noArrow’ and ‘position’. (24207)
  • Added missing documentation link for contributor handbook. (24179)
  • Docs: Convert Block Registration RFC to the Block Metadata document. (23832)
  • Typos and tweaks: (23899) (24057) (24033) (24211) (24100)

Code Quality

  • Improve rootClientId comparison in useBlockDropZone. (24307)
  • Clarify wp.blocks.createBlock error message. (24287)
  • Convert blocks to function component with 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.:
    • BlockInvalidWarning. (24284)
    • ReusableBlockConvertButton. (24015)
  • Add missing prop to WPBlockVariation type definition. (24110)
  • Remove deprecated blockType.context support. (24155)
  • Wrap LinkControlSearchInput in forwardRef. (24119)

Build Tooling

  • Perf Tests: Set up branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". only once for all test suites. (24123)
  • Revert “Build: Use .min.js suffix for bundled JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.”. (24239)
  • Add a GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. Diff to the output of the static checks job on failure. (24154)

Various

  • Fix intermittent Navigation block test failure. (24146)

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.

Version Loading Time KeyPress Event (typing)
Gutenberg 8.7 6.97 s 26.63 ms
Gutenberg 8.6 6.84 s 27.15 ms
WordPress 5.4 9.55 s 43.81 ms

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

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

What’s new in Gutenberg (July 22)

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.6 has been released. Keeping with our July focuses, we’ve been working hard to get ready for WordPress 5.5 while continuing to ship various enhancements to continue to expand Gutenberg. In particular, this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. focuses on local UIUI User interface improvements, performance improvements, and 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. As part of this work, some of these fixes have made their way to WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 3.

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. video position controls

The positioning of video backgrounds in the Cover block can now be adjusted. Previously, these positioning controls were available only to image backgrounds. The focal point picker and the input controls support cursor and keyboard interaction alike.

8.6 🇯🇲

Features

  • Cover Block: Add video position controls. (22531)
  • Block pattern updates: Large 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. and paragraph, Large header, Text two columns, Three buttons, Two buttons, Quote. (23858) (23857) (23853) (23849) (23848) (23881)

Enhancements

  • Editor: Display Site Icon (if one is set) in full-screen mode. (22952)
  • Block Variations: Add support for finding variations using keywords. (24040)
  • Classic Block: Move the “convert to blocks” option from menu to own toolbar button. (23704)
  • 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 composite pattern to improve keyboard navigation on the inserter. (23610)
  • Date: Add timezone hint to post-scheduling UI. (23400)
  • Panel: Improve scroll view handling when expanding. (23327) (24046)

New APIs

  • Support disabling coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block patterns. (24042)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). the line height and custom units theme support flags consistent and opt-in. (23964) (23904)
  • Image: Add the ability for a 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 disable Image Editor. (23966)

Experiments

  • Site Editor:
    • Change references to section back to template part. (23765)
    • Post Date Block: Add style attributes and restructure the edit function. (23931)
    • Edit Site: Integrate quick inserter. (23516)
  • Navigation screen and blocks:
    • Try: Customizable toolbar contents. (23613)
    • Navigation screen: Restore block movers for blocks with just one sibling. (23680)
    • Navigation screen: Add error boundary to experimental navigation screen. (23679)
    • Navigation screen: Show block appender by default. (23676)
    • Block Navigation: Use quick inserter. (23737)
    • Navigation screen: Add .editor-styles-wrapper. (23736)
  • Fix Inserter on the widgets screen. (24045)

Bug Fixes

  • Prevent JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. error when using arrow navigation in URLInput. (24047)
  • a11y: Persist tooltips on hover. (23959)
  • a11y: Components: Fix Toolbar arrow key navigation in RTL contexts. (24043)
  • a11y: RichText: Restore aria-multiline. (24041)
  • a11y: Fix Copy block button focus loss and try to remove the visually hidden textarea. (24022)
  • a11y: Fix radio control in Windows High Contrast mode. (23706)
  • Block Patterns: Override patterns that were registered by Core. (24004)
  • Fix block wrapper selector. (23991)
  • Fix block icon mouse-out gesture issue. (23980)
  • Fix components utils export for use-update-effect. (23969)
  • Fix blocks dropping to incorrect position in inner block lists. (23950)
  • RangeControl: Adapt slider color to color scheme. (23936)
    • (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.) Color Values: Rename brand to theme. Add fallback values. (24059)
  • Prevent content loss after refreshing an editor with unsaved auto-draft post. (23928)
  • Fix edited Classic block’s content deletion when switching to Code editor. (23927)
  • Fix drag and drop to empty block lists. (23923)
  • Fix drag and drop for aligned blocks. (23916)
  • Fix comment capitalization/punctuation. (23912)
  • Fix block merging 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.. (23901)
  • Inserter: Order quick inserter items by frecency. (23900)
  • Inserter: Set quick inserter content width to 100% on screens below 782px. (23896)
  • Autocomplete: Fix closing slash inserter with ESC. (23859)
  • Inserter: Hide inserter’s block preview when searching. (23827)
  • apiFetch: Fix fetch-all preloading. (23807)
  • Fix error triggered when a tab is removed from TabPanel component. (23784)
  • Fix block movers in navigator on experimental navigation page displaying horizontally. (23779)
  • Search: Fix attribute defaults. (23777)
  • Apply the reset mixin to the inserter panel. (23744)
  • 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. controls: Add more space for German and other locales. (23738)
  • Block Library: Standardize post block placeholders. (23690)
    • 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.: Block Library: Translate post block placeholders. (23774)
  • Fix issue where block inserted in wrong place when selection is in nested block list, but root appender is used. (23668)
  • Fix an issue where dragging while the page has no scrollbar results in a console error. (23666)
  • Updated styling to match the post editor. (23525)
  • UnitControl: Fix internal unit parsing to handle incoming unit prop. (23521)
  • Table block: Fix focus loss in between row/column insertions. (23508)
  • Editor: Fix block highlight rendering after block is moved. (23425)
  • Inserter: Fix line to show again. (20792)
  • Button: Properly handle border radius reset. (23887)
  • Block Directory: Remove “contact adminadmin (and super admin)” messaging. (23948)

Performance

  • Optimize more selector calls. (23930)
  • Performance testing: Cover Site Editor loading time. (23842)
  • Avoid re-rendering the PostSavedState component on each change. (23829)
  • Small performance tweaks. (23825)
  • Env: Only perform expensive install work when required. (23809)
  • Env: Improve install performance. (23806)

Documentation

  • Expand and update block-based themes documentation page. (23750)
  • Docs/update button component props. (24013)
  • Docs: Update plugin FAQ with versions link. (24005)
  • Remove the experimental flag from the block patterns documentation. (23954)
  • Docs: Add links for Create a Block Tutorial. (23946)
  • Adds basic documentation for the ToolbarButton component. (23909)
  • Docs: Title and markdown formatting for table. (23850)
  • Update documentation contributors guide. (23840)
  • Create new page listing Gutenberg releases in each WordPress version. (23773)
  • Docs: Clarify the interactive mode for create-block. (23752)
  • Docs: Add a tutorial on how to create a block-based theme. (23732)
  • Docs: Move ESNext to JavaScript tutorial. (23725)
  • Docs: Move DevEnv to own section for documentation. (23593)
  • Added readme to matrix alignment toolbar. (23341)
  • Update nested-blocks-inner-blocks.md. (23935)
  • Update block-registration.md. (23933)
  • Link to theme-experiments repo in block-based theme documentation. (23748)

Code Quality

  • Refactor URLPopover to use 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. (23918)
  • Refactor Disabled component to use 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.. (23917)
  • Refactor More block. (23758)
  • Remove navigation block styles. (23678)
  • Refactor MediaPlaceholder to function component. (23671)
  • Remove duplicate selectors. (23466)
  • Refactor Tag Cloud block to use React Hooks. (23426)
  • Convert PostSavedState to functional component. (23038)
  • Types: Improve project setup. (21581)
  • Refactor ReusableBlockEditPanel to use hooks (and add type info). (21181)
  • Updates text, buttons colors and labels. (23855)

Build Tooling

  • Env:
    • Allow wp-env to start without configuration. (23913)
    • Add support for different options in each environment. (22568)
  • Build: Use .min.js suffix for bundled JavaScript. (23926)
  • Try running the performance tests as a GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ action. (23818)
  • Improve the performance tests setup. (23817)
  • Automation:
    • Limit tests to not run on documentation-only changes. (23834)
    • Add paths-ignore **.md for unit tests checks. (23845)
    • Switch workflows to use paths-ignore and **.md. (23843)
  • Fix action GitHub action workflow YAML syntax errors. (23844)

Various

  • Embeds: Remove unsupported core-embed/hulu block. (23984)
  • E2E: Remove duplicate blocks in setup file. (23981)
  • 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/.: Check for WP5.5 and skip registering routes. (23880)
  • LinkControl: Extract reusable parts. (23869)
  • Updates image size to match columns width. (23854)
  • InputControl: Add prefix prop. (23824)
  • Block Navigation: Change the visible labels for “Block navigation” to “List view”. (23796)
  • Site Tagline Block. (23788)
  • Image Editor: When editing, pass the edited image src. (23703)
  • Replace SEO settings nofollow toggle with rel text 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.. (23682)
  • Use global registry on the experimental navigation screen. (23675)
  • Env: Mark breaking change in changelog. (23776)
  • Cancel previous running workflows when a new commit is made. (23587)
  • Add title to image and video selection sheets. (23083)
  • Site Title: Add support settings for colors, fonts, and line height. (23007)
  • Add fix to make inputs of type email return true from isTextField. (21162)
  • Full Site Editing: Add a Site Logo block. (18811)

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.

Version Loading Time KeyPress Event (typing)
Gutenberg 8.6 9.62 s 35.05 ms
Gutenberg 8.5 10.38 s 37.55 ms
WordPress 5.4 13.48 s 54.65 ms

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

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

What’s new in Gutenberg (8 july)

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.5 has been released. This is the last 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. that is going to be included entirely (without experimental features) in WordPress 5.5.

Drag and Drop

Since its first introduction, the experience of drag and dropping blocks to reorder them has stayed almost untouched. This release includes several iterations to improve on this interaction. Drag and drop supports vertical reordering more clearly, it replaces the cloned element with a nice little drag chip and smooth the scroll-on-drag behavior.

AccessibilityAccessibility 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) improvements

One important addition in this release is the possibility to disable arrow navigation across blocks. While writing long form content, it’s very important to be able to navigate using arrow keys between blocks, this can be confusing for screen reader users. We now have an option to disable that behavior.

Easy upload for external images.

Another workflow people use while writing is to rely on external tools to write or collaborate on their posts and when ready, copy/paste these into the 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. editor.

The downside is that any external images used there are hosted elsewhere and may not always persist. In this release, if an image block is using an external images, you’ll have the possibility to upload it to the media library while keeping it as is on the post with a single click.

8.5 🇸🇪

Features

  • 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 an option to keep the caret inside blocks in edit mode. (23546)
  • Add anchor/id support to all static blocks. (23197)

Enhancements

  • Add an edit button to the gallery images. (23554)
  • Image block: Allow uploading external image if image host allows it. (23565)
  • Drag And Drop:
    • Enable for multi selection. (23477)
    • Improve the drag and scroll behavior. (23082) (23448)
    • Don’t show a cloned block while dragging. (23024)
    • Polish the block drag chip. (23609)
  • Image editing:
    • Move zoom control to toolbar dropdown. (23677)
    • Add original aspect to dropdown. (23659)
    • Add 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. to 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/. image edit. (23539)
    • Polish zoom slider. (23418)
    • Add permission checks to the endpoint. (23423)
  • Block Directory:
    • Return inactive plugins in search results. (23688)
    • Use CDN for block directory assets. (23499)
  • Add line height rule to the post title. (23656)
  • Avoid ordering block types per frecency inside block categories. (23643)
  • Polish the document 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. controls. (23578)
  • Add modern color scheme support. (23558)
  • Use a consistent close icon across the UIUI User interface. (23551)
  • Redesign the transform menu. (23028) (23449)
  • Redesign the canvas inserter. (22789)
  • Unify tooltip styles. (23382)
  • Add block variations to the slash inserter. (23364)
  • Hide the most used blocks by default and add an option to enable it. (23358)
  • Add reusable block tab to inserter. (23296)
  • Add keyboard shortcuts for moving blocks. (23276)
  • Cover block: Don’t show the matrix alignment button when no background set. (23196)
  • Spacer: Show tooltip with height value on resize. (23077)
  • Improve post publish buttons alignment. (22390) (23487)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). Preview and Save Draft buttons use the same style. (21192)
  • Add unlink URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to buttons block. (23445)
  • Clean the patterns list to include in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (23608)
  • Add pullquote block tranformations. (23562)
  • Remove block label from child block appender. (23393)
  • A11y: Move blocks between levels using keyboard. (22453)

New APIs

  • Support orientation prop in InnerBlocks. (23416)
  • Support a flexible useItems 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. for the autocompleters API. (22853) (23385)
  • Stabilize the image editing REST API endpoint. (23536)
  • Stabilize the block directory REST API endpoint. (23528)
  • Add descriptions to Block patterns. (23070)

Experiments

  • Site Editor:
    • Remove the button block appender. (23436)
    • Improve the template parts insertion flow. (23295)
    • Fix template part resolution for edited files. (23591)
    • Fix inspector panels buttons. (23464)
    • Add template part block keyword. (23623)
    • Allow wide alignment. (23488)
    • Remove templateIds state. (22893)
  • Navigation screen and block:
    • Fix saving issues. (23559)
    • A11y: Improve keyboard navigation on the Navigation block toolbar. (23281)
    • Fix text size no longer overwritten. (23360)
    • Adjust Navigation block submenu padding and spacing. (23380)
    • Update placeholder label. (23297)
    • Hide the block toolbar on the navigation screen. (23021)
    • Allow setting up menus that auto add new pages. (22697)
    • Allow Search block to be added alongside links. (22656)

Bug Fixes

  • Block Directory:
    • Support .svg extension for results icons. (23442)
    • Throw error if we have an issue registering blocks. (23439)
    • Remove the overflow on the Add button. (23409)
    • Fix double border in block list. (23625)
  • Fix the upload icon size. (23553)
  • Allow scrolling over Popovers. (23696)
  • Fix quote left border color in dark mode. (23692)
  • Fix empty block list appender visibility on aligned blocks. (23672)
  • Fix horizontal Block Mover Layout. (23640)
  • Fix invisible drop target indicator. (23638)
  • Rich text: Fix soft line break in caption on enter. (23622)
  • Fix clicking Gallery items buttons on Safari. (23586)
  • Hide block list appender in a reusable block if it’s not being edited. (23584)
  • Revert “Remove the style CSSCSS Cascading Style Sheets. class when the default style variation is chosen”. (23548)
  • Classic block:
    • Add height: Auto to content wrapper. (23547)
    • Add scroll to last edit position. (23544)
    • Adjust placement of the toolbar. (23438)
    • Prevent content loss by regularly dispatching changes. (23408)
    • Fix undo keyboard shortcut. (23376)
  • Fix the Gallery images buttons rendering. (23471)
  • Fix Post title top margin. (23447)
  • Fix file names generation for edited image files. (23440)
  • 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 when cropping imùges. (23432)
  • Polish block moving animation. (23401) (22640)
  • Fix small RTL 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. in Buttons block. (23390)
  • Fix centered legacy button. (23381)
  • Fix React warning while unmounting slots. (23365)
  • Don’t show the “Move to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” action if the user is not allowed to delete posts. (23174)
  • add inline font-sizes and colors to the editor for themes that don’t enqueue the preset classes. (22356) (22668) (23717)
  • Create Block: Fix missing scripts section in scaffolded package.json. (23443)
  • Scripts: Fix build script with style.css files. (23710)
  • Restore removed props and behavior back to Query Controls. (23419)
  • Add support for hexadecimal colors in gradient presets. (23363)

Performance

  • Improve the performance of the keyboard shortcuts binding. (23394)

Documentation

  • Add a documentation page explaining how the repository is organized. (23563)
  • Document the WordPress 5.5 backported code. (23478) (23708)
  • Add .markdownlint.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. configuration extending scripts configuration. (23655)
  • Add “Create a Block” tutorial Create a Block tutorial. (22831) (23654)
  • Update wp-env Ubuntu documentation. (23650)
  • Add documentation for InnerBlocks orientation prop. (23641)
  • Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. (23577)
  • Update categories in block registration documentation. (23572)
  • Update ESNext usage in public API. (23475)
  • Clarify the wp-block-styles documentation. (23359)
  • Add documentation for setting up Prettier for markdown. (23286)
  • Typos and tweaks: (23542) (23489) (23590) (23300) (23534) (23467)

Code Quality

  • Optimize useSelect calls (dependencies) (23255) (23247) (23245) (23249)
  • Reduced the number of SASS color variables. (23648) (23454)
  • Remove unused getBlockIndex selector from useBlockDropZone hook. (23634)
  • Scroll on drag: Remove blockNodes context dependency. (23561)
  • Add missing notices dependency. (23517)
  • Remove BlockPopover key prop and related code. (23504)
  • Show a warning when SlotFillProvider is missing. (23493)
  • Block toolbar: Remove data-align attribute. (23468)
  • Extract block draggable scroll behaviour into React hook. (23444)
  • Refactor Dropdown to use functional component. (23142)
  • Refactor Embed Edit component: Class component to Function component. (22846)
  • Extract navigation link rendering code from the navigation block. (21075)
  • Block editor: Use vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. instead of Lodash if possible. (21063) (23633)
  • Add “engines” to the package.json and “engine-strict = true” to the package.json. (23600)
  • Block Directory: Remove custom permission check in favor of canUser. (23624)
  • Remove REST_WP_REST_Block_Types_Controller_Test which now exists in WordPress Core. (23500)
  • Editor: Remove unnecessary block directory dependency. (23476)
  • Plugin Controller: Return the plugin without the extension. (23395)
  • Clean up image editor REST route. (23368)
  • Make slash inserter tests more stable. (23367)
  • Post Author block: Fix end-to-end test fixture indentation. (23209)

Build Tooling

  • Add new command for pre-releasing npm packages. (23357)
  • Move the CI setup from Travis to GithubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ actions. (23523) (23520) (23518) (23470) (23538)
  • Add npm cache to Github workflows and use checkout v2. (23482)
  • Update bin/validate-package-lock.js error message. (23435)
  • Minor improvements to the release tool and release documentation. (23441)
  • Tools: Always append prerelease to version update in package.json when preparing npm release. (23480)
  • Scripts: Add custom TerserPlugin configuration. (22990)
  • Scripts: Exclude node_modules from source map processing in start script. (23711)
  • Fix rc version number added to the CHANGELOG. (23433)
  • Tests: Jest – Add typeahead plugin. (23366)
  • Tests: Run end-to-end tests only as an adminadmin (and super admin). (23588)
  • End-2-end Tests: Add test for using block variation with the slash inserter. (23585)

Various

  • RangeControl: Integrate NumberControl + update internal state flow. (23006)
  • Create Block: Generate a block.json file. (23399)
  • Sync Block Context changes from Core. (23602)
  • Scripts: Remove default exclude rule for node_modules for SVG, CSS and Sass files. (23495)
  • REST API: Sync /themes endpoint with Core’s. (23321)

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.

Version Loading Time KeyPress Event (typing)
Gutenberg 8.5 6.86 s 27.84 ms
Gutenberg 8.4 7.22 s 27.85 ms
WordPress 5.4 8.91 s 40.52 ms

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

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

What’s new in Gutenberg (24 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.4 has been released. This is the second last 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. before WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 and it’s a big one! Gutenberg 8.4 includes image editing, multi 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. controls, and we’ve enabled the Block Directory. This release also includes many fixes, countless refinements, and a tonne of iteration on the Full Site Editing and the Navigation experiments.

Image editing

Are you a photography geek who cares about things like the “rule of thirds”? Now you can makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). quick crops without leaving the block editor. Just hit the Crop button in the toolbar and you can adjust the aspect ratio, zoom level, and position.

You can also rotate the image right then and there. Great for when your iPhone-using friend sends you a picture!

Multi block controls

How’s this for a little big improvement: Now, if you select multiple blocks of the same type, you can change their attributes all at once. Nice!

Enabling the Block Directory

Now you can discover, install, and insert third-party blocks into your posts from the comfort of your editor. Search for the block you want in the inserter and, if you don’t already have it, you’ll see a prompt to install it right then and there.

We call this the Block Directory, and it’s one of the big ticketticket Created for both bug reports and feature development on the bug tracker. items in the WordPress Roadmap. It’s powered by the WordPress.org Plugin Directory and we’re super excited to see what our fabulous community of plugin developers will do with it.

We’ll be posting more info about the Block Directory—including how you can publish your own blocks to it—shortly. Watch this space!

8.4 🇧🇷

Features

  • Add image editing. (23349)
  • Enable block directory. (23389)
  • Allow block attributes to be modified while multiple blocks are selected. (22470)

Enhancements

  • Show movers next to block switcher. (22673)
  • Support drag and drop in blocks like Social Links and improve drop zone detection. (23020)
  • Improve the accessibliity of toolbars by implementing roving tab index.
    • Embed block toolbar. (23278)
    • Custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block toolbar. (23277)
    • Table block toolbar. (23252)
    • Grouped blocks toolbars. (23216)
    • 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. toolbar. (22354)
  • Tweak colors of disabled buttons to match rest of WP Adminadmin (and super admin). (23229)
  • Unify style of subheadings. (23192)
  • Make Popover scrolling and position behavior adapt to the content changes. (23159)
  • Reduce block appender hover delay. (23046)
  • Improve the alignment of children in the CardHeader and CardFooter components. (22916)
  • Add ability to transform a Preformatted block into a Code block. (22634)
  • Add a border to blocks while hovering with the Select tool active. (22508)
  • Consolidate disparate “copy block” actions. (23088)
  • Remove margin from last button if buttons in Buttons block are centered. (23319)
  • Adapt the block switcher styles to the new Popover component. (23232)
  • Make UIUI User interface more consistent. (23202)
  • Remove canvas padding. (22213)
  • Image Editing
    • Update Rich Image Icons. (22819)
    • Consolidate crop ratios. (22817)
    • Use snackbar notifications. (23029)
    • Batch editing in cropper component. (23284)
    • Move to image block. (23053)
    • Change Edit label to crop icon. (23387)
    • Use percentage instead of multiplier. (23362)

New APIs

  • Update the theme colors to rely on CSSCSS Cascading Style Sheets. variables. (23048)
  • Extend register_block_type_from_metadata to handle assets. (22519)
  • Enable custom classnames on <CustomSelectControl>. (23045)
  • Add onFilesPreUpload property toMediaPlaceholder. (23003)
  • Improve error customization inMediaReplaceFlow. (22995)
  • Add context properties to block types REST endpoint. (22686)

Bug Fixes

  • Fix pixel shift for toggles. (23191)
  • Fix useBlockSync race condition. (23292)
  • Avoid overriding popover content padding. (23270)
  • Fix block parent selector border radius. (23250)
  • Fix plus radius. (23240)
  • Fix Inserter’s handling of child blocks. (23231)
  • Create Block: Fix errors reported by CSS linter in ESNext template. (23188)
  • Add context property mapping to block registration. (23180)
  • Remove z-index from placeholder fieldset. (23152)
  • Fix possibly outdated onChange in color palette’s color picker. (23136)
  • Fix updateSlot missing from defaultSlotFillContext. (23108)
  • Add check theme support is an array before indexing. (23104)
  • Add 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. to padding ‘reset’ button. (23099)
  • Fix group block moving animation not working correctly. (23084)
  • Use a light block DOM for the Media & Text block. (23062)
  • Popover: Ensure popovers consider border width’s in their positioning. (23035)
  • Remove child space inTooltip. (23019)
  • Fix drag and drop for blocks that don’t use __experimentalTagName for their inner blocks. (23016)
  • Fix am / pm i18n 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.. (22963)
  • Fix plugin document setting panel name. (22763)
  • Fix plus icon. (22704)
  • Fix Typography panel rendering from style 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.. (22605)
  • Fix “Cannot read property ‘end’ of undefined” error on babel-plugin-makepot. (22394)
  • 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/. does not recognize isSelected prop in ComplementaryAreaToggle” warning. (22967)
  • Cover padding: Fix reset and visualize on hover. (23041)
  • Fix color picker saturation bug. (23272)
  • Fix image size feature. (23342)
  • Remove block preview paddings. (23386)
  • Block Directory
    • Fix “no result” UI flash. (22783)
    • Uninstall unused block types. (22918)
    • Fix installing blocks. (23096)
    • Add plugins 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/. endpoints. (22454)
    • Use plugin 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. for installing & deleting block-plugins. (23219)
    • Use a more specific <script> matching pattern. (23407)
    • Fix missing padding. (23346)
  • Image Editing
    • Fix image size on crop. (23173)
    • Avoid re-render on select. (23009)
    • Preserve crop position through rotations. (23374)

Performance

  • Memoize useSelect callbacks on the header toolbar items. (23337)
  • Enqueue assets for rendered blocks only. (22754)
  • Call isMultiSelecting and isNavigationMode selectors where needed. (22135)

Experiments

  • Full Site Editing
    • Move initial template fetch to client. (23186)
    • Fix Template Part Auto-draft creation. (23050)
    • Fix template part switching instability. (23282)
    • Fix $theme-color error in Template Part block. (23221)
    • Add auto-drafting for theme supplied template parts. (23254)
    • Add template part previews to placeholder block. (22760)
    • Fetch template parts in Template Switcher from REST API. (21878)
    • Post Title block: Add alignment and heading level support. (22872)
    • Post Author block: Update functionality and visual parity. (22877)
    • Add theme exporter. (22922)
  • Navigation block & Navigation screen
    • Visual improvements to the block navigator. (22796)
    • Improve flow when creating from menu. (23187)
    • Renamed Navigation Link to Link. (23163)
    • Only show appender for the currently selected block. (22998)
    • Fix navigation block dark style appender. (23165)
    • Fix saving on navigation screen. (23157)
    • Extract and refactor placeholder from navigation block edit function. (23109)
    • Better README for the edit-navigation package. (23018)
    • Remove navigator from the navigation block inspector. (23022)
    • Separate block navigator focus from the editor focus. (22996)
    • Change MenuLocationsEditor to use a card instead of a panel. (23151)
    • Change Create Menu UI to use a Card instead ofPanel. (23150)
    • Enable creation from existing WP Menus. (18869)
    • Don’t announce external value changes in custom select control. (22815)
    • Refactor Navigation screen to use @wordpress/data. (23033)

Documentation

  • @wordpress/env: add login details to documentation. (23343)
  • Grammatical fixes in modularity.md. (23336)
  • Update modularity.md. (23322)
  • Use correct package for importing useState in BoxControl examples. (23243)
  • Rename architecture index.md to readme.md. (23242)
  • Scripts: Update changelog to move unreleased entries to Unreleased section. (23178)
  • Handbook: Udpate documentation for package release. (23162)
  • Use deny/allow list. (23120)
  • Move ESNext as default code example. (23117)
  • Handbook: Update release documentation. (23002)
  • Update theme-support.md for experimental supports. (23310)
  • RichText: Add missing param documentation for getActiveFormats(). (23160)
  • API description: Use a period at the end. (23097)
  • Improve JSDoc comment in ESNext template in edit.js file. (23164)
  • Blocks: Update block registration default values. (23348)

Code Quality

  • Refactor header toolbar items to use @wordpress/data hooks. (23315)
  • Use useLayoutEffect to compute the popover position. (23312)
  • Reduce unnecessary selector specificity for Button block. (23246)
  • Button component – remove isLarge prop. (23239)
  • Upgrade Reakit to version 1.1.0. (23236)
  • Refactor column block to use hooks. (23143)
    RichText: Rewrite with hooks. (23132)
  • Refactor ToggleControl to use functional component. (23116)
  • Refactor Media & Text to use functional components. (23102)
  • Image block: Split huge component. (23093)
  • SimplifyuseImageSizes. (23091)
  • Block: Move align wrapper out of Block element. (23089)
  • Remove Gutenberg plugin’s deprected APIs for version 8.3.0. (23001)
  • Block: Remove animation component so it is just a hook. (22936)
  • Remove asterisk icon. (22855)
  • Image Editing
    • Use hooks. (23008)
    • REST API Code Cleanup. (23037)

Copy

  • Cover block: update copy for Opacity label. (23287)

Build Tooling

  • Packages: Fix the changelong updater for initial npm release. (23166)
  • Scripts: Fix style.css handling in the build and start commands. (23127)
  • Scripts: Clean up the build folder via clean-webpack-plugin. (23135)
  • Scripts: Update stylelint dependencies to latest versions. (23114)
  • Remove volumes and networks in wp-env destroy. (23101)
  • Build: Replace “release” with “build” in script for building a package. (23063)
  • Release tool: Fix bug on reporting message error. (22994)
  • Scripts: Remove temporary workaround in ESLint configuration. (22915)
  • ESLint plugin: Allow ESLint 7.x as peer dependency. (23190)
  • Packages: Add “gutenberg” to the list of keywords in package.json. (23161)
  • Update package-lock.json. (23052)

Various

  • Initialize the content size used in Popover computation. (23279)
  • Make the block grouping test more stable. (23266)
  • Try to improve heading custom color E2E test stability. (23260)
  • Attempt to fix RTL end-to-end test. (23203)
  • Add verification for Create Block to Continues Integration. (23195)
  • Remove padding inheritance on lists in editor-styles. (23080)
  • Change select parent button styles. (23230)
  • Make link color control opt-in. (23049)
  • Use showBlockToolbar consistently in e2e tests. (23311)

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.

Version Loading Time KeyPess Event (typing)
Gutenberg 8.4 7.69 s 31.91 ms
Gutenberg 8.3 7.23 s 28.30 ms
WordPress 5.4 9.00 s 41.17 ms

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

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

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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). 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.

Version Loading Time KeyPess Event (typing)
Gutenberg 8.3 11.94s 47,75ms
Gutenberg 8.2 11.43s 47.95ms
WordPress 5.4 13.79s 39.32ms

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

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

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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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 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 makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). 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

What’s new in Gutenberg? (13 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.1 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. mostly contains developments/enhancements on experimental screens, 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, and performance improvements.
It also contains some new features available on the general editor screens, described bellow.

New 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. pattern features

Gutenberg 8.1 brings pattern search to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it easier to insert the desired patterns and a new pattern: the testimonials.

Copy block action

The copy block action is a small quality of life improvement for touchscreen users or users who don’t use keyboard shortcuts. Gutenberg 8.1 adds a button to the collapsed block actions (next to duplicate, etc.) to copy the selected block(s). The feature is quite similar to the “Copy all blocks” but then for the selected block.

8.1 🇹🇷

New features

  • Pattern search (21944)
  • Testimonials block pattern. (20894)
  • New Transforms:
    • Embed blocks into Paragraph blocks. (17413)
    • Code to HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block and the opposite. (21779)
  • Add copy action to the blocks. (22214)

Enhancements

  • Implement Block Navigator selection on the Nav Menus page. (22017)
  • Write block patterns in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 to allow 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.. (21946)
  • Post title: handle paste as blocks. (21758)
  • Clear Publish Date Button. (20914)
  • Add gap between nested submenus. (22227)
  • Block Library: enhance the author’s block. (19894)
  • Add “black” and “white” color options to the default color palette. (22082)
  • Light blocks: social links. (22078)
  • CustomSelectControl: set aria-hidden to empty option list. (21298)
  • Add some more g2 icons. (21825)
  • Allow the column block in the inserter. (20502)
  • Delete menus in nav menus experimental screen. (21486)
  • Visual and experience improvements to existing sub-navigation flow. (22107)
  • Reduce font-size and line-height of “it’s time”. (21627)
  • Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter(). (21980)
  • Make parts of the BlockNavigationList overridable using slots. (21948)
  • Change the color alpha input step to match the slider step. (21953)
  • Navigation: fallback for undefined orientation. (22057)
  • Remove the subscription button from the blogblog (versus network, site) template. (22129)
  • Move the Entities Saved States from Modal to 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.. (21522)

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

  • Update the Patterns API to avoid ambiguity. (21970)
  • Expose the registered pattern slugs in get_all_registered. (21619)
  • Fix doc-building pre-commit API hook issue. (22116)
  • 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/.: Block directory – Typecast author_block_count as integer. (17594)
  • Block API: Block Context: 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. content, prepare attributes at render, pass a block to render. (21925)

Experimental

  • Add undo-redo UIUI User interface to edit-site and edit-widgets. (21955)
  • Light blocks: site title. (22069)
  • Update: Use EntityProvider on the 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. area. (22008)
  • Site editor:
    • Extract gutenberg_find_template_post helper. (21959)
    • Fix default editor background. (22182)
    • Refactor close button slot. (22179)
    • Make close button replaceable. (22001)
    • Add home icon to template switcher. (22004)
    • Updated template content. (22044)
    • Fix spelling mistake. (21991)

Performance

  • Reduce re-renders from block nodes context. (22134)
  • Move memo() from BlockStyles to BlockPreview. (21993)
  • Avoid rerenders of the entire BlockInspector when block attributes change. (21990)
  • Optimize BlockStyles by using 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. and React.memo (instead of HOCs). (21973)

Bug Fixes

  • Popover: Fix closest().parentNode null error. (22264)
  • Correct color palette in color settings. (22138)
  • Remove import of inexistant component. (22130)
  • Build Tooling: Run packages build before lint. (22088)
  • RangeControl: Fix number input change interaction. (22084)
  • Fix entity selection through save panel. (22011)
  • 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: Relax check for i18n-text-domain rule. (21928)
  • Block Library: 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/. does not recognize isSelected prop in Spacer block. (21924)
  • Reinitialize the 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. after the parent block is moved around. (21916)
  • Configure the navigation editor with correct __experimentalFetchLinkSuggestions. (21873)
  • Create the proper shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. on paste. (21864)
  • Refactor FontSizePicker component. Fix bug on undo. (21757)
  • Move caret to the end of pasted content. (21755)
  • Embed: use the same SmugMug URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org regex as the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (21744)
  • Navigation block: use new icon in placeholder. (21713)
  • Fix Template Part placeholder preview. (21623)
  • Restore the missing background color on the nested submenus. (22228)
  • fix: [#21777] Prevent focusing of FireFox address bar. (22215)
  • Fix flaky test in rich text. (22202)
  • Fix flaky test: tag “target” attribute. (22200)
  • Fix extra tab stop on Modal component. (22063)
  • Writing flow: fix vertical arrow nav in table (and generally grid). (22105)
  • Gallery block / media-placeholder – Preserve changes made while upload in progress. (19134)
  • Add missing dependency. (22086)

Tooling

  • Build Tools: Validate package-lock.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. for “resolved” errors. (22237)
  • Build Tools: Disable ESLint no-console for bin directory. (22033)
  • Build Tools: Changelog: Normalize entry to end with period. (22010)
  • Add analyze-bundles script. (21827)
  • Add changelog generator script. (19866)
  • Add a method for publishing patches to the Lerna scripts. (21844)
  • Add additional e2e debugging option. (21845)
  • Replace espree with babel. (21853)
  • Update diff to 4.0.2 and work around tree-shaking issues. (21994)
  • Increase the severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of jsdoc/no-undefined-types. . (21942)

Code Quality

  • Block: move new props to hook. (22212)
  • Block: avoid useLayoutEffect. (22108)
  • Try: Reduced specificity base block margins. (22051)
  • Update the audio and video blocks to use a light wrapper in the editor. (22028)
  • Remove unused animation lingering in paragraph file. (22020)
  • Columns. Remove the top and bottom margin from individual column blocks. (22018)
  • Try better inserter toggle styling. (22016)
  • Block Editor: Rename block context in BlockListBlock. (21922)
  • Remove duplicate CopyHanddler. (21817)
  • Types: Restore element, icons, primitives types. (21781)
  • Convert core toolbar buttons into ToolbarButton. (20008)
  • Block Directory: Add end 2 end tests. (20023)
  • ClipboardButton: use hooks. (22220)
  • ClipboardButton: remove wrapper span. (22218)
  • Block Library: Update FSE blocks to use block context. (21696)
  • Group: Zero out the intrinsic margin set to every block in the editor. (22209)
  • Unset the inherit for links. (22160)
  • Template Loader: Get rid of _wp_current_template_part_ids globals. (22143)
  • Block Library: Post Author: Reference attributes by argument. (22114)
  • Remove pass by reference of the $scripts and $styles attributes in client-assets.php. (21987)
  • Use optional chaining, optional catch binding. (21967)
  • Extract block mover buttons so that they can be individually imported. (22122)sss

Documentation

  • Scripts: Mark env script as deprecated. (22158)
  • Docs: Use InspectorControls from wordpress/block-editor. (22153)
  • Fix bundle analysis change location in the changelog. (22136)
  • Documentation: Improve the way CHANGELOG files are maintained. (22126)
  • ESLint Plugin: Add missing rules to root README. (22042)
  • Fix props, in example, code for Edit Post module. (21976)
  • Document e2e test command options. (21962)
  • Add an example for how to choose a style variation for a block variation. (21927)
  • Add documentation for onSelectURL property. (20799)
  • Document the old patterns API deprecation. (22177)
  • Coding Guidelines:
  • Document JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. language support commitment. (22030)
  • Add “gotchas” section about ES2020 optional chaining. (22029)
  • Recommend function components. (22090)

Various

  • Expose presets declared via add_theme_support in global styles. (22076)
  • Update is-promise package to the latest version. (21940)
  • Blocks: Register FSE blocks if the experiment is enabled. (21536)

Mobile App

  • Add missing RTL support for some mobile components. (21502)
  • Remove separatorType prop from TextControl, RangeControl… (21365)
  • Color settings. (21326)
  • Global styles provider. (21637)
  • Update existing templates to use new blocks. (21857)
  • Enable pullquote block. (21930)
  • Merge release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". back to master for v1.27.1. (22234)
  • Wrap button blocks with buttons blocks in page templates. (21939)
  • Components: Create a separate .native entry for ToolbarItem. (22229)

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.1.0 10.88s 43.61ms
Gutenberg 8.0.0 13.30s 42.97ms
WordPress 5.4 10.80s 52.87ms
#core-editor, #editor, #gutenberg-new

What’s new in Gutenberg (29 April)

In this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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/ 8.0, there is a continued effort to refine the experience around the new 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 feature. Additional formatting options for subscript and superscript text have been added, and the code editor has been improved to be more like how one would expect a code editor to look and feel.

Patterns Inserter

To allow a user to browse and insert block patterns, a new tab-panel interface has been added to the Block Inserter. In order to afford additional space for browsing patterns, the top-level inserter has been redesigned to appear as a panel that appears adjacent to the block list when toggled.

Animation inserting a block pattern using the inserter

Inline Formatting

Previously, the availability of formatting options was constrained by the limited space available in a block toolbar. The inclusion of a collapsible dropdown list of formatting options opens the possibility to add a variety of new formatting options for more niche use-cases. This release adds two new formatting options: subscript and superscript.

Animation formatting text of chemical formula using subscript

Code Editor

This release improves the code editor by embracing what it is: a code editor. The Code Editor now uses a monospace font for the title, and the editor resizes to the viewport.

Screenshot of code editor as it appears in Gutenberg 8.0

8.0 🇧🇬

Features

  • Add subscript and superscript formatting options. (21819)
  • Move the Block Patterns UIUI User interface to the inserter. (20951)
  • Improve layout and usability of code editor. (21643)

Enhancements

  • Add inserter previews to more blocks. (21740)
  • Performance improvements:
    • Import from individual reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates component. (21914)
    • Upgrade showdown Markdown processor library. (21862)
  • Allow title and button-based appender to inherit styles. (21749)
  • Output float clearing for all centered blocks. (21608)
  • Update ‘Welcome Guide’ illustrations. (21515)

New APIs

  • A new Block Context API has been partially implemented, currently limited to block settings and editor APIs. PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 APIs will be implemented in the next 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 releases. (21467, 21868, 21921)
  • Add new “G2”-styled icons to the Icons package. (21209)

Bug Fixes

  • Change wp_make_content_images_responsive to wp_filter_content_tags to resolve warnings in WordPress 5.5-alpha. (21514)
  • Collapse selection to end after link insertion. (17126)
  • Fix selected categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. on existing Latest Posts blocks. (21359)
  • Fix overlapping column contents for embeds. (21570)
  • Fix focus styling for date picker calendar days. (21600)
  • NPM Packages
    • Fix “Cannot find module ‘../utils'” error. (21609)
    • Types: Hide element, primitives, icons declarations. (21613, 21784)
  • Inherit font styles in block appender placeholder. (21725)
  • Allow default pasting behavior in FontSizePicker. (21812)
  • Prevent negative custom text sizes. (21815)
  • Fix image center alignment behavior. (21911)
  • Fix centered buttons margins. (21947)
  • Revert the button block to the previous markup. (21923)
  • Avoid using inline RichText element for navigation link. (21856)
  • Ensure resetEditorBlocks is synchronous. (21839)
  • Fix the button outline style for the old button markup. (21816)
  • Fix default attribute on audio preload. (21735)
  • Fix gradient picker double-click 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.. (21732)
  • Fix broken links in handbook. (21686)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). useMediaQuery return the correct value on the first render. (21682)
  • Fix visual issue on windows with 782px. (21661)
  • Allow wrapping for Navigation block links. (21632)
  • Remove redundant margins from the columns block. (21615)
  • Fix media Text padding on inner blocks. (21612)
  • Restore floated image margins. (21500)
  • Fix URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org display for scheduled posts. (21410)
  • Test keycode modifiers for keyboard event as exclusive set. (20733)
  • Fix focus loss for Guide “Finish” button in Internet Explorer. (20599)
  • Replace incorrect Snackbar label attribute with aria-label. (20540)

Experiments

  • Add experimental useEditorFeature hook to simplify access to editor features. (21646)
  • Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. page:
    • Try a fixed toolbar in the navigation page. (21340)
    • Fix panel collapsing in navigation page. (21633)
    • Fix mobile layout for navigation menu page. (21638)
    • Delete empty spaces in menu 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/. endpoint strings. (21453)
  • Edit site:
    • Add current theme to template switcher. (21578, 21768)
    • Declare attributes for Template Part block in block.json. (21796)
    • Update end-to-end test for multi-entity saving in site editor. (21363)
    • Add preview options component. (21309)
    • Improve template parts resolution and saving behavior. (21766)
    • Support REST API 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. queries. (21851)
    • Add extra validation when loading template parts. (21636)
  • Block directory:
    • Add InserterPanel around block directory results. (21748)
  • Widgets:
    • Fix legacy widgets z-index issue. (21586)
    • Fix legacy widgets visual issues. (21585)

Deprecations

  • Add deprecation notice to useApiFetch hook. (21723)

Code Quality

  • Remove nested breakpoint in fullscreen mode CSSCSS Cascading Style Sheets.. (21496)
  • Update npm-package-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.-lint from 4.0.3 to 5.0.0. (21597)
  • Update npm dependencies that warn. (21596)
  • Fix license check script to ignore sub-dependencies of ignored packages. (21606)
  • Package TypeScript types improvements:
    • Mark addQueryArgs arguments parameter as optional. (21926)
    • Relax 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. sprintf arguments type. (21919)
  • Update PHPCS to latest version. (21680)
  • Unify how editor alignments are applied across blocks. (21822)
  • Remove obsolete editor alignment classes. (21906)
  • Remove old icons. (21821)
  • Implement block.json for blocks. (21794, 21783, 21782, 21775, 21787, 21774, 21792)
  • Use register_block_type_from_metadata in Latest Posts block. (21788)
  • Polish RSS block code. (21773)
  • Move camelCaseDash to the package where it is consumed. (21736)
  • Improve URLPopover code from review comments. (21621)

Documentation

  • Remove duplicate sentence in glossary documentation. (21565)
  • Update wp-env docs to reflect current functionality of package. (21809)
  • Extract Block Transforms into its own handbook page. (21734)
  • Update the index of Block 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 reflect current contents. (21726)
  • Clarify attribute type documentation. (21694)
  • Add location for components style.css. (21654)
  • Fix the JSDoc return type for getEntityRecords. (21630)
  • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. links to new document. (21629)
  • Update Getting Started instructions for remote server. (21625)
  • Update the “patterns” to reflect “user interface” instead. (21562)
  • Create document for contributing with triage. (21350)
  • Update triage.md to add more clarity and relevant links. (21802)

Project Management

  • Update bug report template to help identify the editor version. (21564)

Various

  • End-to-end tests:
    • Add test for template part block creation and insertion. (21849)
    • Add test that template part block customizations are loaded from slug and theme attributes. (21852)
    • Fix tests by removing unnecessary assertions and properly install dependencies in @wordpress/api-fetch. (21780)
    • Add end-to-end test for pinned 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. items. (21652)
    • Add test which verifies reusable block after refresh. (20605)
  • Update cleanForSlug() to remove additional non-word characters. (21007)
  • @wordpress/scripts:
    • Support debugging with test-unit-js. (21631, 21861)
    • Install Chromium on demand together with test-e2e script. (20215)
  • @wordpress/create-block block scaffold tool:
    • Make it easier to provide most popular CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. options. (21751)
    • Split JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. source files into parts for ESNext template. (21750)
  • @wordpress/env development environment:
    • Expose port 3306 of MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. container. (21545)
  • @wordpress/eslint-plugin:
    • Add the recommended Prettier config to enforce WP coding styles. (21602)
    • Fix no-unused-vars-before-return JSX identifier reference. (21358)
  • Navigation block:
    • Revert changes to data fetching mechanics. (21721)
  • Bundle the block autocompleter in the block-editor package. (21534)
  • Storybook:
    • Add FormToggle component. (18085)
  • Simplify Reusable Block description. (21470)
  • Build tooling:
    • Install Composer dependencies as pre-lint step. (21537)
    • Configure Webpack to watch only build files. (21489)
    • Exit with non-zero status on docgen failed parse. (21690)

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.0 9.8s 31.4ms
Gutenberg 7.9 12.0s 36.0ms
WordPress 5.4 9.2s 29.4ms

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

What’s new in Gutenberg (15 April)

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. Design Tools

This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. features a few additions to the design tools for the blocks, including height unit control for the Cover block, line-height control for the Paragraph and Heading blocks, and background gradient support for Group, Columns, and Media & Text blocks.

Patterns

Work on patterns has continued and 7.9 comes with three new ones:

Block markup

The work to lighten the DOM in the editor and makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it as close as possible to the front-end has been advancing as well.

The 7.9 version also comes with a simplified and more semantic button block, although the pre-existing classes have been left untouched to minimize breakage.

Before this release:

<div class="wp-block-button">
  <a class="wp-block-button__link">Text</a>
</div>

After:

<a class="wp-block-button wp-block-button__link">Text</a>

We try hard to avoid block markup changes and we reckon that the button block changes may require some themes to adapt some of their style selectors. We hope that the improved markup will serve us better going forward.

7.9 🇧🇪

Features

  • Add gradients support to Group, Columns and Media & Text blocks. 21375
  • Add line height support to the Paragraph block. 20775
  • Add font size support to the Heading block. 21431
  • Add line height support to the Heading block. 21215
  • Add custom height unit support to the Cover block. 20888

Enhancements

  • New Patterns:
  • Add a new keyboard shortcut to toggle Fullscreen Mode. 21436
  • Insert post title instead of URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, when adding a link to an existing post 21240
  • Social links block:
    • Update tumblr icon 21329
    • Update and massage social links colors. 21474
  • Allow reusable block top and bottom paddings to collapse. 21472
  • Update all block previews to use the auto-height behavior. 21014
  • Disable autocomplete for custom class name inputs. 21110
  • Several small tweaks to the new Block UIUI User interface. 21476
  • Unify the focus styles across the UI. 21141
  • Improve block focus style. 21498
  • Remove the post permalink UI from the post title. 21099
  • Style the default toolbar buttons. 21252
  • Style tweaks to the patterns library 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.. 21263
  • Smaller space between toolbar and block. 21166

Performance

  • Add block selection performance test. 21230
  • Improve the performance of the block moving animation. 21231
  • Render the patterns list asynchronously. 21322

Bug Fixes

  • Improve WordPress logo rendering for non-retina displays. 21217
  • Fix inserter popover direction. 21556
  • Fix Snackbar notice bottom margin. 18858
  • Fix YouTube Embed block from flickering and crashing on Safari. 21225
  • Fix sibling inserter being unclickable. 21232
  • Fix block duplication using keyboard shortcut 21317
  • Avoid creating an empty paragraph when selecting the parent’s group block 21318
  • Fix the Buttons block margins. 21376
  • Prevent typing on a Popover from closing the block toolbar 21421
  • Prevent copy/paste on number inputs from copying the post content. 21457
  • Prevent scroll jumps when focusing long blocks. 21460
  • Fix Separator block RTL styles. 21525
  • Make dateI18n returns be affected by gmt parameter. 18982
  • Fixes the read more link added by themes in the Latest Posts block. 20541
  • Fix the Latest Posts block when imageDimensions is empty 21070
  • Fix transparent images used as Cover block backgrounds. 20904
  • IE11: fix focus on backspace. 21092
  • Fix IE11 breakage when hitting Enter. 21361 21366
  • Fix block movers on full-wide blocks. 21097
  • Fix Annotations classNames. 21184
  • RangeControl: Fix zero value handling with number input. 21187
  • Fix reusable block horizontal padding 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.. 21312
  • Fix fullwide margins regression. 21201
  • Prevent the Cover block from overriding the children blocks colors 21254
  • Fix overly verbose aria-label in Social Link block 21369
  • Fix container block appenders and sibling inserters. 21149 21142 21143

New APIs

  • wordpress/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.: Add create-i18n function. 21182
  • wordpress/interface:
    • Add screen sidebar extensibility APIs. 20698 21260
    • Prepare for npm release. 21417
    • Add Fullscreen mode component. 21334
    • Add InterfaceSkeleton component. 21335
  • wordpress/icons: Add new icons: tablet, mobile, desktop, font, share… 21261 21278
  • Support changing the Group block’s DOM element. 20218
  • Block 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.: Add new utility to register block types from metadata in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 20794
  • Add radio option to the ButtonGroup component. 20805

Experiments

  • Full site editing and Site Editor screen:
    • Use the default post comments template for the Post Comments block. 21012
    • Use slug as template part display label.21161
    • Remove duplicate queries fetching template parts 18878
    • Preload the edited template to avoid the white page effect. 21214
    • Move the menu item to the top level. 21273
    • Add block breadcrumb; 21274
    • Prevent template switcher jumpiness. 21280
    • Increase the viewport width used for template previews. 21287
    • Add top level inserter. 21328
    • Apply the editor styles. 20982
    • Update the multi-entity saving flow UI. 21159
    • Small updates to template selector. 21202
  • New navigation screen:
    • Bootstrap the screen. 21036
    • Implement the initial styling. 21314
    • Add save shortcut. 21342
    • Fix editor shortcuts. 21338
    • Basic responsive styles. 21414
  • Navigation block:
    • Make the submenus usable on mobile. 21471
    • Fix block for contributor users 18669
    • Fix submenus being overlapped by wrapping top-level nav links. 21140
    • Add vertical variation. 21296
    • Show color controls in toolbar only. 20884
    • Add capture toolbars prop to inner blocks. 21095
  • Block API Support flags:
    • Introduce a support key for support global style colors in blocks. 21021 21428
    • Add the possibility to support gradients using the experimental color support flag; 21481
    • Add a block support flag for font size. 21153
  • Remove experimentalUIParts API. 20979
  • Add experimental Text component. 21088

Documentation

  • Docs: Describe tools used in E2E testing. 21295
  • WP-env: Add reference to docker log command to show error logs in terminal. 21308
  • Docs: Add section in block RFC about register_block_type_from_metadata. 21501
  • Update serverSideRender docs to include how to use from the wp global. 18722
  • Prescribe latest NPM for development environment. 21017
  • Update Documentation on how to update post 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. values from a block. 21155
  • Document getAnchorRect prop for Popover component. 17709
  • Typos and tweaks: 21228, 21364, 21405, 20660, 21297.

Code Quality

  • Add types to WordPress packages:
    • wordpress/element 21248
    • wordpress/primitives 21482
    • wordpress/icons 21487
    • wordpress/autop, wordpress/escape-htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and wordpress/html-entities 20669
    • wordpress/i18n 21224
    • wordpress/prettier-config 21381 21053
    • wordpress/block-editor DOM utils. 21362
  • Update the Buttons block to use the new color support flag. 21266
  • Update the Paragraph block to use the colors support flag. 21037
  • Update the Columns block to use the colors support flag. 21038
  • Update the Heading block to use the colors support flag. 21039
  • Update the Media & Text block to use the colors support flag. 21169
  • Refactor env commands into separate files .21353
  • Remove the deprecated request dependency. 21398
  • Move default styles to editor normalisation stylesheet. 19837
  • Replace lodash.assign with vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. 21054
  • Remove the old block preview implementation. 21096
  • Make RichText window/document agnostic. 21105
  • Polish 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) package. 21148
  • Fix two typos in lib rest menu controller. 21418
  • Global tips: Add period at the end of sentence. 20601
  • Lighter block DOM:
  • Update the padding values on the Card component to align with proposed spacing system. 21111
  • Disable scroll in PlainText component. 21115
  • Simplify inserter hasItems check. 21138
  • Avoid string concatenation for the Latest Post block read more link. 21170

Various

  • 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: Bump tested up to info to WP 5.4 21400
  • Output package type declarations. 18942
  • Exclude native files from type checking. 21491
  • docgen: Optimize README update script. 18840
  • Check Latest NPM on npm install. 21521
  • E2E Tests:
    • Improve stability of image block test 21174
    • Improve Allowed Inner Blocks test stability 21175
    • Use waitForSelector to wait for sidebar presence 21180
  • Unit Tests:
    • Fix wordpress/env testPortNumberValidation unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. 21394
    • Introduce reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-testing-library to some existing unit tests. 20428
    • Components: Add SlotFill test. 21226
    • Fail E2E when page displays warning notices 13452
  • Project Management: Prompt user to link GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ account to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile 21221 21384
  • wordpress/env: Bind "coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress." files to tests environment 21195
  • ESLint Plugin: Continue considering unused variables after encountering exception 21354
  • Enable prettier for JSX files 21151
  • Increase severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of JSDoc linting to error. 20427
  • Add I18N specific ESLint rules. 20555 20574
  • Update uuid to v7.0.2. 21258
  • Upgrade Reakit to version 1.0.0-rc.0; 21300
  • Framework: Add package-lock precommit check for latest NPM. 21306
  • Babel Preset: Update Babel version to 7.9.x. 21419
  • ESLint Plugin: Update ESLint and related dependencies to 6.8.x. 21424
  • Framework: Configure ESLint JSDoc plugin to target TypeScript mode. 18998
  • Major version upgrade for Jest in all packages. 20766
  • Storybook:
    • Add TreeSelect component. 20496
    • Update AnglePickerControl title. 21089
  • Automated Testing: composer non-interactive flag for Travis. 21118
  • 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/. error message: Remove unnecessary space. 21178
  • SlotFill: Guard property access to possibly-undefined slot. 21205
  • Build: Add TypeScript version validation 21208

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)
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/ 7.9 16.8s 49.87ms
Gutenberg 7.8 16.9s 46.75ms
WordPress 5.4 13.8s 42.31ms

#core-editor #editor #gutenberg

#gutenberg-new