@gechiui/block-editor/src/components/multi-selection-inspector/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { sprintf, _n } from '@gechiui/i18n';
import { withSelect } from '@gechiui/data';
import { serialize } from '@gechiui/blocks';
import { count as wordCount } from '@gechiui/wordcount';
import { stack } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import BlockIcon from '../block-icon';
import { store as blockEditorStore } from '../../store';

function MultiSelectionInspector( { blocks } ) {
	const words = wordCount( serialize( blocks ), 'words' );

	return (
		<div className="block-editor-multi-selection-inspector__card">
			<BlockIcon icon={ stack } showColors />
			<div className="block-editor-multi-selection-inspector__card-content">
				<div className="block-editor-multi-selection-inspector__card-title">
					{ sprintf(
						/* translators: %d: number of blocks */
						_n( '%d block', '%d blocks', blocks.length ),
						blocks.length
					) }
				</div>
				<div className="block-editor-multi-selection-inspector__card-description">
					{ sprintf(
						/* translators: %d: number of words */
						_n( '%d word', '%d words', words ),
						words
					) }
				</div>
			</div>
		</div>
	);
}

export default withSelect( ( select ) => {
	const { getMultiSelectedBlocks } = select( blockEditorStore );
	return {
		blocks: getMultiSelectedBlocks(),
	};
} )( MultiSelectionInspector );