What’s new in Gutenberg 19.0? (14 August)

“What’s new in 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/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.

In the Gutenberg 19.0 release, two important features have been added under experimental flags to allow folks to opt in to test and give feedback as they want. These features can be enabled by going to Gutenberg > Experiments. The first feature lets you connect blocks to custom fields, which many have been eager to see. The second feature lets you quick edit within the new Site Editor > Page’s interface, built using Data Views. Feedback is welcome and needed for both.

Outside of these experimental features, this release also includes severable notable enhancements, including a more intuitive user interface to configure views (pages, templates, patterns, etc) and the option to choose whether filters are shown or hidden within them. Finally, the option to manually enter a zoomed out view was added alongside the device preview options and multiple writing flow enhancements were completed.

  1. UI to connect blocks and custom fields
  2. Quick edit is now available on the new Pages list
  3. Show or hide filters in Data Views
  4. Changelog
    1. First-time contributors
    2. Contributors

    UIUI User interface to connect blocks and custom fields

    Gutenberg 19.0 comes with the first UI prototype to connect blocks and custom fields. It has been merged under an experimental flag in the Gutenberg 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 check it out enable the “UI to create 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. bindings” experiment under “Gutenberg -> Experiments”.

    Quick edit is now available on the new Pages list

    The first version of Quick Edit for Data Views has landed in Gutenberg 19.0 as an experiment. It allows users to edit some fields without leaving the overall Pages interface — it supports bulk editing as well.

    Show or hide filters in Data Views

    Gutenberg 19.0 includes functionality to hide/show the filters in the user interface. This simplifies the Data Views UI, as complex filters (including default ones for some views) will no longer occupy UI space. At the same time, feature parity and ease of use are maintained, as filters can still be added by clicking the filtering button when needed.

    Changelog

    Enhancements

    • Add alt edit field to the inline image in the format library (64124)
    • Update copy from “No Title” to “No title” across multiple places on the editor. (64184)
    • Update column input to be 40px by default. (64190)

    Block Library

    • Add anchor block support to List Items. (48758)
    • Unset the rowStart and columnStart attributes when a block inside the Grid is removed from a manual layout. (64186)
    • Update Group block example. (63114)
    • Make SiteLogoReplaceFlow always available in the Site Logo block toolbar. (63499)
    • Make 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. settings more intuitive with a ToggleGroup and simplified help text. (63739)
    • Move gallery link controls to the block toolbar. (62762)
    • Hide loading when the overlay menu is selected. (64262)
    • Move the Site Logo tooltip to the middle right. (64296)
    • Prevent duplicate spacing on Tag Cloud block. (63832)
    • Fix ‘can user edit’ Template Part check. (64137)
    • Add clearfix in Post content. (63690)
    • Tweak Tag Cloud controls and description. (64151)
    • Tweak list block. (64025)
    • Update MediaUpload button for the site logo from “Add media” to “Choose logo”. (63498)
    • Update help text for sticky control in Query loop. (63999)
    • Add border support to the following blocks:

    Extensibility

    Data Views

    • Be more clear with the copy of the “hide” action. (63047)
    • Graduate data view options out of a menu to allow more design expression. (64175)
    • Move 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. UI into a toggle-able panel to improve experience on narrow viewports/containers. (63203)
    • Update field line-height across grid/list layouts. (63945)
    • Update template description in table layout. (63942)
    • De-emphasise bulk actions on Grid layout. (64209)
    • Update the copy of some of the strings on dataviews actions. (64099)
    Dataviews Extensibility

    Dataform

    • Add author to quick edit page/post list. (63983)
    • If a field of type text declare elements, render it as a SelectControl in edit. (64251)
    • Migrate order action modal and introduce form validation. (63895)

    Components

    • Add radius scale. (64007)
    • Support generic props type on CustomSelectControl. (63985)
    • Guide: Add __next40pxDefaultSize to buttons. (64181)
    • Image: Make Placeholder white when there is a on top. (63885)
    • SelectControl: Infer value type from options. (64069)
    • SelectControl: Pass through options props. (64211)
    • TimeInput: Expose as subcomponent of TimePicker. (63145)
    • Update radius variables in components configuration. (64133)
    • RadioControl: Add support for option help text. (63751)

    Block Editor

    • Block Autocompleter: Force icon color to text color when item is selected. (61376)
    • Don’t overlap canvas with inserter panel at large screens. (64110)
    • Format Library: Polish inline image format popover. (64016)
    • LineHeightControl: Hard deprecate bottom margin. (64281)
    • New useBlockElementRef hook for storing block element into a ref. (63799)
    • Improved 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. styles. (61974)
    • URLInput: Hard deprecate bottom margin. (64282)

    Global Styles

    • Add a typesets section to Typography. (62539)
    • Add tooltips to the heading level selectors. (64039)
    • Background images: Ensure appropriate default values. (64192)
    • Create new public function to make it easier to expose style variations from other themes. (63318)
    • Style Book: Clearly denote heading levels. (64038)

    Design Tools

    • Column: Enable border-radius support. (63924)
    • Comment Template: Add Border Block Support. (64238)
    • Post Comments Form: Add Border Block Support. (64233)

    Zoom Out

    • Add a control to enter and leave zoom-out mode. (63870)
    • Improve zoom transition. (64179)

    Site Editor

    • Clarify that the site icon is a back button using an animation. (63986)
    • Site Icon: Add back filter effect to make it work for all kind of site icons. (64172)

    Post Editor

    • Tweak Create custom template modal. (64255)

    Icons

    • Add new “send” icon. (64130)

    Plugin

    • Bump minimum required WordPress version to 6.5. (64126)

    Font Library

    • Include a “Select All” options for google fonts. (63893)

    Block bindings

    • Allow bindings bootstrap after registration. (63797)

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

    • Refactor internal proxy and signals system. (62734)

    New APIs

    • Make useStyleOverride public. (63656)

    Bug Fixes

    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Fix ‘getEntityRecordPermissions’ memoization. (64091)
    • Document bar: Fix long title with no spaces causing layout issue. (64092)
    • Fix density slider minus to be correct. (64185)
    • Fix: Deleting a pattern throws a notice saying undefined deleted. (64301)
    • Primitives: Add missing peer dependency. (64218)
    • Site Icon: Fix position in distraction free mode. (64261)

    Data Views

    • Add context 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. string. (64249)
    • Conditionally shows the description field in Template Grid layout. (64043)
    • Consider layout URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org parameter when loading a default/custom view. (64306)
    • Display published date for pages/posts with published status. (64049)
    • Sort author by name + allow custom sort function. (64064)
    • Don’t render action modal when there are no eligible items. (64250)
    • Pages: Update useView logic. (63889)
    • Update template preview dimensions in table layout. (63938)
    • Update template preview dimensions in table layout. (63938)

    Dataform

    • Fix SelectControl size and spacing. (64324)
    • Provide a better default for render when field has elements. (64338)

    Components

    • Autocompleter UI: Fix text color when hovering selected item. (64294)
    • BaseControl: change label’s display: Block. (63911)
    • Button: Fix tertiary destructive hover style. (64152)
    • ColorPalette: Remove extra bottom margin when CircularOptionPicker is unneeded. (63961)
    • DropdownMenuV2: Break menu item help text on multiple lines for better truncation. (63916)
    • Fix modal dismissers in development mode. (64132)
    • Fix toggle help indentation. (63903)
    • Update the TextControl padding to match the rest of the controls. (64326)

    Global Styles

    • Fix block custom CSSCSS Cascading Style Sheets. pseudo element selectors. (63980)
    • Fix block library and global styles stylesheet ordering when a block style variation is active. (63918)
    • Style Book: Fix critical error when heading block is not registered. (64047)
    • TypesetButton: Check if variations exist before running logic. (64139)

    Site Editor

    • Centrally align entity in focused edit mode. (64143)
    • Don’t trigger template ID resolution for multi-selected posts. (64254)
    • Long slugs breaking summary panel UI. (64053)

    Zoom Out

    • Keep top-level block selection if entering zoom out mode. (64178)
    • Use the block editor for insertion point data. (63934)

    Block Library

    • Fix a typo in use-image-sizes.js. (64100)
    • Template Part: Fix capability checks for inner blocks. (64159)
    • Update useTaxonomies hook to check for taxonomies for passed post type. (64145)

    Design Tools

    • Quote: Prevent block theme styles overriding global border and padding. (64045)
    • Spacing controls: Using CustomSelectControlV2 for >= 8 spacing sizes. (64284)

    Post Editor

    • Avoid errors for post types without a ‘menu_icon’. (64015)
    • Post: Add a max length to the post password protected field. (64156)

    Grid layout

    • Fix grid resizer drag over embed. (64098)
    • Move resizer popover slot to fix display on mobile. (63920)

    Block Editor

    • Fix unexpected drag & rrop row/gallery creation logic. (64241)

    Icons

    • Remove hardcoded color from sidesAxial and sidesBottom icons. (64174)

    Document Settings

    • Display empty option when post author is missing. (64165)

    Patterns

    • Enable cross-browser support for pattern uploading. (64123)

    Commands

    • Fix ‘Preferences’ and ‘Shortcuts’ commands in StrictMode. (64019)

    MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Boxes

    • Prevent popover from being hidden by metaboxes. (63939)

    Page Content Focus

    • TemplateContentPanel: Don’t show content blocks that are in a Query Loop. (63732)

    Font Library

    • Fix item font family item height in the sidebar. (63125)

    Block API

    • Block categories – ensure that categories are unique by slug. (62954)

    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)

    • Restore focus style in dataviews grid view. (64298)
    • 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) text for site editor. (62648)
    • Accessibility issue of device preview options. (63958)

    Components

    • Improve the aria-disabled focus style of the Button. (62480)
    • Restore describedBy functionality on CustomSelectControl. (63957)

    Block Library

    • Fix unlabeled Spacer block controls. (63806)
    • Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls. (58207)

    Font Library

    • Remove notice context and add message when fonts are updated. (64030)

    Performance

    • Add User Timings for the Interactivity API. (60522)

    Data Views

    • Optimize the patterns dataviews by extracting the fields definition. (63927)

    Layout

    • Avoid iterating auto grid inner blocks unless mode specifically changed. (64194)

    Block bindings

    • Move logic to merge usesContext outside the reducer. (63941)

    Experiments

    • Adds experimental blocks flag. (64121)

    DataForm

    • Support multiple layouts and introduce the panel layout. (64299)

    DataViews Extensibility

    • Add a hook to allow third-party scripts to register/unregister post type actions. (64138)

    Grid Interactivity

    • Fix block mover layout and styles. (64021)

    Block bindings

    • UI for connecting bindings. (62880)

    Documentation

    • .wp-env.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. schema: Fix schema and add unit tests. (63281)
    • Add WP Studio to list of tools in documentation. (64327)
    • Add documentation for some dynamically generated selectors in the core-data store. (64269)
    • Block Editor: Update ‘getBlocksByName’ JSDoc. (63919)
    • Components: Add missing __nextHasNoMarginBottom documentation. (64313)
    • Corrected @deprecated doc Order in Inline Documentation. (64013)
    • Add documentation for render_block and register_block_type_args to Block Filters. (64118)
    • Fix interactivity API documentation link. (64060)
    • Fix non working link to an interactivity API example block. (64061)
    • Fix WampServer links. (64062)
    • FormToggle, ToggleControl: Fix docgen in Storybook. (64065)
    • Provide a better example for the PluginSidebar slotfill. (64206)
    • Update data-core.md to use correct headings. (64309)

    Code Quality

    • Add margin-bottom lint rules (64212),(64213) and (63960)
    • Add new useEntityRecordsWithPermissions hook. (63857)
    • Fix deprecated sass usage. (63990)
    • Remove an unnecessary wrapper component. (63989)
    • Theme JSON: Update core theme json resolver class use to Gutenberg version. (63981)
    • Zoom out: Get store action outside the loop. (63936)
    • Remove Speak from device menu selection. (64115)

    Block Editor

    • BlockDraggable: Remove 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. aria-hidden attribute from button. (64228)
    • FontFamilyControl: Deprecate bottom margin. (64280)
    • Remove unnecessary/incorrect unlock call in setEditorMode action. (64073)

    Data Views

    • Formalize text field type definition. (64168)
    • Use items with permissions and avoid 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. to register actions. (63923)

    DataForm

    • Centralize edit logic in field type definitions. (64171)
    • Move validation logic to the field type definition. (64164)

    Global Styles

    • Background image: Remove toolspanel placeholder component. (64242)
    • Consolidate theme.json ref and URI resolution. (64182)

    Plugin

    • Remove compat layers for WP 6.4 and 6.5. (64096)
    • Remove leftover ‘WP_Rest_Customizer_Nonces’ controller. (64221)

    Site Editor

    • Use structuredClone for deep cloning. (64203)

    Block Library

    • Add stylelint rule to prevent usage of flex-direction reverse values. (63081)
    • Image Block Lightbox: Fix warning error when resizing. (63995)

    Icons

    • Fix invalid prop for homeButton icon. (64191)

    Post Editor

    • Remove resolvers hack for post actions. (64094)

    Components

    • Upgrade Ariakit. (64066)

    Page Content Focus

    • Fix the ‘getBlocksByName’ selector call. (63922)

    Tools

    Testing

    • Components: Cleanup flaky 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. sleep() hacks. (64205)
    • Fix flaky DataViews list layout end-to-end tests. (64244)
    • Fix typo in ‘Verify Core Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. Changelog’ job title. (64058)
    • Improve Button matrix in visual 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. test. (64120)
    • Improve theme.json test failure messages by pretty printing css for a more accurate diff. (64077)

    First-time contributors

    The following PRs were merged by first-time contributors:

    Contributors

    The following contributors merged PRs in this release:

    @aaronrobertshaw @adamsilverstein @afercia @akasunil @Aljullu @amitraj2203 @andrewserong @carolinan @cbravobernal @Chrico @ciampo @creativecoder @DaniGuardiola @DAreRodz @djcowan @ellatrix @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kebbet @kmanijak @Mamaduka @matiasbenedetto @meteorlxy @mikachan @mirka @mtias @ndiego @noisysocks @oandregal @ramonjd @richtabor @Rishit30G @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @simison @stokesman @t-hamano @talldan @tomdevisser @tomjn @tyxla @up1512001 @wzieba @youknowriad


    Props to @joen for the visual assets and @annezazu, and @ramonopoly for the peer review of this post!

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