Kai Hao 6:19 am on September 25, 2024
Tags: , , ,   

What’s new in Gutenberg 19.3? (25 September)

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

A total of 174 PRs were merged in Gutenberg 19.3, with 7 first-time contributors! With WordPress 6.7 rapidly approaching, many contributors are focusing on 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. However, this release still includes some great features and enhancements, including stabilizing the Zoom Out mode!

  1. Zoom Out Mode
  2. Swap the position of the publish buttons
  3. Use custom block names in inspector controls
  4. Allow opting out of the “Choose a pattern” modal when adding new pages
  5. Automatic phone number linking
  6. Allow dropping multiple images to the image block
  7. Changelog
  8. First-time contributors
  9. Contributors

Zoom Out Mode

The Zoom Out Mode is officially out of the experiment and is available to all users. This new mode allows users to zoom out to edit and create at the pattern level over granular 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. editing. This effort aims to provide a new, high-level approach to building and interacting with your site. Follow the 6.7 iteration issue for more information.

Swap the position of the publish buttons

A nice user experience improvement to swap the “Cancel” and the “Publish” buttons in the pre-publish check panel. Now, users don’t have to move their cursor unnecessarily when publishing. (#65317)

Use custom block names in inspector controls

Uses the custom name for a block in the block inspector controls when available. (#65398)

Allow opting out of the “Choose a pattern” modal when adding new pages

The “Choose a pattern” modal can be distracting for power users who always want to start with a blank page. A new preference toggle disables the modal when adding new pages. (#65026)

Automatic phone number linking

The link field can now be automatically populated with tel: when the selected text is a phone number. (#64865)

Allow dropping multiple images to the image block

Multiple images can now be dropped on an image block, converting it to a gallery block. In addition, dropping multiple file types will each create an appropriate block. (#65030, #65144)

Changelog

Features

Zoom Out

  • Remove experimental flag. (65404)

Enhancements

  • Create Block: Update the minimum required PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher version to 7.2. (65166)
  • DataViews: remove unused .dataviews-view-table__cell-content-wrapper:Empty style rule. (65084)
  • Media Utils: Add TypeScript support and export more utils. (64784)
  • Media placeholders: Add “drag” to the text. (65149)
  • Restore: 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. button in Document settings. (65087)
  • Inspector Controls: Use custom block name in inspector controls when available. (65398)
  • Icons: Adds bell and bell-unread icons. (65324)
  • Editor topbar: Reorder the actions on the right. (65163)
  • Patterns: Add opt out preference to the ‘Choose a Pattern’ modal when adding a page. (65026)
  • Locked Templates: Blocks with contentOnly locking should not be transformable. (64917)
  • Block Locking: Add border to Replace item in content only image toolbar. (64849)
  • DataViews: Improve UXUX User experience of bundled views for Pages. (65295)

Components

  • Styling: Apply elevation scale in components package. (65159)
  • Tabs: Improve Tabs indicator animation and related utils. (64926)
  • Modal
    • Add exit animation. (65203)
    • Decrease close button size. (65131)
  • Navigator Screen: Warn if path doesn’t follow a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org-like scheme. (65231)
  • Card: Update Card radius. (65053)
  • Combobox Control: Add placeholder attribute. (65254)

Block Library

  • Allow dropping multiple images to the image block. (65030)
  • Categories List block: Add dropdown for taxonomies. (65272)
  • Image: Adds the block controls for uploading image. (64320)
  • Remove colons from control labels. (65205)
  • Terms List block: Add Categories-specific variation. (65434)

Zoom Out

  • Add Zoom Out toggle to editor 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. when experiment enabled. (65183)
  • Add prompt for drag and drop in Patterns tab in Zoom Out mode. (65115)
  • Close inserter on exiting Zoom Out to edit. (65194)
  • Show top level sections in List View. (65202)
  • Try vertical displacement when dragging a pattern between existing patterns/sections. (63896)

Block Editor

  • Link Editing: Automatically add tel to phone number when linking URL. (64865)
  • Drag and Drop: When dragging a mix of video, audio, and image blocks, create individual blocks as appropriate. (65144)
  • URLInput: Replace input with InputControl. (65158)
  • Normalize block inspector controls spacing. (64526)

Post Editor

  • Add new Media section to preferences modal. (64846)
  • DocumentBar: Replace icon with post type label. (65170)
  • Page editor: Double-click to edit template part. (65024)
  • Post publish upload media dialog: Handle more block types. (65122)

Block bindings

  • Populate block context with inherited post type from template slug. (65062)
  • Try gap 0 on attribute items. (65277)
  • Use 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. label from register_meta in block bindings workflows. (65099)

Global Styles

  • Refactor site background controls and move site global styles into Background group. (65304)
  • Spacing control: Replace sides dropdwon with link button. (65193)

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 context proxies. (64713)
  • Update: Rephrase “Force page reload” and move to Advanced. (65081)

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

  • Global Styles: Allow read access to users with edit_posts capabilities. (65071)
  • 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. / Post template: Enable post format 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.. (64167)

New APIs

  • Add wordpress/fields package.
    • Introduce the package. (65230)
    • Make the package private. (65269)
  • Interactivity API: Add getServerState() and getServerContext(). (65151)

Bug Fixes

  • Align popover alt variant styling with block toolbar. (65263)
  • Compose: Correctly call timer cleanup in ‘useFocusOnMount’. (65184)
  • Fix some docblockdocblock (phpdoc, xref, inline docs) types related to the Template Registration API. (65187)
  • Fix the issue where block spacing control not shown. (65371)
  • Fix unintentional block toolbar shadow. (65182)
  • Fix: Moving a page to the trash on the site editor does not goes back to the pages list. (65119)
  • Fix: Moving the last page item to the the trash causes a crash. (65236)
  • Preferences: Fix back button on mobile. (65141)
  • Post Summary Panel: Restore height:Auto for toggle buttons. (65362)
  • Fix Tabs styling in Font Library modal. (65330)
  • E2E: Change deprecated social icons for standard in end-to-end. (65312)
  • Typography: Make title blocks apply typographic styles consistently. (65307)
  • Target Hints REST API: Add missing param sanitization. (65280)
  • Interactivity API: Update iterable signals when deepMerge() adds new properties. (65135)
  • Navigation Menus: Typography styling support to the navigation submenu block. (65060)
  • Grid: In RTL languages, the resize handles point in the opposite direction. (64995)
  • Block Locking: Fix Content Only Toolbar icon focus style. (64940)
  • Image: Fix resizing to max width in classic themes. (64819)
  • Meta Boxes: Try split content view. (64351)
  • Distraction Free: Fix blurry edge along editor header. (64277)

Block Library

  • Comments Pagination: Fix warning returned by comments pagination blocks. (65435)
  • Cover: Explicitly set isUserOverlayColor to false when media is updated. (65105)
  • Disallow setting grid block rows/columns to zero. (65217)
  • Fix image block crash. (65222)
  • Fix: Buttons block: Block spacing value does not apply to both vertical and horizontal alignment. (64971)
  • Fix: Embed blocks: Figcaption inserted via toolbar not nested within figure element – #64960. (64970)
  • Image cropping: Skip making an API request if there are no changes to apply. (65384)
  • Comments Pagination: Pass the comments query paged arg to functions get_next_comments_link and get_previous_comments_link. (63698)
  • Query Loop
    • Default to querying posts when on singular content. (65067)
    • Remove is_singular() check and fix test. (65483)

Block Editor

  • Inserter: Fix loading indicator for reusable blocks. (64839)
  • Normalize spacing in Layout hook controls. (65132)
  • Pattern Inserter: Fix pattern list overflow. (65192)
  • Remove reset styles RTL from 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.. (65150)
  • Revert “Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (#64048)” (65208)

Components

  • BoxControl: Unify input filed width whether linked or not. (65348)
  • ComboboxControl: Add more unit tests. (65255)
  • Fix: Button Replace remaining 40px default size violations [Edit widgets]. (65367)
  • Tabs: Fix vertical indicator. (65385)

Block bindings

  • Fix empty strings placeholders in post meta bindings. (65089)
  • Remove key fallback in bindings get values and rely on source label. (65517)
  • Fix passing bindings context to canUserEditValue. (65599)
  • Prioritize existing placeholder over bindingsPlaceholder. (65220)
  • Only use canUserEditValue when setValues is defined. (65565)

Zoom Out

  • Force device type to Desktop whenever zoom out is invoked. (64476)
  • Hide toolbar icon on smaller viewports. (65437)
  • Remove zoom out toggle when editor is not iframed. (65452)

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)

  • 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 script-module. (65101)
  • Interactivity API: Use a11y Script Module in Gutenberg. (65123)
  • Script Modules API: Print script module live regions HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. in page HTML. (65380)
  • DatePicker: Better hover/focus styles. (65117)
  • Form Input: Don’t use flex-direction: Row-reverse for checkbox field. (64232)
  • Navigation Menus: Remove Warning and add notice for Navigation. (63921)
  • Global Styles: Fix the shadows Range control accessibility and usability. (63908)
  • Block Editor: Fix accessibility of the hooked blocks toggles. (63133)

Post Editor

  • Support keyboard resizing of meta boxes pane. (65325)
  • Swap position of the Pre-publish checks buttons. (65317)

Performance

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Batch remaining actions in resolvers. (65176)
  • Block Editor: Use static access for selector in ‘useZoomOutModeExit’. (65337)
  • Editor: Optimize global styles permission check. (65177)

Experiments

  • Block bindings REST API: Bring bindings UIUI User interface in Site Editor. (64072)

Documentation

  • Add JSDoc block for getSectionRootClientId in block editor package. (65219)
  • ButtonGroup: Fix story to show what the component does. (65336)
  • DataViews storybook
    • Better styles for combined fields story. (65078)
    • Enable all layouts for combined fields storybook. (65082)
  • Docs: Fix minor typos in Build your first block tutorial. (64961)
  • Docs: Update the content of the API version 3 section in the Block API Reference. (65375)
  • Fix typo in Slot Fills documentation. (65275)

Code Quality

  • Components: Transition to the new 40px default size.
    • Button:
      • Add __next40pxDefaultSize for files in editor 3. (65139)
      • Add __next40pxDefaultSize for files in editor 4. (65140)
      • Add props for buttons in editor 1. (65068)
      • Add props for buttons in editor 2. (65083)
      • Fix: Replace remaining 40px default size violations [Block Editor 4]. (65257)
      • Fix: Replace remaining 40px default size violation [Block library 3]. (65110)
      • Fix: Replace remaining 40px default size violation [Block library 4]. (65143)
      • Fix: Replace remaining 40px default size violation [Block library]. (65075)
      • Fix: Replace remaining 40px default size violation [Edit Site 2]. (65258)
      • Fix: Replace remaining 40px default size violations [Block library 1]. (65033)
      • Fix: Replace remaining 40px default size violations [Block Editor 1]. (65034)
    • BoxControl
      • Add lint rule for 40px size prop usage. (65341)
    • DimensionsPanel: Apply 40px default size to UI when no spacing preset is available. (65300)
  • Add useEvent and revamped useResizeObserver to @wordpress/compose. (64943)
  • DataViews: Use Dropdown for views configuration dialog. (65314)
  • Platform docs: Upgrade dependencies. (65445)
  • Rename edit-post__fade-in-animation and unify keyframe definitions. (65377)
  • Update minimum required version in PHP. (65301)
  • Editor: 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 in BlockManager. (65349)
  • Data Views Fields: Migrate store and actions from editor package to fields package. (65261)
  • 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: Remove ‘function_exists’ checks for methods with ‘gutenberg’ prefix. (65260)
  • Global Styles: Update REST controller override method and 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. changes from Core. (65259)
  • Patterns: Remove unused method returned from ‘mapSelect’. (65073)
  • Embed: Convert EmbedPreview component to functional component. (51325)

Components

  • BoxControl: Fix critical error when null value is passed. (65287)
  • Composite:
    • Deprecate legacy, unstable version. (63572)
    • Remove store prop and useCompositeStore hook. (64723)
    • Stabilize APIs. (63569)
  • @wordpress/components: Add local copy of use-lilius. (65097)

Block bindings

  • Always prioritize using context in post meta source logic. (65449)
  • Improve getRegisteredPostMeta resolver. (65450)
  • Remove extra filtering of empty sources. (65447)

Block Editor

  • Remove the ‘PrivateInserter’ component. (65111)
  • Use the tooltip from a button in ‘ButtonBlockAppender’. (65113)
  • Remove unused css selectors. (65276)

Tools

  • Scripts: Update stylelint dependency and the default configuration. (64828)
  • Styleling config: Fix stylelint configuration missing files for npm. (65313)

Build Tooling

  • Build Plugin: Simplify and improve zip contents. (65232)
  • Build zip artifact on release and wp production branches. (65471)
  • Build: Include Core blocks’ render and variations files. (63311)
  • Script Modules
    • Prepare build for more script modules. (65064)
    • Remove babel from script-modules build. (65279)
    • Remove es-module shims and importmap-polyfill. (65210)
  • Correctly generate PHP files for server-side rendering of blocks on Windows OS. (65248)
  • Packages: Only add polyfills where needed. (65292)
  • Switch from UglifyJS to Terser to build the polyfill script. (65278)

Testing

  • Unit tests: Mock matchMedia to enforce prefers-reduce-motion. (65438)
  • Upgrade Playwright to v1.47. (65156)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @AKSHAT2802 @Aljullu @andrewserong @carolinan @cbravobernal @ciampo @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @devansh016 @dhruvang21 @ellatrix @farid-hadi @getdave @gigitux @greenworld @gziolo @hbhalodia @jameskoster @jasmussen @javierarce @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @louwie17 @madhusudhand @MaggieCabrera @Mamaduka @mikeybinns @mirka @ntsekouras @oandregal @ockham @peterwilsoncc @rahulharpal1603 @ramonjd @richtabor @rohitmathur-7 @SantosGuillamot @scruffian @sgomes @sirreal @stokesman @swissspidy @t-hamano @talldan @vipul0425 @zaguiini

Props to @jameskoster for the visual assets, @andrewserong, @ramonopoly, and @aaronrobertshaw for help drafting and proofreading this post, and @noisysocks for the release process.

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