diff --git a/packages/customize-widgets/src/components/focus-control/index.js b/packages/customize-widgets/src/components/focus-control/index.js
index b449edb651137c..682f3b2a20b662 100644
--- 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
index 8ec1447306d2de..29e7e91186b17d 100644
--- 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(
- ,
- container
+ createRoot( container ).render(
+
+
+
);
} );
}
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 03620a5021b4a2..093bfce4bc3b34 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index 479aebf0d5361e..7f355aee2a39e5 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
}
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
index 917899d7dd99be..988e558db80a1f 100644
--- 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 (
-
-
-
-
-
- { children }
-
-
-
-
+
+
+
+
+
+
+ { children }
+
+
+
+
+
);
}
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 776770fecbefe4..01b6cf7e13ea70 100644
--- 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();
} );