diff --git a/components/popover/style.scss b/components/popover/style.scss index 3c01adcbf26379..51537e03dcae60 100644 --- a/components/popover/style.scss +++ b/components/popover/style.scss @@ -8,7 +8,7 @@ right: 0; @include break-medium { - width: 280px; + width: 300px; left: -122px; right: auto; height: auto; diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 4f33cb775ce62f..50c4b1896453d1 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -6,6 +6,8 @@ $z-layers: ( '.editor-visual-editor__block-controls': 1, '.components-form-toggle__input': 1, '.editor-format-list__menu': 1, + '.editor-inserter__tabs': 1, + '.editor-inserter__tab.is-active': 1, '.editor-sidebar': 19, '.editor-header': 20, '.editor-post-visibility__dialog': 30, diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 7a75ee4e07b64f..22b91ba459b25f 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -26,6 +26,7 @@ class InserterMenu extends Component { this.state = { filterValue: '', currentFocus: 'search', + tab: 'recent', }; this.filter = this.filter.bind( this ); this.isShownBlock = this.isShownBlock.bind( this ); @@ -224,6 +225,28 @@ class InserterMenu extends Component { this.changeMenuSelection( 'search' ); } + getBlockItem( block ) { + return ( + + ); + } + + switchTab( tab ) { + this.setState( { tab: tab } ); + } + render() { const { position, instanceId } = this.props; const visibleBlocksByCategory = this.getVisibleBlocksByCategory( getBlockTypes() ); @@ -246,42 +269,78 @@ class InserterMenu extends Component { tabIndex="-1" />
- { getCategories() - .map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && ( -
- - ) ) + ) ) }
+
+ + + +
); /* eslint-enable jsx-a11y/no-autofocus */ diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index 4596d96815f0fc..70a719f2571220 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -36,8 +36,7 @@ height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } ); @include break-medium { - height: auto; - max-height: 50vh; + height: 240px; } overflow: auto; @@ -54,7 +53,7 @@ input[type="search"].editor-inserter__search { margin: 0; box-shadow: none; border: 1px solid transparent; - border-top: 1px solid $light-gray-500; + border-bottom: 1px solid $light-gray-500; padding: 8px 11px; font-size: 13px; position: relative; @@ -69,11 +68,11 @@ input[type="search"].editor-inserter__search { .editor-inserter__category-blocks { display: flex; flex-flow: row wrap; - padding: 4px; + padding: 8px; } .editor-inserter__menu.is-bottom:after { - border-bottom-color: $light-gray-100; + border-bottom-color: $white; } .editor-inserter__block { @@ -82,7 +81,7 @@ input[type="search"].editor-inserter__search { font-size: 12px; color: $dark-gray-500; margin: 0; - padding: 8px; + padding: 12px 6px; align-items: center; cursor: pointer; border: none; @@ -111,11 +110,40 @@ input[type="search"].editor-inserter__search { .editor-inserter__separator { display: block; margin: 0; - padding: 4px 12px; - font-size: 11px; + padding: 12px 14px 0 14px; + font-size: $default-font-size; font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - background: $light-gray-100; - border-bottom: 1px solid $light-gray-500; +} + +.editor-inserter__tabs { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + z-index: z-index( '.editor-inserter__tabs' ); +} + +.editor-inserter__tab { + background: $light-gray-300; + border: none; + border-bottom: 2px solid transparent; + border-top: 2px solid transparent; + box-shadow: 0 0 0 1px $light-gray-500; + font-size: $default-font; + padding: 8px 8px; + width: 100%; + margin: 0; + color: $dark-gray-500; + + &.is-active { + background: $white; + border-bottom-color: $blue-medium-500; + position: relative; + z-index: z-index( '.editor-inserter__tab.is-active' ); + } + + &:focus { + box-shadow: $button-focus-style; + outline: none; + } }