diff --git a/editor/header/index.js b/editor/header/index.js index e2b1070c6a4d3b..ec60075fae70be 100644 --- a/editor/header/index.js +++ b/editor/header/index.js @@ -1,3 +1,14 @@ +/** + * External dependencies + */ +import { connect } from 'react-redux'; + +/** + * WordPress dependencies + */ +import { sprintf, _n, __ } from 'i18n'; +import { IconButton } from 'components'; + /** * Internal dependencies */ @@ -5,8 +16,38 @@ 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 ( +
+
+ { sprintf( _n( '%d block selected', '%d blocks selected', count ), count ) } +
+
+ onRemove( selectedBlocks ) } + focus={ true } + > + { __( 'Delete' ) } + +
+
+ onDeselect() } + /> +
+
+ ); + } -function Header() { return (
@@ -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 ); diff --git a/editor/header/style.scss b/editor/header/style.scss index 9db80f395b3e54..3d60028847719e 100644 --- a/editor/header/style.scss +++ b/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; +} diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index e6488659a6a9b8..1bba881de5602b 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -256,19 +256,6 @@ class VisualEditorBlock extends wp.element.Component { { isFirstSelected && ( ) } - { isFirstSelected && ( -
- this.props.onRemove( selectedBlocks ), - isActive: false, - } ] } - focus={ true } - /> -
- ) }