Enable React StricMode again (#47639)

* Enable React StricMode again * Enable concurrent and strict mode in customize-widgets, too
WordPress · Feb 2, 2023 · 5660271 · 5660271 · github-actions · Feb 2, 2023
1 parent a0b654a
commit 5660271
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 62 deletions.
diff --git a/packages/customize-widgets/src/components/focus-control/index.js b/packages/customize-widgets/src/components/focus-control/index.js
@@ -52,21 +52,26 @@ export default function FocusControl( { api, sidebarControls, children } ) {
 			focusWidget( widgetId );
 		}
 
+		let previewBound = false;
+
 		function handleReady() {
 			api.previewer.preview.bind(
 				'focus-control-for-setting',
 				handleFocus
 			);
+			previewBound = true;
 		}
 
 		api.previewer.bind( 'ready', handleReady );
 
 		return () => {
 			api.previewer.unbind( 'ready', handleReady );
-			api.previewer.preview.unbind(
-				'focus-control-for-setting',
-				handleFocus
-			);
+			if ( previewBound ) {
+				api.previewer.preview.unbind(
+					'focus-control-for-setting',
+					handleFocus
+				);
+			}
 		};
 	}, [ api, focusWidget ] );
 

diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { render } from '@wordpress/element';
+import { StrictMode, createRoot } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -91,13 +91,14 @@ export function initialize( editorName, blockEditorSettings ) {
 			}
 		} );
 
-		render(
-			<CustomizeWidgets
-				api={ wp.customize }
-				sidebarControls={ sidebarControls }
-				blockEditorSettings={ blockEditorSettings }
-			/>,
-			container
+		createRoot( container ).render(
+			<StrictMode>
+				<CustomizeWidgets
+					api={ wp.customize }
+					sidebarControls={ sidebarControls }
+					blockEditorSettings={ blockEditorSettings }
+				/>
+			</StrictMode>
 		);
 	} );
 }
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -9,7 +9,7 @@ import {
 	store as editorStore,
 	experiments as editorExperiments,
 } from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
+import { StrictMode, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
@@ -173,24 +173,28 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	}
 
 	return (
-		<ShortcutProvider>
-			<SlotFillProvider>
-				<ExperimentalEditorProvider
-					settings={ editorSettings }
-					post={ post }
-					initialEdits={ initialEdits }
-					useSubRegistry={ false }
-					__unstableTemplate={ isTemplateMode ? template : undefined }
-					{ ...props }
-				>
-					<ErrorBoundary>
-						<EditorInitialization postId={ postId } />
-						<Layout styles={ styles } />
-					</ErrorBoundary>
-					<PostLockedModal />
-				</ExperimentalEditorProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<StrictMode>
+			<ShortcutProvider>
+				<SlotFillProvider>
+					<ExperimentalEditorProvider
+						settings={ editorSettings }
+						post={ post }
+						initialEdits={ initialEdits }
+						useSubRegistry={ false }
+						__unstableTemplate={
+							isTemplateMode ? template : undefined
+						}
+						{ ...props }
+					>
+						<ErrorBoundary>
+							<EditorInitialization postId={ postId } />
+							<Layout styles={ styles } />
+						</ErrorBoundary>
+						<PostLockedModal />
+					</ExperimentalEditorProvider>
+				</SlotFillProvider>
+			</ShortcutProvider>
+		</StrictMode>
 	);
 }
 

diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -3,6 +3,7 @@
  */
 import { SlotFillProvider, Popover } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { StrictMode } from '@wordpress/element';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
@@ -31,16 +32,17 @@ export default function App() {
 	}
 
 	return (
-		<ShortcutProvider style={ { height: '100%' } }>
-			<SlotFillProvider>
-				<Popover.Slot />
-				<UnsavedChangesWarning />
-
-				<Routes>
-					<Layout />
-					<PluginArea onError={ onPluginAreaError } />
-				</Routes>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<StrictMode>
+			<ShortcutProvider style={ { height: '100%' } }>
+				<SlotFillProvider>
+					<Popover.Slot />
+					<UnsavedChangesWarning />
+					<Routes>
+						<Layout />
+						<PluginArea onError={ onPluginAreaError } />
+					</Routes>
+				</SlotFillProvider>
+			</ShortcutProvider>
+		</StrictMode>
 	);
 }
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -9,7 +9,7 @@ import {
 	store as coreStore,
 	useResourcePermissions,
 } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { StrictMode, useMemo } from '@wordpress/element';
 import {
 	BlockEditorKeyboardShortcuts,
 	CopyHandler,
@@ -99,22 +99,26 @@ export default function WidgetAreasBlockEditorProvider( {
 	);
 
 	return (
-		<ShortcutProvider>
-			<BlockEditorKeyboardShortcuts.Register />
-			<KeyboardShortcuts.Register />
-			<SlotFillProvider>
-				<ExperimentalBlockEditorProvider
-					value={ blocks }
-					onInput={ onInput }
-					onChange={ onChange }
-					settings={ settings }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<CopyHandler>{ children }</CopyHandler>
-					<ReusableBlocksMenuItems rootClientId={ widgetAreaId } />
-				</ExperimentalBlockEditorProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<StrictMode>
+			<ShortcutProvider>
+				<BlockEditorKeyboardShortcuts.Register />
+				<KeyboardShortcuts.Register />
+				<SlotFillProvider>
+					<ExperimentalBlockEditorProvider
+						value={ blocks }
+						onInput={ onInput }
+						onChange={ onChange }
+						settings={ settings }
+						useSubRegistry={ false }
+						{ ...props }
+					>
+						<CopyHandler>{ children }</CopyHandler>
+						<ReusableBlocksMenuItems
+							rootClientId={ widgetAreaId }
+						/>
+					</ExperimentalBlockEditorProvider>
+				</SlotFillProvider>
+			</ShortcutProvider>
+		</StrictMode>
 	);
 }
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -262,6 +262,7 @@ test.describe( 'Widgets Customizer', () => {
 		await expect( firstParagraphBlock ).toBeFocused();
 
 		// Expect to focus on a already focused widget.
+		await paragraphWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar
 		await editParagraphWidget.click();
 		await expect( firstParagraphBlock ).toBeFocused();
 
@@ -272,6 +273,8 @@ test.describe( 'Widgets Customizer', () => {
 		const editHeadingWidget = headingWidget.locator(
 			'role=button[name="Click to edit this widget."i]'
 		);
+
+		await headingWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar
 		await editHeadingWidget.click();
 
 		const headingBlock = page.locator(
@@ -463,9 +466,9 @@ test.describe( 'Widgets Customizer', () => {
 		await page.keyboard.press( 'Escape' );
 		await expect(
 			page.locator(
-				'*[aria-live="polite"][aria-relevant="additions text"] >> text=/^You are currently in navigation mode./'
+				'css=.block-editor-block-list__layout.is-navigate-mode'
 			)
-		).toHaveCount( 1 );
+		).toBeVisible();
 		await expect( paragraphBlock ).toBeVisible();
 	} );