Inserter: add tabs. (#1582)

* Inserter: add tabs. - Recent, blocks, and embeds. - Displays different sets of blocks. Don't show category header for single category display. * Add bottom border to search item. * Polish the inserter tabs. Address feedback. * Relax paddings and margins. Also restyle the separator heading. * Fix neutral grays.
WordPress · Jun 29, 2017 · 339a20d · 339a20d
1 parent 2938c89
commit 339a20d
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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 (
+			<button
+				role="menuitem"
+				key={ block.name }
+				className="editor-inserter__block"
+				onClick={ this.selectBlock( block.name ) }
+				ref={ this.bindReferenceNode( block.name ) }
+				tabIndex="-1"
+				onMouseEnter={ this.props.showInsertionPoint }
+				onMouseLeave={ this.props.hideInsertionPoint }
+			>
+				<Dashicon icon={ block.icon } />
+				{ block.title }
+			</button>
+		);
+	}
+
+	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"
 				/>
 				<div role="menu" className="editor-inserter__content">
-					{ getCategories()
-						.map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && (
-							<div key={ category.slug }>
-								<div
-									className="editor-inserter__separator"
-									id={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
-									aria-hidden="true"
-								>
-									{ category.title }
+					{ this.state.tab === 'recent' &&
+						<div className="editor-inserter__recent">
+							{ getCategories()
+								.map( ( category ) => category.slug === 'common' && !! visibleBlocksByCategory[ category.slug ] && (
+									<div
+										className="editor-inserter__category-blocks"
+										role="menu"
+										tabIndex="0"
+										aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
+									>
+										{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
+									</div>
+								) )
+							}
+						</div>
+					}
+					{ this.state.tab === 'blocks' &&
+						getCategories()
+							.map( ( category ) => category.slug !== 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
+								<div key={ category.slug }>
+									<div
+										className="editor-inserter__separator"
+										id={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
+										aria-hidden="true"
+									>
+										{ category.title }
+									</div>
+									<div
+										className="editor-inserter__category-blocks"
+										role="menu"
+										tabIndex="0"
+										aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
+									>
+										{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
+									</div>
 								</div>
+							) )
+					}
+					{ this.state.tab === 'embeds' &&
+						getCategories()
+							.map( ( category ) => category.slug === 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
 								<div
 									className="editor-inserter__category-blocks"
 									role="menu"
 									tabIndex="0"
 									aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
 								>
-									{ visibleBlocksByCategory[ category.slug ].map( ( block ) => (
-										<button
-											role="menuitem"
-											key={ block.name }
-											className="editor-inserter__block"
-											onClick={ this.selectBlock( block.name ) }
-											ref={ this.bindReferenceNode( block.name ) }
-											tabIndex="-1"
-											onMouseEnter={ this.props.showInsertionPoint }
-											onMouseLeave={ this.props.hideInsertionPoint }
-										>
-											<Dashicon icon={ block.icon } />
-											{ block.title }
-										</button>
-									) ) }
+									{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
 								</div>
-							</div>
-						) )
+							) )
 					}
 				</div>
+				<div className="editor-inserter__tabs is-recent">
+					<button
+						className={ `editor-inserter__tab ${ this.state.tab === 'recent' ? 'is-active' : '' }` }
+						onClick={ () => this.switchTab( 'recent' ) }
+					>
+						{ __( 'Recent' ) }
+					</button>
+					<button
+						className={ `editor-inserter__tab ${ this.state.tab === 'blocks' ? 'is-active' : '' }` }
+						onClick={ () => this.switchTab( 'blocks' ) }
+					>
+						{ __( 'Blocks' ) }
+					</button>
+					<button
+						className={ `editor-inserter__tab ${ this.state.tab === 'embeds' ? 'is-active' : '' }` }
+						onClick={ () => this.switchTab( 'embeds' ) }
+					>
+						{ __( 'Embeds' ) }
+					</button>
+				</div>
 			</Popover>
 		);
 		/* eslint-enable jsx-a11y/no-autofocus */

diff --git 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;
+	}
 }