Edit Widgets: Fix broken layout (#54372)

* Edit Widgets: Fix broken layout * Add copy handler
WordPress · Sep 12, 2023 · 3714c11 · 3714c11
1 parent cc3512d
commit 3714c11
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -4,7 +4,9 @@
 import {
 	BlockList,
 	BlockTools,
-	privateApis as blockEditorPrivateApis,
+	BlockSelectionClearer,
+	WritingFlow,
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
@@ -15,11 +17,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import Notices from '../notices';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import { unlock } from '../../lock-unlock';
-
-const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
-	blockEditorPrivateApis
-);
 
 export default function WidgetAreasBlockEditorContent( {
 	blockEditorSettings,
@@ -42,13 +39,15 @@ export default function WidgetAreasBlockEditorContent( {
 			<Notices />
 			<BlockTools>
 				<KeyboardShortcuts />
-				<BlockCanvas
-					shouldIframe={ false }
+				<EditorStyles
 					styles={ styles }
-					height="100%"
-				>
-					<BlockList className="edit-widgets-main-block-list" />
-				</BlockCanvas>
+					scope=".editor-styles-wrapper"
+				/>
+				<BlockSelectionClearer>
+					<WritingFlow>
+						<BlockList className="edit-widgets-main-block-list" />
+					</WritingFlow>
+				</BlockSelectionClearer>
 			</BlockTools>
 		</div>
 	);

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
@@ -11,8 +11,7 @@
 	flex-grow: 1;
 
 	> div:last-of-type,
-	.block-editor-writing-flow,
-	.block-editor-writing-flow > div {
+	.block-editor-writing-flow {
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;

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
@@ -10,7 +10,10 @@ import {
 	useResourcePermissions,
 } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	CopyHandler,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -104,7 +107,7 @@ export default function WidgetAreasBlockEditorProvider( {
 				useSubRegistry={ false }
 				{ ...props }
 			>
-				{ children }
+				<CopyHandler>{ children }</CopyHandler>
 				<PatternsMenuItems rootClientId={ widgetAreaId } />
 			</ExperimentalBlockEditorProvider>
 		</SlotFillProvider>