diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index 35d731881b567..33a3bbc27e29a 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -1,22 +1,16 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/compose';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import SidebarHeader from '../sidebar-header';
-const SettingsHeader = ( { count, openDocumentSettings, openBlockSettings, sidebarName } ) => {
- // Do not display "0 Blocks".
- const blockCount = count === 0 ? 1 : count;
- const blockLabel = blockCount === 1 ?
- __( 'Block' ) :
- sprintf( _n( '%d Block', '%d Blocks', blockCount ), blockCount );
-
+const SettingsHeader = ( { openDocumentSettings, openBlockSettings, sidebarName } ) => {
+ const blockLabel = __( 'Block' );
const [ documentAriaLabel, documentActiveClass ] = sidebarName === 'edit-post/document' ?
// translators: ARIA label for the Document Settings sidebar tab, selected.
[ __( 'Document settings (selected)' ), 'is-active' ] :
@@ -61,21 +55,16 @@ const SettingsHeader = ( { count, openDocumentSettings, openBlockSettings, sideb
);
};
-export default compose(
- withSelect( ( select ) => ( {
- count: select( 'core/editor' ).getSelectedBlockCount(),
- } ) ),
- withDispatch( ( dispatch ) => {
- const { openGeneralSidebar } = dispatch( 'core/edit-post' );
- const { clearSelectedBlock } = dispatch( 'core/editor' );
- return {
- openDocumentSettings() {
- openGeneralSidebar( 'edit-post/document' );
- clearSelectedBlock();
- },
- openBlockSettings() {
- openGeneralSidebar( 'edit-post/block' );
- },
- };
- } ),
-)( SettingsHeader );
+export default withDispatch( ( dispatch ) => {
+ const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+ const { clearSelectedBlock } = dispatch( 'core/editor' );
+ return {
+ openDocumentSettings() {
+ openGeneralSidebar( 'edit-post/document' );
+ clearSelectedBlock();
+ },
+ openBlockSettings() {
+ openGeneralSidebar( 'edit-post/block' );
+ },
+ };
+} )( SettingsHeader );
diff --git a/packages/editor/src/components/block-inspector/index.js b/packages/editor/src/components/block-inspector/index.js
index 1a515efa20bda..737b0863cbc2e 100644
--- a/packages/editor/src/components/block-inspector/index.js
+++ b/packages/editor/src/components/block-inspector/index.js
@@ -20,10 +20,11 @@ import BlockIcon from '../block-icon';
import InspectorControls from '../inspector-controls';
import InspectorAdvancedControls from '../inspector-advanced-controls';
import BlockStyles from '../block-styles';
+import MultiSelectionInspector from '../multi-selection-inspector';
const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType, count, hasBlockStyles } ) => {
if ( count > 1 ) {
- return { __( 'Coming Soon' ) };
+ return ;
}
const isSelectedBlockUnregistered = selectedBlockName === getUnregisteredTypeHandlerName();
diff --git a/packages/editor/src/components/block-inspector/style.scss b/packages/editor/src/components/block-inspector/style.scss
index ce9497de9ef65..e238a08561684 100644
--- a/packages/editor/src/components/block-inspector/style.scss
+++ b/packages/editor/src/components/block-inspector/style.scss
@@ -1,5 +1,4 @@
-.editor-block-inspector__no-blocks,
-.editor-block-inspector__multi-blocks {
+.editor-block-inspector__no-blocks {
display: block;
font-size: $default-font-size;
background: $white;
@@ -7,9 +6,6 @@
text-align: center;
}
-.editor-block-inspector__multi-blocks {
- border-bottom: $border-width solid $light-gray-500;
-}
.editor-block-inspector__card {
display: flex;
diff --git a/packages/editor/src/components/multi-selection-inspector/index.js b/packages/editor/src/components/multi-selection-inspector/index.js
new file mode 100644
index 0000000000000..3b569f86495df
--- /dev/null
+++ b/packages/editor/src/components/multi-selection-inspector/index.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
+import { count as wordCount } from '@wordpress/wordcount';
+import {
+ Path,
+ SVG,
+} from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function MultiSelectionInspector( { blocks } ) {
+ return (
+
+
+ } showColors />
+
+
+ { sprintf( __( '%d blocks' ), blocks.length ) }
+
+
+ { sprintf( __( '%d words.' ), wordCount( serialize( blocks ), 'words' ) ) }
+
+
+
+ );
+}
+
+export default withSelect( ( select ) => {
+ const { getMultiSelectedBlocks } = select( 'core/editor' );
+ return {
+ blocks: getMultiSelectedBlocks(),
+ };
+} )( MultiSelectionInspector );
diff --git a/packages/editor/src/components/multi-selection-inspector/style.scss b/packages/editor/src/components/multi-selection-inspector/style.scss
new file mode 100644
index 0000000000000..36023adaef78d
--- /dev/null
+++ b/packages/editor/src/components/multi-selection-inspector/style.scss
@@ -0,0 +1,27 @@
+.editor-multi-selection-inspector__card {
+ display: flex;
+ align-items: flex-start;
+ margin: -16px;
+ padding: 16px;
+}
+
+.editor-multi-selection-inspector__card-content {
+ flex-grow: 1;
+}
+
+.editor-multi-selection-inspector__card-title {
+ font-weight: 500;
+ margin-bottom: 5px;
+}
+
+.editor-multi-selection-inspector__card-description {
+ font-size: $default-font-size;
+}
+
+.editor-multi-selection-inspector__card .editor-block-icon {
+ margin-left: -2px;
+ margin-right: 10px;
+ padding: 0 3px;
+ width: $icon-button-size;
+ height: $icon-button-size-small;
+}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 972322a31a8b6..5b79e1b52407a 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -23,6 +23,7 @@
@import "./components/inserter/style.scss";
@import "./components/inserter-list-item/style.scss";
@import "./components/media-placeholder/style.scss";
+@import "./components/multi-selection-inspector/style.scss";
@import "./components/page-attributes/style.scss";
@import "./components/panel-color-settings/style.scss";
@import "./components/plain-text/style.scss";