Move select toolbar to header

editor/header/index.js

@@ -1,12 +1,53 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { sprintf, _n, __ } from 'i18n';
+import { IconButton } from 'components';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import ModeSwitcher from './mode-switcher';
 import SavedState from './saved-state';
 import Tools from './tools';
+import { getSelectedBlocks } from '../selectors';
+
+function Header( { selectedBlocks, onRemove, onDeselect } ) {
+	const count = selectedBlocks.length;
+
+	if ( count ) {
+		return (
+			<header className="editor-header editor-header-multi-select">
+				<div className="editor-selected-count">
+					{ sprintf( _n( '%d block selected', '%d blocks selected', count ), count ) }
+				</div>
+				<div className="editor-selected-delete">
+					<IconButton
+						icon="trash"
+						label={ __( 'Delete selected blocks' ) }
+						onClick={ () => onRemove( selectedBlocks ) }
+						focus={ true }
+					>
+						{ __( 'Delete' ) }
+					</IconButton>
+				</div>
+				<div className="editor-selected-clear">
+					<IconButton
+						icon="no"
+						label={ __( 'Clear selected blocks' ) }
+						onClick={ () => onDeselect() }
+					/>
+				</div>
+			</header>
+		);
+	}
 
-function Header() {
 	return (
 		<header className="editor-header">
 			<ModeSwitcher />
@@ -16,4 +57,17 @@ function Header() {
 	);
 }
 
-export default Header;
+export default connect(
+	( state ) => ( {
+		selectedBlocks: getSelectedBlocks( state ),
+	} ),
+	( dispatch ) => ( {
+		onDeselect: () => dispatch( {
+			type: 'CLEAR_SELECTED_BLOCK',
+		} ),
+		onRemove: ( uids ) => dispatch( {
+			type: 'REMOVE_BLOCKS',
+			uids,
+		} ),
+	} )
+)( Header );

editor/header/style.scss

@@ -64,3 +64,18 @@
 	left: -$admin-sidebar-width-big;
 	right: $admin-sidebar-width-big;
 }
+
+.editor-header-multi-select {
+	background: $blue-medium-100;
+	border-bottom: 1px solid $blue-medium-200;
+}
+
+.editor-selected-count {
+	padding-right: $item-spacing;
+	color: $dark-gray-500;
+	border-right: 1px solid $light-gray-500;
+}
+
+.editor-selected-clear {
+	margin: 0 0 0 auto;
+}

editor/modes/visual-editor/block.js

@@ -256,19 +256,6 @@ class VisualEditorBlock extends wp.element.Component {
 				{ isFirstSelected && (
 					<BlockMover uids={ selectedBlocks } />
 				) }
-				{ isFirstSelected && (
-					<div className="editor-visual-editor__block-controls">
-						<Toolbar
-							controls={ [ {
-								icon: 'trash',
-								title: '',
-								onClick: () => this.props.onRemove( selectedBlocks ),
-								isActive: false,
-							} ] }
-							focus={ true }
-						/>
-					</div>
-				) }
 				<div
 					onKeyPress={ this.maybeStartTyping }
 					onFocus={ onSelect }