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 ] && (
-
-
- { category.title }
+ { this.state.tab === 'recent' &&
+
+ { getCategories()
+ .map( ( category ) => category.slug === 'common' && !! visibleBlocksByCategory[ category.slug ] && (
+
+ { visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
+
+ ) )
+ }
+
+ }
+ { this.state.tab === 'blocks' &&
+ getCategories()
+ .map( ( category ) => category.slug !== 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
+
+
+ { category.title }
+
+
+ { visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
+
+ ) )
+ }
+ { this.state.tab === 'embeds' &&
+ getCategories()
+ .map( ( category ) => category.slug === 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
- { visibleBlocksByCategory[ category.slug ].map( ( block ) => (
-
- ) ) }
+ { visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
-
- ) )
+ ) )
}
+
+
+
+
+
);
/* 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;
+ }
}