What’s new in Gutenberg 19.1? (28 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.


Gutenberg 19.1 has been released and is available for download!

This release includes a long-awaited 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 template registration 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. and changes to image caption styles.

Other notable updates include adding border support to many coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, better defaults for the zoom out view, data view extensibility improvements, and the publication of core concept guides for the Interactivity API.

  1. Plugin Template Registration API
  2. Image Caption Styles
  3. Changelog
  4. First-time contributors
  5. Contributors

Plugin Template Registration API

Gutenberg 19.1 includes a new API so plugins can easily register templates. Stay tuned for an upcoming tutorial on the Developer Blog.

Image Caption Styles

The release also includes improvements to the image caption styles, toning down the intensity of the caption background.

Changelog

Enhancements

Components

  • Allow style prop on Popover. (64489)
  • Add elevation scale. (64108)
  • Apply elevation scale to: Modal, Popover, and Snackbar components. (64655)
  • Ariakit: Update to v0.4.10. (64637)
  • DimensionControl: Add flag to remove bottom margin. (64346)
  • DropdownMenu V2: Use themed color variables. (64647)
  • Placeholders: Update radius temporarily. (64672)
  • Reduce gap between steps in SpacingSizesControl, add animation, remove first/last marks. (63803)
  • Textarea Control: Update styles. (64586)
  • Tools Panel: Sets column-gap to 16px for grid. (64497)
  • Update DropdownMenuV2 elevation, remove unused configuration value. (64432)
  • Update components radius. (64368)
  • Use useStoreState() instead of store.useState(). (64648)
  • Composite: Use internal context to consume composite store. (64493)
  • Default to new 40px size in the following:
    • FocalPointPicker: (64456)
    • QueryControls: (64457)

Data Views

  • Do not display element descriptions in filters. (64674)
  • Apply minimal variant to pagination dropdown. (63815)
  • Update the style of the datetime fields to match the other types. (64438)
  • Use the fields array to define the order of the fields. (64335)
  • Make the move left/right controls in table 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. always available. (64646)
  • Support defining field headers/names as ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. elements. (64642)
  • Add marks to preview size control. (64546)
  • Move item size control to the new view configuration UIUI User interface. (64380)
  • Update search appearance in narrow containers. (64681)
  • Quick edit additions:
    • comment_status field. (64370)
    • status field. (64398)
    • ‘Date’ as field and datetime as field type. (64267)
  • Extensibility – allow unregistering of the following:
    • Duplicate post action (64441)
    • Duplicate pattern action (64373)
    • Duplicate template part action (64388)
    • Rename post action (64366)
    • Reorder-page action (64199)
    • View post action (64467)
    • View post revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. action (64464)

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

  • Embed Block: Replace native input element with InputControl component. (64668)
  • Grid: Prevent highlight of cells when dragging a block if block type can’t be dropped into grid. (64290)
  • Image block: Add reset button. (64669)
  • Overlay caption w. text-shadow. (63471)

Design Tools

  • Background image: Add uploading state and restrict drag to one image. (64565)
  • Quote Block: Add align support. (64188)
  • Add border support to the following:

Zoom Out

  • Add private isZoomOutMode selector. (64503)
  • Block Insertion: Clear the insertion point when selecting a different block or clearing block selection. (64048)
  • Default the inserter to the patterns tab when in zoom out. (64193)
  • Focus pattern inserter search when activating zoom out inserter. (64396)
  • Stop unwanted drag and drop operations within section Patterns in Zoom Out mode. (64331)

Block Editor

  • Button groups in Typography tools should use ToggleGroupControl. (64529)
  • Hyphenate long block names in the inserter. (64667)

Global Styles

  • Additional CSSCSS Cascading Style Sheets.: Localize the link if it exists. (64603)
  • Background images: Add support for 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. ref value resolution. (64128)

New APIs

Components

  • Composite
    • Add Hover and Typeahead subcomponents. (64399)
    • Stabilize new ariakit implementation. (63564)
    • Export useCompositeStore, add more focus-related props. (64450)

Synced Patterns

  • Block Bindings: Create utils to update or remove bindings. (64102)

Extensibility

  • Add plugin template registration API. (61577)

Bug Fixes

Components

  • CustomSelectControl: Improve props type inferring. (64412)
  • ColorPalette: Partial support of color-mix() CSS colors. (64224)
  • RangeControl: Disable reset button consistently. (64579)
  • RangeControl: Tweak mark and label absolute positioning. (64487)

Data Views

  • Load the 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. toggle as open if there are primary filters. (64651)
  • Sort descending button may be wrongly pressed. (64547)
  • Filter icon is displayed even when no filter capabilities are given to any field. (64640)

Zoom Out

  • Disallow dropping outside section root in Zoom Out mode. (64500)
  • Don’t hide the insertion point when hovering patterns. (64392)
  • Use previous device width for scale calculations. (64478)

Block Library

  • Embed blocks: Adding captions via toolbar – #64385. (64394)
  • Paste: Fix blob uploading. (64479)
  • Table Block: Hide caption toolbar button on multiple selection. (64462)

Post Editor

  • Fix user pattern preloading filter. (64477)
  • Fix preloaded 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/. paths. (64459)
  • Force 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. editor when zoom-out mode. (64316)

Block Editor

  • Don’t hide the toolbar for an empty default block in HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. mode. (64374)
  • In-between Inserter: Show inserter when it doesn’t conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with block toolbar. (64229)
  • Slash Inserter: Restrict block list to allowed blocks only. (64413)

Site Editor

  • Don’t allow duplicating template parts in non-block-based themes. (64379)
  • Fix Template Parts post type preload path. (64401)
  • Cancel button in duplicate template part modal doesn’t work. (64377)
  • Fix empty content 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. panel. (64569)

Block bindings

  • Fix long keys overflow in bindings panel. (64465)
  • Hide keys starting with underscore. (64618)

CSS & Styling

  • Remove inconsistent dark theme focus style on block selection. (64549)
  • Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :Where selectors. (64458)

Interactivity API

  • Fix context inheritance from namespaces different than the current one. (64677)

Document Settings

  • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Disable the media modal while uploading an image. (64566)

Patterns

  • Changing sorting direction on patterns does nothing. (64508)

Design Tools

  • Background image: Ensure consistency with defaults and fix reset/remove functionality. (64328)

Global Styles

  • Fix bumped specificity for layout styles in non-iframed editor. (64076)

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)

  • Site Editor: Always use auto-cursor style for editable text. (64627)
  • Post Editor: Update textControl to searchControl in taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. search. (64605)
  • RadioControl: Label radio group using fieldset and legend. (64582)
  • Fix labeling in Typography font size presets panel. (64428)
  • Latests Posts: Used ToggleGroupControl instead for Image alignment. (64352)

Performance

  • Fetch permissions for visible patterns only. (64606)
  • Background Image: Remove unnecessary ‘block-editor’ store subscription. (64568)
  • Edit Post: Avoid unnecessary post-template ID lookup. (64431)
  • GridVisualizer: Avoid over-selecting by using a new getBlockStyles private selector. (64386)

Experiments

Data Views

  • DataViews Quick Edit
    • Add Post Card to the quick edit panel. (64365)
    • Add the PostActions dropdown menu. (64393)
    • Rely on the global save flow instead of a custom save button. (64389)
  • Update the copy of quick edit tooltip. (64475)

Components

  • Composite v2: Undo stabilizing new version. (64510)

Documentation

  • Add clarification about importing css/scss files. (61252)
  • Components
    • Add “Naming conventions” section. (63714)
    • Add 40px size prop to readmes. (64592)
  • Composite: Improve Storybook examples and clean up prop documentation. (64397)
  • Dataviews
    • Added missing properties for actions object and link to storybook example. (64442)
    • Fixed tip link for block editor view. (64469)
    • Update README with missing properties and recent changes. (64435)
    • Better explanation of the “elements” property and its connection to the “filterBy” property. (64633)
  • Interactivity API
    • The first three Core Concepts guides. (63759)
    • Fix internal links core-concepts. (64609)
    • Remove typed function from API reference. (64429)
    • Add code concepts to Navigating the Interactivity API documentation. (64608)
    • Interactivity API: Add wp_interactivity_state() clarification. (64356)
  • Fix typos in the Block Filters documentation.. (64426)
  • Fix example of useBlockProps hook. (64363)
  • Fix typo and link in static-dynamic-rendering.md. (64449)
  • Fix typo in block-filters.md. (64452)
  • Fix typo in block-wrapper.md. (64447)
  • Note about image sizes in MediaUpload::OnSelect. (64616)
  • Small typo correction in doc file. (64596)
  • TextDecorationControl, TextTransformControl: Remove size prop in Storybook. (64583)
  • Updated @since order in Inline document in client-assets.php file. (64653)
  • Updated small typo in compat.php file. (64535)
  • Updated small typo in modularity.md. (64518)

Code Quality

  • Add lint rule for 40px size prop usage in the following:
    • BorderBoxControl, BorderControl, DimensionControl, FontSizePicker: (64410)
    • Block Editor typography components (64591)
    • FormFileUpload: (64585)
    • FormTokenField: (64590)
    • InputControl: (64589)
    • NumberControl: (64561)
    • RangeControl: (64558)
    • SelectControl: (64486)
    • TextControl: (64455)
    • ToggleGroupControl: (64524)
    • ComboboxControl: (64560)
    • CustomSelectControl: (64559)
  • Add margin-bottom lint rules for BaseControl. (64355)
  • Add missing changes to the changelog for the PR #62734. (64507)
  • Base Styles: Restore deprecated $dark-theme-focus variable. (64563)
  • ESLint: Enable and enforce remaining 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. rules for the plugin (e.g. no trailing spaces). (60196)
  • Remove unnecessary className. (64403)
  • Replace instances of deprecated elevation variables. (64656)
  • Style engine: Export util to compile CSS custom var from preset string. (64490)
  • Style engine: Update type for getCSSValueFromRawStyle. (64528)
  • TextControl: Fix remaining 40px size violations. (64594)
  • Border: 1px → $border-width. (64680)

Block Library

  • Gallery: Remove ‘withNotices’ HoC. (64384)
  • Missing Block: 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. instead of HoC. (64657)

Block Editor

  • Use hooks instead of HoC in:
    • ‘BlockModeToggle’. (64460)
    • ‘MultiSelectionInspector’. (64634)

Components

  • Deprecate bottom margin on BaseControl-based components. (64408)
  • Navigator: Simplify backwards navigation APIs. (63317)

Data Views

  • Refactor the edit function to be based on discrete controls. (64404)
  • Update renderFormElements to make sure the value respects the type. (64391)
  • Abandon the ItemRecord type. (64367)

Block hooks

  • Navigation Block: Remove now-obsolete function_exists guards. (64673)

Nested / Inner Blocks

  • Block Editor: Refactor inner blocks appender components. (64470)

Plugin

  • Script Modules: Move data passing to 6.7 compat file. (64006)

Tools

  • Make wp-env compatible with WordPress versions older than 5.4 by fixing wp-config anchors. (55864)

Testing

  • Background block supports: Remove unused properties in unit tests. (64564)
  • Fix flaky block template registration end-to-end test. (64541)
  • Improve Image block end-to-end tests. (64537)
  • Upgrade Playwright to v1.46. (64372)

Build Tooling

Props Bot: Update to correct event type. (64557)

Fix gutenberg/gutenberg-coding-standards licensing issues. (61913)

First-time contributors

The following PRs were merged by first-time contributors:

  • @cweiske: Note about image sizes in MediaUpload::OnSelect. (64616)
  • @imrraaj: Dataviews: Filter icon is displayed even when no filter capabilities are given to any field. (64640)
  • @janpfeil: Fix typo in block-filters.md. (64452)
  • @Rishit30G: ColorPalette: Partial support of color-mix() CSS colors. (64224)
  • @ssang: Slash Inserter: Restrict block list to allowed blocks only. (64413)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @akasunil @Aljullu @amitraj2203 @anton-vlasenko @arthur791004 @cbravobernal @ciampo @colorful-tones @cweiske @DAreRodz @ellatrix @felixarntz @getdave @hbhalodia @imrraaj @jameskoster @janpfeil @jasmussen @jeherve @jorgefilipecosta @jsnajdr @juanmaguitar @luisherranz @Mamaduka @meteorlxy @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @ramonjd @richtabor @Rishit30G @SantosGuillamot @scruffian @shail-mehta @shreya0204 @sirreal @ssang @swissspidy @t-hamano @talldan @tyxla @vipul0425 @youknowriad

#gutenberg-new