diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 2181b17c95c205..f3fa8d1e7df04b 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -222,24 +222,45 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__category-tablist { - &::before { - background-color: var(--wp-admin-theme-color) !important; - opacity: 0.04; + display: flex; + flex-direction: column; + border: none; + margin-bottom: $grid-unit-10; + // Push the listitem wrapping the "explore" button to the bottom of the panel. + div[role="listitem"]:last-child { + margin-top: auto; } - margin-bottom: $grid-unit-10; + // Temporarily disable the component's indicator animation. + // TODO: remove in favor of using the native component's styles and behavior, + // see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582 + &[aria-orientation="vertical"]::after { + content: none; + } .block-editor-inserter__category-tab { - // Account for the icon on the right so that it's visually balanced. - // TODO: this is a style override, either the design or the component should - // be updated (e.g. by adding a variant). padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15; + text-align: left; font-weight: inherit; + display: block; + position: relative; + height: auto; &[aria-selected="true"] { color: var(--wp-admin-theme-color); - fill: currentColor; + + .components-flex-item { + filter: brightness(0.95); + } + + svg { + fill: var(--wp-admin-theme-color); + } + } + + &::before { + display: none; } } }