Setting block-inspector as the context for the block styles slot si…

…nce that's where the fill originates from. Adding the block styles slot to the widget editor so we can preview block styles in /wp-admin/widgets.php
WordPress · Nov 30, 2021 · 8142c8e · 8142c8e
1 parent a295829
commit 8142c8e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -120,7 +120,7 @@ const BlockInspectorSingleBlock = ( {
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
 						<BlockStyles
-							scope="core/edit-post"
+							scope="core/block-inspector"
 							clientId={ clientId }
 							className="block-inspector__block-styles"
 						/>

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -239,7 +239,7 @@ function Layout( { styles } ) {
 						{ isMobileViewport && sidebarIsOpened && (
 							<ScrollLock />
 						) }
-						<BlockStyles.Slot scope="core/edit-post" />
+						<BlockStyles.Slot scope="core/block-inspector" />
 					</>
 				}
 				footer={

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -94,9 +94,12 @@ function Interface( { blockEditorSettings } ) {
 				)
 			}
 			content={
-				<WidgetAreasBlockEditorContent
-					blockEditorSettings={ blockEditorSettings }
-				/>
+				<>
+					<WidgetAreasBlockEditorContent
+						blockEditorSettings={ blockEditorSettings }
+					/>
+					<BlockStyles.Slot scope="core/block-inspector" />
+				</>
 			}
 			footer={
 				hasBlockBreadCrumbsEnabled &&