Alex Lende 8:00 am on May 23, 2024
Tags: block-editor ( 100 ), core-editor ( 707 ), gutenberg ( 479 ), gutenberg-new

What’s new in Gutenberg 18.4 (22 May)

“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 18.4 is ready and available for download!

This release includes 178 pull requests by 58 contributors. Look for improvements to the Grid 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., a new handy keyboard shortcut, and useful features for extenders. Additionally, as always, a number of bugs, 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) issues, and performance issues have been fixed.

Great work to all who contributed to Gutenberg 18.4, with special appreciation for the first-time contributors we had this release. Thank you!

Table of Contents

Visualize grid layouts

No longer an experiment, the grid layout visualization is now available to everyone! See outlines of the grid columns and rows, and use the drag handles to make content span across them. (#61640)

Group blocks with a keyboard shortcut

Many design tools provide shortcuts for grouping elements. Gutenberg has been missing this convenience since blocks could be grouped… until today. Now you can conveniently group all selected blocks with the ⌘ Command + G on MacOS or Ctrl + G on Windows. (#46972)

Define custom aspect ratio presets with 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.

Tired of being stuck with the same standard aspect ratios for image cropping and layout? Now themes can define their own aspect ratio presets to use. (#47271)

Set new aspect ratios with the settings.dimensions.aspectRatios option in theme.json. As with other presets, the default options are always available by default. To remove them and use only your own, set the settings.dimensions.defaultAspectRatios option to false.

{
	"version": 3,
	"settings": {
		"dimensions": {
			"aspectRatios": [
				{
					"name": "Super Ultra-Wide - 32:9",
					"slug": "32-9",
					"ratio": "32/9"
				}
			]
		}
	}
}

Other notable highlights

For extenders needing more customizability than the BlockToolbar has to offer, you can use the newly exported BlockPopover component to easily create your own custom toolbar. (#61529)

For extenders replicating rich text pasting behavior in your own blocks, you now have access to a convenient supports.splitting block setting. When it is enabled and content is pasted inside the block, it will split your block in two, insert the content, and then merge the ends together. (#54543)

For theme developers, the list block now includes a wp-block-list class to allow styling the block separately from other lists. No more accidentally selecting too many things when styling list blocks. (#56469)

Changelog

View full list of changes

Enhancements

Layout

Check child layout exists before generating classname. (61392)
Hide Image block resizer when inside a grid layout. (61603)

Grid interactivity

Improve max attribute logic. (61420)
Improve how grid resizer handles 0-width and 0-height cells. (61423)
Show grid visualizer when block inspector is closed. (61429)
Stabilise grid layout visualiser and resizer. (61640)

Global Styles

Add aspect ratio presets support via theme.json. (47271, 61774)
Background images: Remove required “file” prop. (61387, 61469)
Change “Solid” tab to “Color”. (61366)
Improve panel title and description for palette. (61365)
Tweak palette panel spacing and empty message. (61368)
Update color variations. (61334)

Block Styles

Add extended version of register block style functions. (61029)

Post actions

Improve success messages of some post actions. (61539)
Unify the list of available post type actions. (61520)
Don’t export duplicatePostAction for now. (61407)

Zoom Out

Editor: Enable Zoom-out mode in the post editor. (61293)
Keep original viewport width (single scale). (61424)
Open inserter 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. when clicking on inserter buttons on zoom-out mode. (61434)
Remove experimental zoom out control. (61509)
Zoomed Out View: Don’t close the inserter. (61004)

Components

Do not render FormTokenField label when not defined. (61336)
Placeholder: Tweak placeholder style. (61590)
Add content only descriptions in dropdown menus for patterns and templates. (61127)

Block Library

List Block: Add block class name to the list block. (56469)
Embeds Block: Add Bluesky variation. (61352)
Site Logo Block: Add setting labels via the ‘register_setting’ method. (61351)

Block Editor

Make BlockPopover component public. (61529)
Only add the selected pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in metadata during insertion. (61557)
Add a keyboard shortcut to create group from the selected blocks. (46972)
Enhance block outlines and selection interactions. (60757)
Tiny tweak to position close button properly in the inserter. (61461)

Editor

Editor: Unify 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. component. (61273)
Editor: Unify the sidebar between the post and site editors. (61507)
Editor: Update and simplify the Post Summary and Post Card section in the document sidebar. (61624)
Try: Improve date-wrapping in prepublish flow. (61490)
Update: Implement the new discussion panel design. (61357)

Post Editor

Add global styles to settings using existing context code. (61556)
Display a notice after moving a post into the 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.. (61670)
Simplify Post Publish Flow status term. (61386)

Site Editor

Redirect /wp_template_part/all to /patterns. (61446)
Moves “Patterns” command to site editor main navigation. (61416)
Adds “Template Parts” command to site editor. (61287)
Show pin/unpin button on the site editor 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 sidebar. (61448)
Remove default entry into Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. focus mode but retain ability to access via “Edit”. (61275)

Data Views

Add bulk actions toolbar. (59714)
Align list and table layout visuals. (61157)
Add actions to list layout. (60805)
Make pattern preview click area larger. (61250)

Bug Fixes

Layout

Fix grid item resizing in non-iframed editor. (61636)
Fix resizing items to top and left with GridItemResizer. (60986)
Grid Visualizer: Fix grid item resizing in site editor. (61641)
Grid Visualizer: Fix resize not ending when mouse is released outside grid’s bounds. (61668)
GridItemResizer: Fix resizing when List View is open. (61643)
Only show grid resizer if grid block allows resizing on children. (61552)

Global Styles

Background image: Explicitly set background repeat value in user styles. (61526)
Background image: Size controls should show when an image is set. (61388)
Make sure to replace all instances of :Where(body) instead of just …. (61602)
Reduce specificity of global styles body margin reset rule. (61340)
Remove Post Template background override. (61545)

Patterns

Fix blocks in unsynced patterns can enable overrides. (61639)
Revert “Use contentOnly locking for pattern block, remove hard-coded block check in block inspector”. (61517)

List View

Account for text fields in shortcut handler. (61583)
Add a special case for shortcuts coming from modals. (61606)
Standardize List View feature name to use title case capitalization. (61535)

Zoom Out

Block editor: Scroll block into view on insert. (61418)
Fix double scrollbars in site editor with zoom out view enabled. (61548)
Fix zoom out UIUI User interface scale. (61265)
Add bottom and top inserters. (61473)
Add patterns loading state. (61513)
Don’t allow dropping outside section root. (61512)
Don’t select last block. (61484)
Pass the section root ID to the inserter. (61464)
Zoom-out: Fix 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. ref error. (61200)

Components

Fix inconsistent complementary header styles. (61331)
Fix sticking “Reset” option in ToolsPanel. (60621)
RadioControl: Fix shrinking radio controls. (61476)

Block Library

Navigation Block: Add list item wrapper to social links when used in navigation block. (61396)
HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Remove font weight on toolbar tab button – #61254. (61308)
Time to Read Block: Fix “this block has encountered an error” – #61459. (61614)
Image Block: Enable crop action when image has a link. (61470)
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. Block: Fix layout margin override. (55028)

Block Editor

Editor styles: Fix cache (by wrapper selector). (61397)
Fix Truncate component for long unbreakable text. (61137)
Fix focus loss due to filtering blocks. (61558)
Fix: The issue of appender button not clickable in row/stack group. (61585)
Writing Flow/Rich Text: Unify split logic. (54543)

Post Editor

Fix the ‘usePaddingAppender’ error. (61500)
Return an empty object when no fallback templates are found (wp/v2/templates/lookup). (60925)

Site Editor

Fix user capabilities check for the Site Editor. (61444)
Preserve the wp_theme_preview query arg when navigating in Site Editor. (61394)
Trigger sidebar animations only on cross-route navigations. (61402)
Site Editor: Restore the hover zoom effect when hovering the editor frame. (61647)

Widgets Editor

Hide the close button on the inserter for widgets editor. (61510)

Data Views

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 keyboard navigation. (61478)
Improve dataview types. (61586)

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.

Interactivity API: Allow multiple event handlers for the same type with data-wp-on-document and data-wp-on-window. (61009)
Interactivity API: Prevent empty namespace or different namespaces from killing the runtime. (61409)
Interactivity API: Prevent wrong written directives from killing the runtime. (61249)

Accessibility

Components

ComboboxControl supports disabled items. (61294)
Remove usage of aria-details from InputControl and BaseControl. (61203)

Block Library

Fix the RRS block placeholder labeling and improve spacing. (61576)

Block Editor

Focus currently selected block when entering canvas. (61472)
Focus inserter toggle when closing the inserter sidebar. (61467)
Inserter: Add close button. (61421)

Post Editor

Post Actions: Correctly disable dropdown trigger. (61625)

Performance

Calculate and report quartiles in performance results. (60950)
Refactor InserterTabs to use children and remove re-memoizing. (61295)
Tests: Improve collection and reporting. (61450)
Performance tests: Fix results file path. (61686)
Revert “useBlockSync: Remove isControlled effect”. (61480)

Documentation

Update old document URLs to new ones. (61595)
Add a section about block_editor_settings_all to the Filters and 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. doc. (61597)
Add link to VS Code Playwright Extension. (61505)
Added check for duplicated slugs during manifest.json generation. (61332)
Block Editor: Remove multiline prop from Richtext doc. (61592)
Docs: How-to Guides > 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 – Update metabox.md. (61314)
Docs: Interactivity API – Add viewScriptModule as a requirement to work with the Interactivity API. (61355)
Docs: Interactivity API : New pages – About and FAQ. (61323)
Docs: Interactivity Api – Small fixes. (61403)
Docs: Remove list of keyboard shortcuts from FAQ page. (61591)
Docs: Update theme-json-living.md to fix little issue. (61354)
Fix WP versions for theme.json v3 migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. in inline documentation. (61328)
Several Typo Correction in Inline doc. (61379)
Small fixes as per feedback received. (61445)
Theme.json: Update schema with working create theme link. (61306)
Update wordpress/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) README.md. (61635)
Update Node.js requirement in create-block docs. (60962)
Update and restructure the Editor Hooks doc. (61596)
Updated links to developer resources on README.md. (61525)
theme.json schema: Remove duplicate key. (61523)
Several Typo Corrections in Inline Documentations. (61662)

Code Quality

PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher load: move rest template controller 6.6 import to “REST” area. (61564)
Replace classnames with clsx. (61138, 61380)

Block Bindings

Remove not needed breaks in gutenberg_block_bindings_replace_html. (61660)
Simplify the HTML replacement logic until the HTML API is ready. (61236)

Patterns

Pattern overrides: Use block binding editing API. (60721)

Components

Assess stabilization of Theme. (61077)
Upgrade @types/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. package and @types/react-dom. (60796)
Fix problem with gradient-parser types. (61679)

Block Editor

Improve LineHeightControl unit tests. (61337)

Editor

Move the starter template options to the editor package. (61665)

Post Editor

Edit post: Do not consider sidebars mutually exclusive. (61468)
Editor: Move the sidebar component to the editor package. (61497)

Site Editor

Site Editor sidebar: Provide explicit backPaths, remove the getBackPath helper. (61286)

Data Views

Expand typing more components. (61654)
Add end-to-end tests for keyboard interactions in DataViews ListView. (61648)
Add types to the ViewGrid component. (61667)
Type the BulkActions component. (61666)
Type the ItemActions component. (61400)
Type the ViewList component. (61246)
Remove onActionPerformed & onActionStart from the ActionModal API. (61659)

Interactivity API

Add types for warn helper. (61687)
Enable strict type checking. (59865)

Tools

Testing

Convert FocalPointPicker tests to TypeScript. (61373)
E2E: Fix artifacts handling in CI. (61338)
Interactivity API: Fix flaky tests for attribute hydration. (61615)
Lightbox UI block override tests. (61414)
Playwright Utils: Silence some of the warnings coming from Firefox. (61451)
Test: Fix failing style linting error. (61649)
Tests: Fix flaky interactivity deferred test. (61359)

Build Tooling

Add stylelint rule to disallow the order CSSCSS Cascading Style Sheets. property. (61243)
Enforce @since tags in /packages/block-serialization-default-parser/ and other files. (60007)
Bug: False positives for react-hooks/exhaustive-deps. (61599)
Scripts: Add RTLCSS to wp-scripts. (61540)
WP-ENV: Fix return type and tests. (61631)
Create Block: Match specified engines with Gutenberg and CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (61430)
Set prefer-dedupe as the default. (61630)
build: Suggest workaround if tsc --build fails. (61501)
build:package-types: Run silently to reduce user confusion. (61530)
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/ Actions: Fix PHP file change detection 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. pattern. (61183)
Dedupe packages. (61532)
Patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. react-autosize-textarea for updated types. (61570)
Upgrade @use-gesture/react. (61503)
Upgrade framer-motion. (61572)

First time contributors

The following PRs were merged by first time contributors:

@amitraj2203: Embeds: Add Bluesky variation. (#61352)
@jpstevens: Convert FocalPointPicker tests to TypeScript. (#61373)
@kovshenin: Update Node.js requirement in create-block docs. (#60962)
@mrmurphy: Upgrade @types/react package and @types/react-dom. (#60796)
@scheinercc: Update wordpress/a11y README.md. (#61635)
@StyleShit: Bug: False positives for react-hooks/exhaustive-deps. (#61599)
@vipul0425: Fix: The issue of appender button not clickable in row/stack group. (#61585)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @amitraj2203 @anton-vlasenko @artemiomorales @bacoords @carolinan @cbravobernal @colinduwe @DaniGuardiola @DAreRodz @desrosj @draganescu @ellatrix @fullofcaffeine @geriux @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @johnhooks @jorgefilipecosta @jpstevens @jsnajdr @juanmaguitar @kevin940726 @kovshenin @MaggieCabrera @Mamaduka @mcsf @mrmurphy @ndiego @noisysocks @ntsekouras @oandregal @ramonjd @retrofox @richtabor @ryelle @SantosGuillamot @scheinercc @scruffian @shail-mehta @sirreal @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @WunderBart @youknowriad

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

Jason Crist 11:01 pm on May 8, 2024
Tags: gutenberg-new

What’s new in Gutenberg 18.3? (8 May)

Gutenberg 18.3 has been released and is available for download!

A special welcome to three new first time contributors!

The latest release includes 157 pull requests from 44 contributors, and generally focuses on polishing features, and addressing bugs. Significant activity has also been directed towards improving documentation and code quality.

In this issue:

Full page client-side navigation experiment

As part of continuing to bring a single page application experience to WP sites, this change enables an experimental setting for whole-DOM-replacement on the client navigating between different pages without the need for a full page refresh. Previously this was only available for region-based replacement. (#59707)

Allow negative values for margin controls

Negative margin values can now be added directly in the editing experience, resolving a longstanding feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged. and matching the current 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. support. This expands the design options for users leveraging the Editor. (#60347)

Add defaultFontSizes option to theme.json (incrementing theme.json to v3)

A previous attempt at adding the ability to add a defaultFontSizes option to theme.json didn’t stick (#56661) and this change reintroduces that ability. Because the default behavior of overriding font sizes has changed this has caused the version of theme.json to increment to version 3. (See this comment for more details.) Now defaultFontSizes can be set to false in theme.json to disable showing the default font sizes supplied from Gutenberg. (#58409)

Add publish flow in site editor

This continues the work on unifying the publishing flow between post and site editors and adds to the site editor the publish/save button that is used in post editor. This means we have the same publishing flow between the two editors. (#61136)

Other Notable Highlights

The Zoom Out Mode got some love:
- Insert patterns at the end of the root section (#60855)
- Make the zoom out inserters work for sections inside the section root (#60909)
- Don’t show appender at all inside sections on zoom-out mode (#60948)
- Drop patterns and blocks between sections only in zoom out mode (#60828)
In the Post Editor we moved around word count, post status and last edited info in page summary (#61235)
Bumped the required WordPress version to 6.4 and tested up to to 6.5. (#60780)