Block Toolbar: Move the block toolbar to the editor's header

components/navigable-menu/index.js

@@ -26,6 +26,10 @@ class NavigableMenu extends Component {
 	}
 
 	onKeyDown( event ) {
+		if ( this.props.onKeyDown ) {
+			this.props.onKeyDown( event );
+		}
+
 		const { orientation = 'vertical', onNavigate = noop, deep = false } = this.props;
 		if (
 			( orientation === 'vertical' && [ UP, DOWN, TAB ].indexOf( event.keyCode ) === -1 ) ||

editor/assets/stylesheets/_variables.scss

@@ -50,6 +50,7 @@ $item-spacing: 10px;
 $panel-padding: 16px;
 $header-height: 56px;
 $inserter-tabs-height: 36px;
+$stacked-toolbar-height: 37px;
 $sidebar-width: 280px;
 $sidebar-panel-header-height: 50px;
 $admin-bar-height: 32px;

editor/assets/stylesheets/_z-index.scss

@@ -7,7 +7,6 @@ $z-layers: (
 	'.editor-visual-editor__block:before': -1,
 	'.editor-visual-editor__block .wp-block-more:before': -1,
 	'.editor-visual-editor__block {core/image aligned left or right}': 20,
-	'.editor-block-toolbar': 10,
 	'.editor-visual-editor__block-warning': 1,
 	'.editor-visual-editor__sibling-inserter': 1,
 	'.components-form-toggle__input': 1,

editor/assets/stylesheets/main.scss

@@ -4,24 +4,24 @@ body.gutenberg-editor-page {
 	#update-nag, .update-nag {
 		display: none;
 	}
-	
+
 	#wpcontent {
 		padding-left: 0;
 	}
-	
+
 	#wpbody-content {
 		padding-bottom: 0;
 	}
-	
+
 	#wpfooter {
 		display: none;
 	}
-	
+
 	.a11y-speak-region {
 		left: -1px;
 		top: -1px;
 	}
-	
+
 	svg {
 		fill: currentColor;
 	}
@@ -54,23 +54,26 @@ body.gutenberg-editor-page {
 
 .gutenberg__editor {
 	position: relative;
-	height: calc( 100vh - #{ $admin-bar-height-big } );
+	height: calc( 100vh - #{ $admin-bar-height-big} );
+	padding-top: $header-height + $stacked-toolbar-height;
 
+	// The WP header height changes at this breakpoint
 	@include break-medium {
 		height: calc( 100vh - #{ $admin-bar-height } );
 	}
 
+	// The block toolbar disappears at this breakpoint
+	@include break-large {
+		padding-top: $header-height;
+	}
+
 	img {
 		max-width: 100%;
 	}
 
 	iframe {
 		width: 100%;
 	}
-
-	@include break-small() {
-		padding-top: $header-height;
-	}
 }
 
 .editor-post-title,

editor/block-switcher/index.js

@@ -25,6 +25,10 @@ import { getBlock } from '../selectors';
 const { DOWN } = keycodes;
 
 function BlockSwitcher( { block, onTransform } ) {
+	if ( ! block ) {
+		return null;
+	}
+
 	const blockType = getBlockType( block.name );
 	const blocksToBeTransformedFrom = reduce( getBlockTypes(), ( memo, type ) => {
 		const transformFrom = get( type, 'transforms.from', [] );

editor/block-switcher/style.scss

@@ -1,15 +1,5 @@
 .editor-block-switcher {
 	position: relative;
-	background-color: $white;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	margin-right: -1px;
-	margin-bottom: -1px;
-
-	.components-toolbar {
-		height: 38px;
-	}
 }
 
 .editor-block-switcher__toggle {

editor/block-toolbar/index.js

@@ -1,16 +1,15 @@
 /**
  * External dependencies
  */
-import { Slot } from 'react-slot-fill';
-import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import { Slot, Fill } from 'react-slot-fill';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
 
 /**
  * WordPress Dependencies
  */
 import { IconButton, Toolbar, NavigableMenu } from '@wordpress/components';
-import { Component, Children, findDOMNode } from '@wordpress/element';
+import { Component, findDOMNode } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { focus, keycodes } from '@wordpress/utils';
 
@@ -31,11 +30,6 @@ import { getBlockMode } from '../selectors';
  */
 const { ESCAPE, F10 } = keycodes;
 
-function FirstChild( { children } ) {
-	const childrenArray = Children.toArray( children );
-	return childrenArray[ 0 ] || null;
-}
-
 function metaKeyPressed( event ) {
 	return isMac() ? event.metaKey : ( event.ctrlKey && ! event.altKey );
 }
@@ -118,51 +112,44 @@ class BlockToolbar extends Component {
 		} );
 
 		return (
-			<CSSTransitionGroup
-				transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }
-				transitionAppear={ true }
-				transitionAppearTimeout={ 100 }
-				transitionEnter={ false }
-				transitionLeave={ false }
-				component={ FirstChild }
-			>
+			<Fill name="Editor.Header">
 				<NavigableMenu
 					className={ toolbarClassname }
 					ref={ this.bindNode }
 					orientation="horizontal"
 					role="toolbar"
 					deep
+					onKeyDown={ this.onToolbarKeyDown }
+					aria-label={ __( 'Block\'s toolbar' ) }
 				>
-					<div className="editor-block-toolbar__group" onKeyDown={ this.onToolbarKeyDown }>
-						{ ! showMobileControls && mode === 'visual' && [
-							<BlockSwitcher key="switcher" uid={ uid } />,
-							<Slot key="slot" name="Formatting.Toolbar" />,
-						] }
-						<Toolbar className="editor-block-toolbar__mobile-tools">
-							<div>
-								{ mode === 'visual' &&
-									<IconButton
-										className="editor-block-toolbar__mobile-toggle"
-										onClick={ this.toggleMobileControls }
-										aria-expanded={ showMobileControls }
-										label={ __( 'Toggle extra controls' ) }
-										icon="ellipsis"
-									/>
-								}
-							</div>
-
-							{ ( mode === 'html' || showMobileControls ) &&
-								<div className="editor-block-toolbar__mobile-tools-content">
-									<BlockMover uids={ [ uid ] } />
-									<BlockInspectorButton small />
-									<BlockModeToggle uid={ uid } small />
-									<BlockDeleteButton uids={ [ uid ] } small />
-								</div>
+					{ ! showMobileControls && mode === 'visual' && [
+						<BlockSwitcher key="switcher" uid={ uid } />,
+						<Slot key="slot" name="Formatting.Toolbar" />,
+					] }
+					<Toolbar className="editor-block-toolbar__mobile-tools">
+						<div>
+							{ mode === 'visual' &&
+								<IconButton
+									className="editor-block-toolbar__mobile-toggle"
+									onClick={ this.toggleMobileControls }
+									aria-expanded={ showMobileControls }
+									label={ __( 'Toggle extra controls' ) }
+									icon="ellipsis"
+								/>
 							}
-						</Toolbar>
-					</div>
+						</div>
+
+						{ ( mode === 'html' || showMobileControls ) &&
+							<div className="editor-block-toolbar__mobile-tools-content">
+								<BlockMover uids={ [ uid ] } />
+								<BlockInspectorButton small />
+								<BlockModeToggle uid={ uid } small />
+								<BlockDeleteButton uids={ [ uid ] } small />
+							</div>
+						}
+					</Toolbar>
 				</NavigableMenu>
-			</CSSTransitionGroup>
+			</Fill>
 		);
 	}
 }

editor/block-toolbar/style.scss

@@ -1,62 +1,17 @@
-
 .editor-block-toolbar {
-	display: flex;
-	position: sticky;
-	z-index: z-index( '.editor-block-toolbar' );
-	margin-top: -$block-controls-height - $item-spacing;
-	margin-bottom: $item-spacing + 20px;	// 20px is the offset from the bottom of the selected block where it stops sticking
-	white-space: nowrap;
-	height: $block-controls-height;
-
-	// Mobile viewport
-	top: $header-height - 1px;
-	margin-left: -$block-padding;
-	margin-right: -$block-padding;
-
-	// Allow this invisible layer to be clicked through.
-	pointer-events: none;
-
-	// Reset pointer-events on children.
-	& > * {
-		pointer-events: auto;
-	}
-
-	// Larger viewports
-	@include break-small() {
-		margin-left: 0;
-	}
-
-	@include break-medium() {
-		top: $item-spacing;
-	}
-
-	&.is-appearing-active {
-		@include animate_fade;
-	}
-}
-
-.editor-block-toolbar__group {
 	display: inline-flex;
-	box-shadow: $shadow-toolbar;
-	width: 100%;
-	background: $white;
-	overflow: auto;	// allow horizontal scrolling on mobile
+	overflow: auto; // allow horizontal scrolling on mobile
+	flex-grow: 1;
 
-	@include break-small() {
-		width: auto;
-		overflow: hidden;
+	.components-toolbar {
+		border: none;
+		border-left: 1px solid $light-gray-500;
 	}
-}
 
-$sticky-bottom-offset: 20px;
-.editor-block-toolbar + div {
-	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset
- 	margin-top: -$sticky-bottom-offset - 1px;
-	padding-top: 1px;
- }
-
-.editor-block-toolbar .components-toolbar {
-	margin-right: -1px;
+	// this should probably have its own class
+	> div:not( .editor-block-toolbar__mobile-tools ) {
+		display: flex;
+	}
 }
 
 .editor-block-toolbar .editor-block-switcher {

editor/header/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { Slot } from 'react-slot-fill';
 
 /**
  * WordPress dependencies
@@ -47,6 +48,9 @@ function Header( {
 					label={ __( 'Redo' ) }
 					disabled={ ! hasRedo }
 					onClick={ redo } />
+				<div className="editor-header__block-toolbar">
+					<Slot name="Editor.Header" />
+				</div>
 			</div>
 			<div className="editor-header__settings">
 				<SavedState />

editor/header/style.scss

@@ -11,13 +11,8 @@
 	left: 0;
 	right: 0;
 
-	top: 0;
-	position: sticky;
-
-	@include break-small() {
-		top: $admin-bar-height-big;
-		position: fixed;
-	}
+	top: $admin-bar-height-big;
+	position: fixed;
 
 	@include break-medium() {
 		top: $admin-bar-height;
@@ -127,3 +122,41 @@
 		}
 	}
 }
+
+
+.editor-header__block-toolbar {
+	// stacked toolbar
+	position: absolute;
+	top: $header-height;
+	left: 0;
+	right: 0;
+	background: $white;
+	border-bottom: 1px solid $light-gray-500;
+	min-height: $stacked-toolbar-height;
+
+	.is-sidebar-opened & {
+		display: none;
+	}
+
+	@include break-medium {
+		.is-sidebar-opened & {
+			display: block;
+			right: $sidebar-width;
+		}
+	}
+
+	// merge toolbars after this breakpoint
+	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+		padding-left: $item-spacing;
+		position: static;
+		left: auto;
+		right: auto;
+		background: none;
+		border-bottom: none;
+		min-height: auto;
+
+		.is-sidebar-opened & {
+			right: auto;
+		}
+	}
+}

editor/layout/style.scss

@@ -10,11 +10,6 @@
 .editor-layout__content {
 	display: flex;
 	flex-direction: column;
-	margin-top: #{ -1 * $header-height };
-
-	@include break-medium {
-		margin-top: 0;
-	}
 }
 
 .editor-layout__editor {

editor/modes/visual-editor/block.js

@@ -350,7 +350,7 @@ class VisualEditorBlock extends Component {
 				<BlockDropZone index={ order } />
 				{ ( showUI || isProperlyHovered ) && <BlockMover uids={ [ block.uid ] } /> }
 				{ ( showUI || isProperlyHovered ) && <BlockRightMenu uids={ [ block.uid ] } /> }
-				{ showUI && isValid && <BlockToolbar uid={ block.uid } /> }
+				{ isSelected && isValid && <BlockToolbar uid={ block.uid } /> }
 				{ isFirstMultiSelected && ! this.props.isSelecting &&
 					<BlockMover uids={ multiSelectedBlockUids } />
 				}