What’s new in Gutenberg 19.5? (23 October)

“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 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.)) 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.5 has been released and is available for download!

This release focuses on stabilizing existing features but also brings some improvements to the general UIUI User interface and the zooming editing experience, with 116 PRs from 47 contributors.

  1. Smoother Zoom in/out experience
  2. Other notable changes
  3. Changelog
  4. First-time contributors
  5. Contributors

Smoother Zoom in/out experience

Gutenberg 19.5 most notable enhancements circle around the zooming out -and in!- experience.

For instance, the Edit button from the zoom-out toolbar has been replaced to favor more friendly interactions and reduce visual overload. Apart from the top toolbar toggle for this mode and the ability to double-click to zoom back, which were introduced in recent releases, a new Enter keyboard interaction brings you back in as well.

With all these easy ways to exit the zoomed-out view, the editor will now zoom out when showing the pattern inserter, a use case where showing a general view of your page/site matters more than focusing on individual blocks.

Moreover, this release brings many 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 make this feature as stable and solid as possible for the upcoming WordPress 6.7. And the zooming transition is now smoother, too!

Other notable changes

  • The editor modes writing and editing, as introduced in Gutenberg 19.4, can now be set as a user preference so that the selected mode persists even after exiting the editor or reloading the page.
  • 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 can now be used on the widgets screen, too. Check out the original pull request to learn more, or keep tuned to the Developer Blogblog (versus network, site) for more comprehensive examples!
  • You might notice some icon polishing here and there, like the update to the hidden icon and the new upload and download cloud icons.
Read more: What’s new in Gutenberg 19.5? (23 October)

Changelog

Enhancements

General interface

  • Remove the verb Toggle from the Block Inserter button. (65983)
  • Write/Design tool: Persist as a user preference. (65945)
  • Update “hidden” icon to be clearer, and invert logic as used in Data Views. (65914)
  • Update cloud upload and add cloud download icon. (65906)

Zoom Out

  • Make zoom transition smoother. (66017)
  • Try zooming out when selecting the patterns tab in the inserter. (65785)
  • Update/replace edit button with enter on selection. (65760)

Global Styles

  • Improve navigation logic for 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. screen. (65946)

Block bindings

  • Register bindings sources in widgets screens. (65937)

Block Library

  • Cover Block: Refactor setting panel. (65432)

Component Storybook

  • Add type tokens to storybook. (65993)
  • Storybook: Add stub doc on existing colors. (65982)

Bug Fixes

Zoom Out

  • Exit zoom out when mode is changed. (65975)
  • Fix scaling issues. (65998)
  • Fix zoom reflow by replacing border with padding. (66012)
  • Focus first section root block if no selected block and tabbing to zoom out canvas. (65843)
  • Make zoom out vertical toolbar consistent. (65627)
  • Polish zoom out inserter. (66110)
  • Position scaled htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. within available container space. (66034)
  • Restores setting zoom out mode to useZoomOut hook. (65999)
  • Use consistent canvas frame spacing on device preview and zoom out. (66018)
  • Zoom layout shift: Second alternate fix. (66041)

Block Library

  • Code block: Set LTR direction for RTL languages. (65891)
  • Fix duotone on parallax/repeated 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. cover blocks. (65929)
  • Fix: Embed Block: Match HTML in the editor and frontend. (65478)
  • Hide grid visualizer when grid is template locked or block editing mode is not default. (66065)
  • Post Content Block: Fix 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. between clearFix and focus ring in the editor. (65364)
  • Post Content: Fix display of block support styles. (66003)
  • Post Terms: Fix fatal error when ‘get_the_term_list’ returns ‘WP_Error’. (65848)
  • 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.: Fix isControlAllowed and isTemplate combined logic. (65984)
  • Query Loop: Fix query type indicator. (65877)
  • Revert “Update z-index hierarchy”. (66074)

Block bindings

  • Accept client ID as parameter for useBlockBindingsUtils. (65818)
  • Allow label override when it is defined in client registration. (66160)
  • Bootstrap server sources earlier. (66058)
  • Fix: Don’t render image when src attribute is empty. (66004)
  • Allow the field types matching attribute types in bindings. (66174)

Global Styles

  • Always preview style variations using desktop device type. (66023)
  • Improve Navigator usage in typography panel. (65942)
  • Leave screen if current shadow entry gets deleted. (65935)
  • PaletteEdit: Dedupe palette element slugs. (65772)
  • List all active fonts in the typography section. (65806)

Block Editor

  • Fix DropZone class names on drop. (65798)
  • Fix padding appender hook. (66143)
  • Memoize pattern objects returned from getAllowedPatterns. (66159)
  • Fix rich text toolbar corners. (66163)
  • BlockCanvas: Fix the height prop and width of the block editor. (65977)

Components

  • Fix : Secondary Button Transition. (66045)
  • Global Styles: Fix overflow caused by RangeControl tooltip. (65875)
  • ToggleGroupControl: Don’t set value on focus after a reset. (66151)
  • Fix: Add missing post.slug dependency to useMemo. (66125)

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.

  • Allow “default” suffix values. (65815)
  • Correctly handle lazily added, deeply nested properties with deepMerge(). (65465)
  • Improvements to the experimental full-page navigation. (64067)

Site Editor

  • Fix site editor back button visual regressions. (66166)
  • Zoom Out: When double clicking a template while zoomed out , reset zoom level instead of showing dialog. (65963)

CSSCSS Cascading Style Sheets. & Styling

  • Editor: Prevent wrapping text when showing icon labels in 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.. (66038)
  • Update z-index hierarchy. (65626)

Data Views

  • Data Views list layout: Revise for improved text truncation. (65376)
  • Fix: Pattern rendering issue. (66022)

Extensibility

  • Rename wp_register_block_template() to register_block_template(). (65958)
  • Fix: Return result from wp_register_block_template function. (66102)

Post Editor

  • Fix “typewriter” spacing style application. (65885)
  • Add argument with post ID to the editor.savePost hook. (66165)

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)

Post Editor

  • Fix 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 accessibility. (65466)
  • Fix navigate regions shortcuts on the back button WP logo slot. (63611)
  • Improve PostURL terminology and accessibility. (63669)
  • Match visible label of search inputs with their actual label. (65458)

Components

  • Fixed : Modal dialog: Small improvement for elementShouldBeHidden. (65941)
  • ToggleGroupControl: Don’t autoselect option on first group focus. (65892)
  • Tooltip: Add aria-describedby to anchor only if not redundant. (65989)

Typography

  • Revert the “Manage fonts” button in Global Styles. (66107)

Performance

Interactivity API

  • Leverage scheduler.yield in splitTask when available. (66001)

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.

  • 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. from WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.: improve performance of WP_Theme_JSON::Merge when merging background styles. (66002)

Documentation

  • Add heading level curation documentation. (66076)
  • Components: Set up README auto-generator. (66035)
  • Contrast notes: Update 4.6:1 note with further context. (66168)
  • Data-basics/4-building-a-create-page-form is ready now. (66100)
  • Docs: env: Expand examples of path syntax. (65972)
  • Updated several typos in client-assets.php file. (66084)
  • Use correct label in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher Backport documentation. (65908)
  • add: Usage examples in core editor documentation. (63768)
  • Consistent with block-development-examples data-basics-59c8f8. (65995)

Code Quality

  • .screen-reader-text CSS update for responsive-block-control style.scss. (66145)
  • Add missing CHANGELOG entries for #64067. (66120)
  • Button: Move to stricter lint rule for 40px size adherence. (65840)
  • Private APIs: Remove obsolete try/catch block. (65898)
  • Remove clip and -webkit-clip for block-library common.scss. (66144)
  • Remove unused select toolbar code. (65834)
  • Simplify logical expression in InitPatternModal. (65922)
  • Theme JSON: Remove redundant check and relocate $selectors assignment. (66154)
  • Type the router package. (65854)
  • Update jsdom to 25.0.1. (65879)
  • Interactivity: Update preact packages. (66008)

Global Styles

  • Edit Site: Avoid recomputing variations when no theme variations. (66137)
  • Edit Site: Remove redundant state in StyleVariationsContainer. (66130)

Block Library

  • Post Terms: Remove unnecessary ‘get_the_terms’ call. (65867)
  • Query Loop Block: Remove redundant sticky state. (66126)

Block Editor

  • Cleanup AutoBlockPreview render memoization of BlockList. (66060)
  • Use shallow memo for prioritized inserter blocks. (65737)

Components

  • Clean up Tabs animation logic. (65878)
  • SearchControl: Deprecate onClose prop. (65988)

Post Editor

  • Block Visibility: Add end-to-end test. (65880)

Zoom Out

  • Fix components coding standards in Zoom Out Toolbar. (65858)

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

  • Correct capability for the Experiments page. (66118)

Tools

Testing

  • Add an end-to-end test to check the interactions in write mode. (65819)
  • Composite: Add legacy unit tests to stable version. (65952)
  • Fix end-to-end Storybook configuration. (66089)
  • Tests: Add unit tests for image rendering. (66010)
  • Zoom out: End-to-end test – zoomed out mode zooms the canvas. (65943)
  • e2e: Fix Block Visibility test. (65939)

Build Tooling

  • Dedupe npm packages. (65913)
  • Update and align babel dependencies version. (65949)
  • Update node-fetch to 2.7.0. (65957)
  • Update npm lockfile to version 3. (65923)
  • Upgrade browserslist and webcompat data packages. (65926)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @akasunil @Aljullu @andrewserong @AnmolVerma404 @ciampo @DaniGuardiola @dhruvang21 @draganescu @getdave @hbhalodia @jameskoster @jasmussen @jeryj @jsnajdr @leemyongpakva @MaggieCabrera @Mamaduka @matiasbenedetto @matt-west @mcsf @mediaformat @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @ramonjd @renatho @richtabor @rmccue @sabernhardt @SantosGuillamot @shail-mehta @sirreal @stokesman @t-hamano @talldan @troychaplin @tyxla @up1512001 @vk17-starlord @Vrishabhsk @westonruter @youknowriad


Thanks to @joen for the release assets and @cbravobernal for the peer review.

#gutenberg #gutenberg-new