diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index 6be31f49b5fbe1..07aad9dde34b6a 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -26,7 +26,6 @@ function InserterLibrary( __experimentalOnPatternCategorySelection, onSelect = noop, shouldFocusBlock = false, - onClose, }, ref ) { @@ -59,7 +58,6 @@ function InserterLibrary( __experimentalInitialCategory={ __experimentalInitialCategory } shouldFocusBlock={ shouldFocusBlock } ref={ ref } - onClose={ onClose } /> ); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ddaec9d15a34a9..a9e596f3f26a3c 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -47,7 +47,6 @@ function InserterMenu( __experimentalFilterValue = '', shouldFocusBlock = true, __experimentalOnPatternCategorySelection = NOOP, - onClose, __experimentalInitialTab, __experimentalInitialCategory, }, @@ -302,7 +301,6 @@ function InserterMenu( { inserterSearch } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 604268fb1fe431..133563dce05dfd 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -117,6 +117,8 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__tablist { width: 100%; + background-color: $gray-100; + border-bottom: $border-width solid $gray-300; button[role="tab"] { flex-grow: 1; diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index d3ce5d80993d3f..42054100d9dafd 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -1,13 +1,9 @@ /** * WordPress dependencies */ -import { - Button, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { forwardRef } from '@wordpress/element'; -import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -33,33 +29,23 @@ const mediaTab = { title: __( 'Media' ), }; -function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) { +function InserterTabs( { onSelect, children, selectedTab }, ref ) { const tabs = [ blocksTab, patternsTab, mediaTab ]; return (
-
-
+ + { tabs.map( ( tab ) => ( + + { tab.title } + + ) ) } + { tabs.map( ( tab ) => ( +
+ + { __( 'Insert' ) } + +
setIsInserterOpened( false ) } />
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss index e3564cbd03aafe..fbe0eef2a1f8b9 100644 --- a/packages/editor/src/components/inserter-sidebar/style.scss +++ b/packages/editor/src/components/inserter-sidebar/style.scss @@ -7,15 +7,26 @@ } .block-editor-inserter-sidebar__header { - border-bottom: $border-width solid $gray-300; - padding-right: $grid-unit-10; display: flex; justify-content: space-between; + padding: $grid-unit-05 $grid-unit-05 0 $grid-unit-20; + background-color: $gray-100; +} - .block-editor-inserter-sidebar__close-button { - order: 1; - align-self: center; - } +.block-editor-inserter-sidebar__header-title { + font-size: 12px; + font-weight: 500; + color: $gray-600; + text-transform: uppercase; + position: relative; + top: $grid-unit-10; +} + +.block-editor-inserter-sidebar__close-button { + background: transparent; + color: $gray-600; + position: relative; + z-index: 2; // allow the close button focus ring to be visible } .editor-inserter-sidebar__content { diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss index 0c71eb4c8550e6..54b391b96f8ed4 100644 --- a/packages/editor/src/components/list-view-sidebar/style.scss +++ b/packages/editor/src/components/list-view-sidebar/style.scss @@ -27,6 +27,8 @@ .editor-list-view-sidebar__close-button { background: transparent; color: $gray-600; + position: relative; + z-index: 2; // allow the close button focus ring to be visible } .editor-list-view-sidebar__tabs {