diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js index c9da21817103d..e4714d1287a40 100644 --- 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( { diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js index d9c7a985c011f..9e8870fb2b489 100644 --- 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,4 +78,12 @@ 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; + } + } `;