Use inert attribute instead of useDisabled (#44865)

WordPress · Oct 12, 2022 · d50e613 · d50e613
1 parent 705d783
commit d50e613
Show file tree

Hide file tree

Showing 19 changed files with 167 additions and 377 deletions.
diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
@@ -0,0 +1,30 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers vendor JavaScript files to be used as dependencies of the editor
+ * and plugins.
+ *
+ * This function is called from a script during the plugin build process, so it
+ * should not call any WordPress PHP functions.
+ *
+ * @since 13.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts instance.
+ */
+function gutenberg_register_vendor_scripts_62( $scripts ) {
+	$extension = SCRIPT_DEBUG ? '.js' : '.min.js';
+
+	$script = $scripts->query( 'wp-inert-polyfill', 'registered' );
+	if ( ! $script ) {
+		$scripts->add( 'wp-inert-polyfill', gutenberg_url( 'build/vendors/inert-polyfill' . $extension ), array() );
+	}
+
+	$script       = $scripts->query( 'wp-polyfill', 'registered' );
+	$script->deps = array_merge( $script->deps, array( 'wp-inert-polyfill' ) );
+}
+add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts_62' );
diff --git a/lib/load.php b/lib/load.php
@@ -95,6 +95,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/template-parts-screen.php';
 require __DIR__ . '/compat/wordpress-6.1/theme.php';
 
+// WordPress 6.2 compat.
+require __DIR__ . '/compat/wordpress-6.2/script-loader.php';
+
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -84,7 +84,8 @@
 		"@wordpress/viewport": "file:packages/viewport",
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
-		"@wordpress/wordcount": "file:packages/wordcount"
+		"@wordpress/wordcount": "file:packages/wordcount",
+		"wicg-inert": "3.1.2"
 	},
 	"devDependencies": {
 		"@actions/core": "1.8.0",

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Disabled } from '@wordpress/components';
 import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { Disabled } from '@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/packages/block-editor/src/components/block-preview/live.js b/packages/block-editor/src/components/block-preview/live.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
@@ -16,9 +11,9 @@ export default function LiveBlockPreview( { onClick } ) {
 			onClick={ onClick }
 			onKeyPress={ onClick }
 		>
-			<Disabled>
+			<div inert="true">
 				<BlockList />
-			</Disabled>
+			</div>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-preview/test/index.js b/packages/block-editor/src/components/block-preview/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -99,12 +99,6 @@ describe( 'useBlockPreview', () => {
 		);
 		expect( previewedBlockContents ).toBeInTheDocument();
 
-		// Test elements within block contents are disabled.
-		await waitFor( () => {
-			const button = screen.getByText( 'Button' );
-			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
-		} );
-
 		// Ensure the block preview class names are merged with the component's class name.
 		expect( container.firstChild.className ).toBe(
 			'test-container-classname block-editor-block-preview__live-content components-disabled'

diff --git a/packages/block-editor/src/components/block-tools/back-compat.js b/packages/block-editor/src/components/block-tools/back-compat.js
@@ -23,6 +23,7 @@ export default function BlockToolsBackCompat( { children } ) {
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
 		since: '5.8',
+		version: '6.3',
 	} );
 
 	return (

diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js
@@ -5,7 +5,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
-import { useDisabled } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,13 +21,8 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 				.__experimentalDiscussionSettings
 	);
 
-	const disabledRef = useDisabled();
-
 	return (
-		<div
-			className="wp-block-comments__legacy-placeholder"
-			ref={ disabledRef }
-		>
+		<div className="wp-block-comments__legacy-placeholder" inert="true">
 			<h3>
 				{
 					/* translators: %s: Post title. */

diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
@@ -13,18 +13,17 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import { useDisabled, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 const CommentsFormPlaceholder = () => {
-	const disabledFormRef = useDisabled();
 	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" ref={ disabledFormRef }>
+			<form noValidate className="comment-form" inert="true">
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }

diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
@@ -21,7 +21,6 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { useDisabled } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { renderToString, useEffect } from '@wordpress/element';
@@ -55,7 +54,6 @@ export default function TableOfContentsEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const disabledRef = useDisabled();
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -295,7 +293,7 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol ref={ disabledRef }>
+				<ol inert="true">
 					<TableOfContentsList nestedHeadingList={ headingTree } />
 				</ol>
 			</nav>

diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import type { HTMLProps } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useDisabled } from '@wordpress/compose';
-import { createContext, forwardRef } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,15 +14,6 @@ import { useCx } from '../utils';
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
-// Extracting this ContentWrapper component in order to make it more explicit
-// the same 'ContentWrapper' component is needed so that React can reconcile
-// the dom correctly when switching between disabled/non-disabled (instead
-// of thrashing the previous DOM and therefore losing the form fields values).
-const ContentWrapper = forwardRef<
-	HTMLDivElement,
-	HTMLProps< HTMLDivElement >
->( ( props, ref ) => <div { ...props } ref={ ref } /> );
-
 /**
  * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
  *
@@ -65,29 +50,22 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const ref = useDisabled();
 	const cx = useCx();
-	if ( ! isDisabled ) {
-		return (
-			<Provider value={ false }>
-				<ContentWrapper>{ children }</ContentWrapper>
-			</Provider>
-		);
-	}
 
 	return (
-		<Provider value={ true }>
-			<ContentWrapper
-				ref={ ref }
-				className={ cx(
-					disabledStyles,
-					className,
-					'components-disabled'
-				) }
+		<Provider value={ isDisabled }>
+			<div
+				// @ts-ignore Reason: inert is a recent HTML attribute
+				inert={ isDisabled ? 'true' : undefined }
+				className={
+					isDisabled
+						? cx( disabledStyles, className, 'components-disabled' )
+						: undefined
+				}
 				{ ...props }
 			>
 				{ children }
-			</ContentWrapper>
+			</div>
 		</Provider>
 	);
 }