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

WordPress · Oct 24, 2017 · a8ac513 · a8ac513
1 parent 653e555
commit a8ac513
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 106 deletions.
diff --git a/components/navigable-menu/index.js b/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 ) ||

diff --git a/editor/assets/stylesheets/_z-index.scss b/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,

diff --git a/editor/block-switcher/style.scss b/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 {

diff --git a/editor/block-toolbar/index.js b/editor/block-toolbar/index.js
@@ -1,15 +1,14 @@
 /**
  * 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';
 
 /**
  * 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';
 
@@ -27,11 +26,6 @@ import { isMac } from '../utils/dom';
  */
 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 );
 }
@@ -114,45 +108,38 @@ 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 && [
-							<BlockSwitcher key="switcher" uid={ uid } />,
-							<Slot key="slot" name="Formatting.Toolbar" />,
-						] }
-						<Toolbar className="editor-block-toolbar__mobile-tools">
-							<IconButton
-								className="editor-block-toolbar__mobile-toggle"
-								onClick={ this.toggleMobileControls }
-								aria-expanded={ showMobileControls }
-								label={ __( 'Toggle extra controls' ) }
-								icon="ellipsis"
-							/>
-
-							{ showMobileControls &&
-								<div className="editor-block-toolbar__mobile-tools-content">
-									<BlockMover uids={ [ uid ] } />
-									<BlockRightMenu uid={ uid } />
-								</div>
-							}
-						</Toolbar>
-					</div>
+					{ ! showMobileControls && [
+						<BlockSwitcher key="switcher" uid={ uid } />,
+						<Slot key="slot" name="Formatting.Toolbar" />,
+					] }
+					<Toolbar className="editor-block-toolbar__mobile-tools">
+						<IconButton
+							className="editor-block-toolbar__mobile-toggle"
+							onClick={ this.toggleMobileControls }
+							aria-expanded={ showMobileControls }
+							label={ __( 'Toggle extra controls' ) }
+							icon="ellipsis"
+						/>
+
+						{ showMobileControls &&
+							<div className="editor-block-toolbar__mobile-tools-content">
+								<BlockMover uids={ [ uid ] } />
+								<BlockRightMenu uids={ [ uid ] } />
+							</div>
+						}
+					</Toolbar>
 				</NavigableMenu>
-			</CSSTransitionGroup>
+			</Fill>
 		);
 	}
 }

diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss
@@ -1,64 +1,14 @@
-
 .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;
-}
-
 .editor-block-toolbar .editor-block-switcher {
 	display: inline-flex;
 }

diff --git a/editor/header/index.js b/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,7 @@ function Header( {
 					label={ __( 'Redo' ) }
 					disabled={ ! hasRedo }
 					onClick={ redo } />
+				<Slot name="Editor.Header" />
 			</div>
 			<div className="editor-header__settings">
 				<SavedState />

diff --git a/editor/modes/visual-editor/block.js b/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 && mode === 'visual' && <BlockToolbar uid={ block.uid } /> }
+				{ isSelected && isValid && mode === 'visual' && <BlockToolbar uid={ block.uid } /> }
 				{ isFirstMultiSelected && ! this.props.isSelecting &&
 					<BlockMover uids={ multiSelectedBlockUids } />
 				}