What’s new in Gutenberg? (23 December)

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/ 9.6 has been released. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Dragging blocks from the inserter

From this release, blocks can be directly dragged from the inserter to the post canvas ― dragging patterns is not yet supported.

Vertical layout for buttons

The buttons 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. gained the ability to use a vertical layout in addition to the default horizontal.

9.6.0 🇨🇱

Features

  • Allow dragging blocks from the inserter into the canvas. (27669)
  • Buttons: Add variations for vertical layout. (27297)

Enhancements

  • Buttons block: Change position of the link popover. (27408)

New APIs

  • Add a useFocusOnMount hook to the wordpress/compose package. (27574)
  • Add a useFocusReturn hook. (27572)
  • Add a useConstrainedTabbing hook. (27544)
  • Components: Introduce a isDisabled prop to the Disabled component. (26730)
  • Create block:
  • Use 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. version 2. (26098)
  • Fix for supporting external templates. (27784) (27776)

Bug Fixes

  • 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. screen: Fix block select on focus. (27755)
  • Embed block: Add htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and reusable support back. (27733)
  • Add useCallbackRef to avoid calling the ref multiple times with the same node. (27710)
  • Correct getRedistributedColumnWidths and related tests. (27681)
  • Remove CSSCSS Cascading Style Sheets. Custom Property in code block. (27672)
  • Fix 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. on code block for font-size property (27862)
  • Block crashes if font family is not found. (27654)
  • popover flickering on small screens. (27648)
  • Adding single use block from main inserter causes focus loss and menu to be stuck open. (27641)
  • Changelog for 9.5.2. (27638)
  • Uncaught error with a custom generic store without a unsubscribe function in useSelect. (27634)
  • Revert date changes from 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". ‘replace-moment’. (27550)
  • useMediaQuery: Make it safe for SSR environments without window. (27542)
  • Fixes the width on the circle color picker popover. (27523)
  • ComboboxControl/FormTokenField: Fix iOSiOS The operating system used on iPhones and iPads. zooming for input. (27471)
  • Fallback to regular subscribe if the store doesn’t exist in useSelect. (27466)
  • Global Styles getPresetVariable uses a wrong variable; Remove GLOBAL_CONTEXT. (27450)
  • Popover: Fix issue with undefined getBoundingClientRect. (27445)
  • Try fixing combobox 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) issues. (27431)
  • Support gradients with omitted stop positions in CustomGradientPicker. (27413)
  • Fix combobox suggestion list closure when clicking scrollbar. (27367)
  • Video Block: Let the video fill the container. (27328)
  • Media & Text “crop image to fill” to work with linked media. (27211)
  • Give editable fields in blocks better aria-labels. (26582)
  • Replace function should handle empty string callback return in the 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. parser. (16358)

Performance

  • Split coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks assets loading. (25220)

Experiments

  • Add a useDialog hook and replace the duplicated PopoverWrapper. (27643)
  • Refactor withFocusOutside to hook. (27369)
  • FSE: Block Navigation: update Navigation block placeholder. (27018)
  • FSE: Block Query
    • Add new post link to Query. (27732)
    • Allow Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. only inside Query block. (27637)
    • Adjust mobile margins for the Query block’s grid view. (27619)
    • Query block: Allow inheriting the global query arguments. (27128)
  • FSE: Blocks
    • Add comment-form block styles. (27673)
    • Tag Cloud block: Adjust styles for the different block alignments. (27342)
  • Site Logo:
    • Remove line height. (27623)
    • Add a rounded block style. (27621)
  • FSE: Infrastructure
    • Apply hover class in outline mode. (27714)
    • Update documentation to show how a theme can have FSE automatically enabled. (27680)
    • Make the inserter in the site editor behave as a popover. (27502)
    • Add an outline mode and use it both Site Editor and Template mode. (27499)
    • Load the block patterns in the site editor. (27497)
    • Move the templates prePersist logic to core-data. (27464)
    • Expand the multi-entity saving panel by default. (27437)
    • Reveal block boundaries on hover in the Site Editor. (27271)
    • Site Editor – add query args for current context. (27124)
    • Full Site Editing: Introduce a template editing mode inside the post editor. (26355)
    • Remove optimistic updates to solve the template revert issue (27797)
  • FSE: Style System
    • Fix: Font Weight and Style don’t work independently on global styles. (27659)
    • Add custom units in BoxControl. (27626)
    • Remove Font style, weight, decoration, and transform presets. (27555)
    • Make client preset metadata match server. (27453)
    • Do not pass selectors and supports information to the client. (27449)
    • Add border radius support. (25791)
    • Update font-weight names. (27718)
    • Update performance of global styles code (27779)

Documentation

  • Add missing dependency to code example. (27742)
  • Precise that element ref returned by the 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. that return a ref can change between function or object. (27610)
  • Add escaping functions to code examples. (27603)
  • Add missing wordpress/components/CHANGELOG.md entry. (27576)
  • Minor changes to release documentation for clarity. (27571)
  • Capitalize 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/. in accordance with the word mark. (27539)
  • Fix typo in attributes.md. (27440)
  • Try: Update readme screenshot. (27223)
  • Document the useBlockWrapper hook in the block registration documentation. (26592)
  • Add a document explaining the different block API versions. (26277)
  • Update the registration examples to use apiVersion 2. (26100)

Code Quality

  • Remove: Missed unused weights and style translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. code. (27739)
  • useDialog: Remove mousedown propagation stopping. (27725)
  • Try: Simplify focus return. (27705)
  • Popover/Modal: Remove and deprecate IsolatedEventContainer. (27703)
  • Popover: Use focus outside hook. (27700)
  • refactor: Tooltip component from classical to functional with hooks. (27682)
  • Template-part padding: Use variables. (27679)
  • Scope image block style variations to only the image block. (27649)
  • Refactor the EditorProvider component and extract hooks. (27605)
  • Use store definition instead of string for notices packages. (27548)
  • Merge RootContainer with BlockList. (27531)
  • Block wrapper: Isolate functionality into smaller hooks. (27503)
  • Writing flow: Consider events only from DOM descendents. (27489)
  • Writing flow: Isolate multi select focus element. (27482)
  • Multi selection: Move hook to WritingFlow with other multi selection logic. (27479)
  • Insertion indicator: Render after last block if none is specified. (27472)
  • Rewrite selection clearer in Block editor. (27468)
  • Move block focus listener to block props hook. (27463)
  • Block editor: Refactor effect.js to controls. (27298)
  • Animate: Type getAnimateClassName. (27123)
  • Refactor image block’s image editing tools into separate components. (27089)
  • Drop zone provider: Option to avoid wrapper element. (27079)
  • Audit variables stylesheet. (26827)
  • group block padding: Use variables. (27676)

Tools

  • Release script: Set draft status, and only remove after uploading asset. (27713)
  • CI: Run date test timezone and localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. variations using bash script. (27600)
  • Upgrade Babel packages to 7.12.x. (27553)
  • CI: Run package/date unit tests in different timezones. (27552)
  • Avoid cancelling other end-to-end test jobs when one fails. (27541)
  • Add webpack 5 support to 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. (27533)
  • Add GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ support document. (27524)
  • Stabilize adding blocks end to end test. (27493)
  • GitHub Actions: Use a build matrix for the end-to-end tests GH action. (27487)
  • Packages: Make it possible to select minimum version bump for publishing. (27459)
  • Upgrade wp-prettier to 2.2.1. (27441)
  • Testing: Make image size test more stable. (27439)
  • Packages: Improve the script that automates version bumps. (27436)
  • CI: Update bundle size workflow to use the latest version. (27435)
  • wp-env: Xdebug support. (27346)
  • Make zip-based URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org parsing more general. (27019)
  • Add inserter performance measures. (26634)

Various

  • Verse Block:
    • Add support for custom padding. (27341)
    • Add support for font family. (27332)
    • Add support for font size. (27735)
    • Update CSS for frontend and editor. (27734)
  • Popover: Use a11y hooks instead of HoCs. (27707)
  • Refactor focus on mount. (27699)
  • Search block: Use em values for padding. (27678)
  • Button: Is-busy state candybar animation fixed. (27592)
  • Preformatted block: Add support for font sizes. (27584)
  • Remove autoFocus prop from URLInput and from the inserter search form. (27578)
  • Package lock: Update ws. (27532)
  • Update block-patterns.md. (27520)
  • Update wp-env codeowners. (27491)
  • Update the backup icon to better align with WordPress icon package dna. (27465)
  • Update the rich text control titles to sentence case structure. (27447)
  • Search Block: Remove the button only option from the UIUI User interface. (27379)
  • Add icons for template parts. (27378)
  • Increase radio dimensions to match checkboxes. (27377)
  • Adjusts settings modal height to 90%. (27362)
  • Change the Labels of the Vertical Align options. (27356)
  • Add element selector to template-part block. (27101)
  • Add explicit dismiss button and on dismiss callback to snackbar. (26952)
  • Make social list block align right able on published page & preview. (26861)
  • Update media-text focalPoint conditional rendering. (25968)
  • Remove default icon from PluginBlockSettingsMenuItem. (21392)
  • Add example preview to video block. (20703)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.64.33s27.82ms
Gutenberg 9.54.21s23.04ms
WordPress 5.65.16s23.46ms

Kudos to all the contributors that helped with the release!

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

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