diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss index 8e6f1905e2799a..6f200ba31144a6 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss +++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss @@ -3,11 +3,3 @@ // Appear over block placeholders, but under widgets page headings. z-index: 8; } - -.customize-control-sidebar_block_editor { - margin: 0 ( -$grid-unit-15 ) ( -$grid-unit-15 ) ( -$grid-unit-15 ); - padding: $grid-unit-15; - background: $white; - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #dcdcde; -} diff --git a/packages/customize-widgets/src/controls/sidebar-section.js b/packages/customize-widgets/src/controls/sidebar-section.js index 0e97130e0d114f..4d1b00ed716ed4 100644 --- a/packages/customize-widgets/src/controls/sidebar-section.js +++ b/packages/customize-widgets/src/controls/sidebar-section.js @@ -32,6 +32,9 @@ export default function getSidebarSection() { } ); customize.section.add( this.inspector ); + this.contentContainer[ 0 ].classList.add( + 'customize-widgets__sidebar-section' + ); } hasSubSectionOpened() { return this.inspector.expanded(); diff --git a/packages/customize-widgets/src/controls/style.scss b/packages/customize-widgets/src/controls/style.scss new file mode 100644 index 00000000000000..d30592205a6c17 --- /dev/null +++ b/packages/customize-widgets/src/controls/style.scss @@ -0,0 +1,6 @@ +// Adds a white background to the block based widget section. +// #customize-theme-controls id is required to add specificity. +#customize-theme-controls .customize-widgets__sidebar-section { + min-height: 100%; + background-color: $white; +} diff --git a/packages/customize-widgets/src/style.scss b/packages/customize-widgets/src/style.scss index be1dad99a50136..c75380757e8c10 100644 --- a/packages/customize-widgets/src/style.scss +++ b/packages/customize-widgets/src/style.scss @@ -2,3 +2,4 @@ @import "./components/block-inspector-button/style.scss"; @import "./components/header/style.scss"; @import "./components/inserter/style.scss"; +@import "./controls/style.scss";