Added CharacterCount, WordCount, TimeToRead to info tab

n2erjo00 · Sep 30, 2023 · f46bd90 · f46bd90
1 parent 103cbee
commit f46bd90
Showing 1 changed file with 28 additions and 7 deletions.
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-info.js b/packages/edit-post/src/components/secondary-sidebar/list-view-info.js
@@ -6,6 +6,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalText as Text } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { CharacterCount, WordCount, TimeToRead } from '@wordpress/editor';
 
 export default function ListViewInfo() {
 	const { headingCount, paragraphCount, blockCount } = useSelect(
@@ -24,22 +25,42 @@ export default function ListViewInfo() {
 	);
 	return (
 		<div className="edit-post-editor__list-view-overview__container">
-			<p id={ instanceId }>{ __( 'Document info' ) }</p>
+			<p className="screen-reader-text" id={ instanceId }>
+				{ __( 'Document info' ) }
+			</p>
 			<ul
 				className="edit-post-editor__list-view-overview"
 				aria-describedby={ instanceId }
 			>
 				<li className="edit-post-editor__list-view-overview__item">
-					<Text>{ __( 'Headings:' ) }&nbsp;</Text>
-					<Text>{ headingCount }</Text>
+					<Text variant="muted">{ __( 'Characters' ) }&nbsp;</Text>
+					<Text size={ 16 }>
+						<CharacterCount />
+					</Text>
 				</li>
 				<li className="edit-post-editor__list-view-overview__item">
-					<Text>{ __( 'Paragraphs:' ) }&nbsp;</Text>
-					<Text>{ paragraphCount }</Text>
+					<Text variant="muted">{ __( 'Words' ) }&nbsp;</Text>
+					<Text size={ 16 }>
+						<WordCount />
+					</Text>
 				</li>
 				<li className="edit-post-editor__list-view-overview__item">
-					<Text>{ __( 'Blocks:' ) }&nbsp;</Text>
-					<Text>{ blockCount }</Text>
+					<Text variant="muted">{ __( 'Paragraphs' ) }&nbsp;</Text>
+					<Text size={ 16 }>{ paragraphCount }</Text>
+				</li>
+				<li className="edit-post-editor__list-view-overview__item">
+					<Text variant="muted">{ __( 'Headings' ) }&nbsp;</Text>
+					<Text size={ 16 }>{ headingCount }</Text>
+				</li>
+				<li className="edit-post-editor__list-view-overview__item">
+					<Text variant="muted">{ __( 'Time to read' ) }&nbsp;</Text>
+					<Text size={ 16 }>
+						<TimeToRead />
+					</Text>
+				</li>
+				<li className="edit-post-editor__list-view-overview__item">
+					<Text variant="muted">{ __( 'Blocks' ) }&nbsp;</Text>
+					<Text size={ 16 }>{ blockCount }</Text>
 				</li>
 			</ul>
 		</div>