Fix: Widgets screen block toolbar overlaps the Block accordion (#16765)

WordPress · Aug 5, 2019 · 71db908 · 71db908
1 parent 1fcc646
commit 71db908
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -8,6 +8,7 @@ import {
 	sortBy,
 	throttle,
 } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -191,6 +192,7 @@ class BlockList extends Component {
 
 	render() {
 		const {
+			className,
 			blockClientIds,
 			rootClientId,
 			isDraggable,
@@ -202,7 +204,12 @@ class BlockList extends Component {
 		} = this.props;
 
 		return (
-			<div className="editor-block-list__layout block-editor-block-list__layout">
+			<div className={
+				classnames(
+					'editor-block-list__layout block-editor-block-list__layout',
+					className
+				)
+			}>
 				{ blockClientIds.map( ( clientId ) => {
 					const isBlockInSelection = hasMultiSelection ?
 						multiSelectedBlockClientIds.includes( clientId ) :

diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js
@@ -84,7 +84,9 @@ function WidgetArea( {
 					</Sidebar.Inspector>
 					<WritingFlow>
 						<ObserveTyping>
-							<BlockList />
+							<BlockList
+								className="edit-widgets-main-block-list"
+							/>
 						</ObserveTyping>
 					</WritingFlow>
 				</BlockEditorProvider>

diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss
@@ -2,3 +2,6 @@
 	max-width: $content-width;
 	margin: 0 auto 30px;
 }
+.edit-widgets-main-block-list {
+	padding-top: $block-toolbar-height + 2 * $grid-size;
+}