diff --git a/components/tab-panel/index.js b/components/tab-panel/index.js index 0a32052d75df89..d3a3221e7cff42 100644 --- a/components/tab-panel/index.js +++ b/components/tab-panel/index.js @@ -64,12 +64,12 @@ class TabPanel extends Component { const selectedId = instanceId + '-' + selectedTab.name; return ( -
+
{ tabs.map( ( tab ) => ( { this.props.children( selectedTab.name ) }
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js index 4d6b9df6e0b145..737265a8e632ff 100644 --- a/editor/components/inserter/menu.js +++ b/editor/components/inserter/menu.js @@ -298,15 +298,14 @@ export class InserterMenu extends Component { ] } > { ( tabKey ) => ( -
this.tabContainer = ref } - className="editor-inserter__content"> +
this.tabContainer = ref }> { this.renderTabView( tabKey ) }
) } } { isSearching && -
+
{ this.renderCategories( this.getVisibleBlocksByCategory( getBlockTypes() ) ) }
} diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss index d0687ed5c441c7..deb835e931290e 100644 --- a/editor/components/inserter/style.scss +++ b/editor/components/inserter/style.scss @@ -27,13 +27,6 @@ } } -.editor-inserter__content { - flex-grow: 1; - - overflow: auto; - box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 ); -} - input[type="search"].editor-inserter__search { display: block; width: 100%; @@ -117,14 +110,32 @@ input[type="search"].editor-inserter__search { margin-top: -1px; // hide the first top border } +.editor-inserter__search-results { + flex-grow: 1; + overflow: auto; +} + .editor-inserter__tabs { - width: 100%; display: flex; - justify-content: space-between; - position: relative; - background: $light-gray-300; - border-bottom: 1px solid $light-gray-500; - flex-shrink: 0; + flex-direction: column; + height: 100%; + flex-grow: 1; + box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 ); + overflow: hidden; + + .components-tab-panel__tab-content { + overflow: auto; + } + + .components-tab-panel__tabs { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + background: $light-gray-300; + border-bottom: 1px solid $light-gray-500; + flex-shrink: 0; + } } .editor-inserter__tab {