diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index ff61da68ae832..7ddc2a31c1951 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -6,6 +6,7 @@ - `BlockInspector`: Fix browser warning error when block is not selected ([#46875](https://github.com/WordPress/gutenberg/pull/46875)). - Move component styles needed for iframes to content styles ([#47103](https://github.com/WordPress/gutenberg/pull/47103)). +- Block Inserter: Correctly apply style to the default inserter ([#47166](https://github.com/WordPress/gutenberg/pull/47166)). ## 11.1.0 (2023-01-02) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 4bb2e07fcabb0..099bf14987dcb 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -59,7 +59,6 @@ // Sibling inserter / "inbetweenserter". .block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender, .block-editor-block-list__insertion-point-inserter { .block-editor-inserter__toggle.components-button.has-icon { // Basic look diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index ca93381349c0c..9eecf9a7e007a 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -30,6 +30,23 @@ .components-drop-zone__content-icon { display: none; } + + .block-editor-inserter__toggle.components-button.has-icon { + // Basic look + background: $gray-900; + border-radius: $radius-block-ui; + color: $white; + padding: 0; + + // Special dimensions for this button. + min-width: $button-size-small; + height: $button-size-small; + + &:hover { + color: $white; + background: var(--wp-admin-theme-color); + } + } } // The black plus that shows up on the right side of an empty paragraph block, or the initial appender @@ -78,6 +95,7 @@ box-shadow: none; height: $button-size-small; width: $button-size-small; + min-width: $button-size-small; // Hide by default, then we unhide it when the selected block is a direct ancestor. display: none;