diff --git a/packages/customize-widgets/src/components/focus-control/index.js b/packages/customize-widgets/src/components/focus-control/index.js index b449edb651137..682f3b2a20b66 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 8ec1447306d2d..29e7e91186b17 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 03620a5021b4a..093bfce4bc3b3 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 479aebf0d5361..7f355aee2a39e 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 917899d7dd99b..988e558db80a1 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 776770fecbefe..01b6cf7e13ea7 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(); } );