Add character count to info panel (WordPress#24823)

packages/editor/src/components/character-count/index.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { count as characterCount } from '@wordpress/wordcount';
+
+export default function CharacterCount() {
+	const content = useSelect( ( select ) =>
+		select( 'core/editor' ).getEditedPostAttribute( 'content' )
+	);
+
+	return characterCount( content, 'characters_including_spaces' );
+}

packages/editor/src/components/table-of-contents/panel.js

@@ -9,6 +9,7 @@ import { useSelect } from '@wordpress/data';
  */
 import WordCount from '../word-count';
 import DocumentOutline from '../document-outline';
+import CharacterCount from '../character-count';
 
 function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) {
 	const { headingCount, paragraphCount, numberOfBlocks } = useSelect(
@@ -36,6 +37,12 @@ function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) {
 				tabIndex="0"
 			>
 				<ul role="list" className="table-of-contents__counts">
+					<li className="table-of-contents__count">
+						{ __( 'Characters' ) }
+						<span className="table-of-contents__number">
+							<CharacterCount />
+						</span>
+					</li>
 					<li className="table-of-contents__count">
 						{ __( 'Words' ) }
 						<WordCount />

packages/editor/src/components/table-of-contents/style.scss

@@ -38,6 +38,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	margin: 0;
+	margin-top: -$grid-unit-10;
 }
 
 .table-of-contents__count {
@@ -48,8 +49,9 @@
 	color: $dark-gray-300;
 	padding-right: $grid-unit-10;
 	margin-bottom: 0;
+	margin-top: $grid-unit-10;
 
-	&:last-child {
+	&:nth-child(4n) {
 		padding-right: 0;
 	}
 }