Fix layout when slot injects wrapping div inside tools panel

WordPress · Sep 15, 2021 · 959ed4b · 959ed4b
1 parent 115f8b5
commit 959ed4b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -34,6 +34,7 @@ export default function InspectorControlsSlot( {
 			<BlockSupportToolsPanel group={ group } label={ label }>
 				<BlockSupportSlotContainer
 					{ ...props }
+					className="components-tools-panel__items-wrapper"
 					bubblesVirtually={ bubblesVirtually }
 					Slot={ Slot }
 				/>

diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js
@@ -17,6 +17,23 @@ export const ToolsPanel = css`
 	margin-top: -1px;
 	padding: ${ space( 4 ) };
 	row-gap: ${ space( 6 ) };
+
+	/**
+	 * Items injected into a ToolsPanel via a virtual bubbling slot will require
+	 * an inner dom element to be injected. The following rule allows for the
+	 * CSS grid display to continue.
+	 */
+	.components-tools-panel__items-wrapper {
+		column-gap: ${ space( 4 ) };
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		row-gap: ${ space( 6 ) };
+		grid-column: span 2;
+
+		&:empty {
+			display: none;
+		}
+	}
 `;
 
 export const ToolsPanelHeader = css`
@@ -61,6 +78,14 @@ export const ToolsPanelItem = css`
 		margin-bottom: 0;
 		max-width: 100%;
 	}
+
+	& > .components-base-control:last-child {
+		margin-bottom: 0;
+
+		.components-base-control__field {
+			margin-bottom: 0;
+		}
+	}
 `;
 
 export const DropdownMenu = css`