Add character count to info panel

[david-szabo97]

Description

Closes: #24538
Adds "Characters" count to the document information panel.

How has this been tested?

1. Edit an existing post or create a new one
2. Type a few words
3. Click on the (i) icon
4. See "Characters" count

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[david-szabo97]

I think this would be a great addition to writers. I'm still not sure about the design. Any idea to improve on that?
I tried to fit it all on one line but that would make the popover too wide.

Maybe we should opt for a vertical list instead? Something like this:

[ockham]

Adding @jasmussen and @shaunandrews as (design) reviewers 👋

[shaunandrews]

I think the easiest thing we could do is make the popover wider when there's room:

A list view could be interesting. I do find it a little easier to scan.

[david-szabo97]

I like the list view!

@ockham Should we discuss the list view in another PR? We can get this merged as-is then implement the list view in another PR and see what others think about it.

[ockham]

I like the list view!

@ockham Should we discuss the list view in another PR? We can get this merged as-is then implement the list view in another PR and see what others think about it.

Sounds good!

[aristath]

This may sound like a silly question, but... what is the use of this?
Not trying to be sarcastic btw or anything like that, this is a genuine question from someone who doesn't understand. Other than bragging rights about the number of characters someone typed, does it have an actual use?

[ockham]

This may sound like a silly question, but... what is the use of this?
Not trying to be sarcastic btw or anything like that, this is a genuine question from someone who doesn't understand. Other than bragging rights about the number of characters someone typed, does it have an actual use?

The issue that this PR addresses (#24538) has one:

Today you see the amount of words you have in a post. For editors here in the German-speaking region it is more common to count characters (with and/or without spaces).

[shaunandrews]

This merged and now we have a bunch of whitespace. I think we could just change the flex-basis from 25% to 33% to force wrapping.

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

Line 45 in 2300f3c

flex-basis: 25%;

Something like this:

[swissspidy]

Did this get reviewed from polyglots? Does the character count work for languages like Japanese?

Wouldn't word count and character count be the same there?

That's why #14589 did show either character count or word count, depending on the locale.

[naokomc]

In a Japanese install of WP, the default word count setting is characters_including_spaces.

Below is this PR on a Japanese install. It's counting each letter of ASCII words as one word (e.g. "WordPress" is counted as 9 words) for word count.

When I switch the site language to English, I get this. Until there is a space or newline, a whole paragraph is counted as one word.

Google docs count words in a similar way as an English install of WP.

Microsoft Word gives me very detailed stats. They are counting an Asian character as one word, and adding that to the count of ASCII words. This seems perfect... only if we want to go that far.

I feel the current WP English setting & Google Docs approach is ok, and I personally want to see both character and word count. It's useful when I'm writing mixed text using Asian & non-Asian characters, which happens a lot.

The text used for the above samples (a section from WP 5.5 About page):

SEO

新しいサイトマップが登場しました。

WordPress サイトは検索エンジンとうまく連携します。

WordPress 5.5ではデフォルトで XML サイトマップが含まれるようになり、サイトが公開されたらすぐに検索エンジンが最も重要なページを発見できるようになります。 これで、より多くの人がより早くあなたのサイトを見つけられます。

そして、訪問者のエンゲージメント向上、維持、購読者や顧客へのコンバージョンなど、設定した定義に合った成功に向かうための時間をもっと確保できます。

[fumikito]

@aristath F.Y.I

• In some languages(e.g. Chinese, Japanese, Korean) a sentence is written without spaces between words. It's hard to separate them into words programmatically without a morphological analyzer(e.g. kuromoji for ja)
• Traditionally, some western languages estimate the amount of a document with word count. In Japanese, with characters count(maybe so as in Korean, Chinese, and so on). It's a common culture for writers in each language.
• In my opinion, the word count of Japanese document is useless because they are simply not correct. @ellatrix asked in Add characters count in the table of contents #14589 (comment)
• Generally, CJKV(Chinese, Japanese, Korean, Vietnamese) are considered as a different language group. Input method(IME), Multi-byte characters, layout, punctuation. There's a good book "CJKV information processing" written by Ken Lunde, an ex-unicode specialist in Adobe.

Screenshots

How Sentences Look Like

A description of WordPress in Japanese(Wikipedia)

A description of WordPress in Simplified Chinese(Wikipedia)

How to Estimate the Amount of Document

A list of submission requirements of Science fiction short stories.

Requirements of Japanese Sci-Fi contest.

---

Hope it helps.

[aristath]

Thank you @fumikito! I didn't know that, it does help me understand why we needed the character count 👍