Update: Make block inspector self contain its styles (#17880)

WordPress · Oct 10, 2019 · 780860f · 780860f
1 parent afc287c
commit 780860f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -51,7 +51,7 @@ const BlockInspector = ( {
 	}
 
 	return (
-		<>
+		<div className="block-editor-block-inspector">
 			<BlockCard blockType={ blockType } />
 			{ hasBlockStyles && (
 				<div>
@@ -81,7 +81,7 @@ const BlockInspector = ( {
 				</InspectorAdvancedControls.Slot>
 			</div>
 			<SkipToSelectedBlock key="back" />
-		</>
+		</div>
 	);
 };
 

diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
@@ -1,3 +1,21 @@
+.block-editor-block-inspector {
+	.components-base-control {
+		margin-bottom: #{ $grid-size * 3 };
+
+		&:last-child {
+			margin-bottom: $grid-size;
+		}
+	}
+	.components-panel__body {
+		border: none;
+		border-top: $border-width solid $light-gray-500;
+	}
+
+	.block-editor-block-card {
+		padding: $grid-size-large;
+	}
+}
+
 .block-editor-block-inspector__no-blocks {
 	display: block;
 	font-size: $default-font-size;

diff --git a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js
@@ -37,7 +37,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await columnsBlockMenuItem.click();
 
 		// Tweak the columns count.
-		await page.focus( '.edit-post-settings-sidebar__panel-block .components-range-control__number[aria-label="Columns"]' );
+		await page.focus( '.block-editor-block-inspector .components-range-control__number[aria-label="Columns"]' );
 		await page.keyboard.down( 'Shift' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.up( 'Shift' );

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Panel, PanelBody } from '@wordpress/components';
+import { Panel } from '@wordpress/components';
 import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { BlockInspector } from '@wordpress/block-editor';
@@ -44,9 +44,7 @@ const SettingsSidebar = ( { sidebarName } ) => (
 				</>
 			) }
 			{ sidebarName === 'edit-post/block' && (
-				<PanelBody className="edit-post-settings-sidebar__panel-block">
-					<BlockInspector />
-				</PanelBody>
+				<BlockInspector />
 			) }
 		</Panel>
 	</Sidebar>

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/style.scss b/packages/edit-post/src/components/sidebar/settings-sidebar/style.scss
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -16,7 +16,6 @@
 @import "./components/sidebar/post-status/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
-@import "./components/sidebar/settings-sidebar/style.scss";
 @import "./components/sidebar/sidebar-header/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";