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 35d731881b5673..33a3bbc27e29ab 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 1a515efa20bda4..737b0863cbc2ef 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 ce9497de9ef65b..e238a085616846 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 00000000000000..3b569f86495dfa --- /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 00000000000000..36023adaef78d5 --- /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 972322a31a8b6c..5b79e1b52407ac 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";