Add a minimal multi-selection block panel (#12050)

* Add a minimal multi-selection block panel

* Polish a little bit.

* Address feedback.

* Add missing style for icon.

* Change the block tab.

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 );

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 <span className="editor-block-inspector__multi-blocks">{ __( 'Coming Soon' ) }</span>;
+		return <MultiSelectionInspector />;
 	}
 
 	const isSelectedBlockUnregistered = selectedBlockName === getUnregisteredTypeHandlerName();

packages/editor/src/components/block-inspector/style.scss

@@ -1,15 +1,11 @@
-.editor-block-inspector__no-blocks,
-.editor-block-inspector__multi-blocks {
+.editor-block-inspector__no-blocks {
 	display: block;
 	font-size: $default-font-size;
 	background: $white;
 	padding: ($panel-padding * 2) $panel-padding;
 	text-align: center;
 }
 
-.editor-block-inspector__multi-blocks {
-	border-bottom: $border-width solid $light-gray-500;
-}
 
 .editor-block-inspector__card {
 	display: flex;

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 (
+		<div className="editor-multi-selection-inspector__card">
+			<BlockIcon icon={
+				<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" /></SVG>
+			} showColors />
+			<div className="editor-multi-selection-inspector__card-content">
+				<div className="editor-multi-selection-inspector__card-title">
+					{ sprintf( __( '%d blocks' ), blocks.length ) }
+				</div>
+				<div className="editor-multi-selection-inspector__card-description">
+					{ sprintf( __( '%d words.' ), wordCount( serialize( blocks ), 'words' ) ) }
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default withSelect( ( select ) => {
+	const { getMultiSelectedBlocks } = select( 'core/editor' );
+	return {
+		blocks: getMultiSelectedBlocks(),
+	};
+} )( MultiSelectionInspector );

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;
+}

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";