Skip to content

Commit 9bb401b

Browse files
jsnajdrretrofoxciampo
authored and
widoz
committed
Add inertValue helper and use it for setting inert attribute (WordPress#83871)
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: retrofox <retrofox@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 537b61b commit 9bb401b

45 files changed

Lines changed: 196 additions & 73 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/block-editor/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
- Inserter: Open faster when many block types are registered ([#83446](https://github.com/WordPress/gutenberg/pull/83446)).
88
- State control badges: migrate from the private `@wordpress/components` `Badge` to `@wordpress/ui` `Badge` ([#82608](https://github.com/WordPress/gutenberg/pull/82608)).
9+
- Use the `inertValue` helper to set `inert` attributes, for better React 18/19 compatibility ([#83871](https://github.com/WordPress/gutenberg/pull/83871)).
910

1011
### Bug Fixes
1112

‎packages/block-editor/src/components/block-list/use-block-props/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import clsx from 'clsx';
22
import { useContext } from '@wordpress/element';
3+
import { inertValue } from '@wordpress/ui';
34
import { __, sprintf } from '@wordpress/i18n';
45
import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
56
import { useMergeRefs, useDisabled, useRefEffect } from '@wordpress/compose';
@@ -236,7 +237,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
236237
'data-block': clientId,
237238
'data-type': name,
238239
'data-title': blockTitle,
239-
inert: isSubtreeDisabled ? 'true' : undefined,
240+
inert: inertValue( isSubtreeDisabled ),
240241
className: clsx(
241242
'block-editor-block-list__block',
242243
{

‎packages/block-editor/src/components/inserter/media-tab/utils.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createBlock } from '@wordpress/blocks';
2+
import { inertValue } from '@wordpress/ui';
23

34
const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
45

@@ -31,7 +32,7 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) {
3132
src={ media.previewUrl || mediaSrc }
3233
alt={ alt }
3334
controls={ mediaType === 'audio' ? true : undefined }
34-
inert="true"
35+
inert={ inertValue( true ) }
3536
onError={ ( { currentTarget } ) => {
3637
// Fall back to the media source if the preview cannot be loaded.
3738
if ( currentTarget.src === media.previewUrl ) {

‎packages/block-library/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
- Gallery: Add an "Order by" sorting control to the static gallery mode, and consolidate sorting control for static and dynamic modes in the Settings panel ([#83438](https://github.com/WordPress/gutenberg/pull/83438)).
1212
- Icon: Match an icon's keywords as well as its name and label when searching the icon library ([#82367](https://github.com/WordPress/gutenberg/pull/82367)).
1313
- Button: Only open the link popover from the toolbar button or keyboard shortcut instead of whenever a linked button is selected. The toolbar button now shows a pressed state when a link is set ([#30166](https://github.com/WordPress/gutenberg/pull/30166)).
14+
- Use the `inertValue` helper to set `inert` attributes, for better React 18/19 compatibility ([#83871](https://github.com/WordPress/gutenberg/pull/83871)).
1415

1516
### Bug Fixes
1617

‎packages/block-library/src/audio/edit.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
__experimentalToolsPanel as ToolsPanel,
88
__experimentalToolsPanelItem as ToolsPanelItem,
99
} from '@wordpress/components';
10-
import { Text } from '@wordpress/ui';
10+
import { Text, inertValue } from '@wordpress/ui';
1111
import {
1212
BlockControls,
1313
BlockIcon,
@@ -251,7 +251,7 @@ function AudioEdit( {
251251
<figure { ...blockProps }>
252252
<audio
253253
controls="controls"
254-
inert={ ! isSingleSelected ? 'true' : undefined }
254+
inert={ inertValue( ! isSingleSelected ) }
255255
src={ src ?? temporaryURL }
256256
/>
257257
{ !! temporaryURL && <Spinner /> }

‎packages/block-library/src/comments/edit/placeholder.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
33
import { useSelect } from '@wordpress/data';
44
import { useEntityProp } from '@wordpress/core-data';
55
import { createInterpolateElement } from '@wordpress/element';
6+
import { inertValue } from '@wordpress/ui';
67
import CommentsForm from '../../post-comments-form/form';
78

89
export default function PostCommentsPlaceholder( { postType, postId } ) {
@@ -17,7 +18,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
1718
);
1819

1920
return (
20-
<div className="wp-block-comments__legacy-placeholder" inert="true">
21+
<div
22+
className="wp-block-comments__legacy-placeholder"
23+
inert={ inertValue( true ) }
24+
>
2125
<h3>
2226
{
2327
/* translators: %s: Post title. */

‎packages/block-library/src/video/edit.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
1717
} from '@wordpress/block-editor';
1818
import { useRef, useEffect, useState } from '@wordpress/element';
19+
import { inertValue } from '@wordpress/ui';
1920
import { useReducedMotion } from '@wordpress/compose';
2021
import { __ } from '@wordpress/i18n';
2122
import { useDispatch } from '@wordpress/data';
@@ -260,7 +261,7 @@ function VideoEdit( {
260261
<figure { ...blockProps }>
261262
<video
262263
controls={ controls }
263-
inert={ ! isSingleSelected ? 'true' : undefined }
264+
inert={ inertValue( ! isSingleSelected ) }
264265
poster={ poster }
265266
src={ src || temporaryURL }
266267
ref={ videoPlayer }

‎packages/boot/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Enhancements
6+
7+
- Use the `inertValue` helper to set `inert` attributes, for better React 18/19 compatibility ([#83871](https://github.com/WordPress/gutenberg/pull/83871)).
8+
59
## 0.23.0 (2026-09-23)
610

711
## 0.22.0 (2026-09-10)

‎packages/boot/src/components/canvas/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState, useEffect, useMemo } from '@wordpress/element';
2+
import { inertValue } from '@wordpress/ui';
23
import { Spinner } from '@wordpress/components';
34
import { useNavigate, useSearch } from '@wordpress/route';
45
import { __ } from '@wordpress/i18n';
@@ -158,7 +159,7 @@ export default function Canvas( { canvas }: CanvasProps ) {
158159
<div
159160
style={ { height: '100%' } }
160161
// @ts-expect-error inert not typed properly
161-
inert={ canvas.isPreview ? 'true' : undefined }
162+
inert={ inertValue( canvas.isPreview ) }
162163
>
163164
<Editor
164165
postType={ canvas.postType }

0 commit comments

Comments
 (0)