@wordpress/editor: Add estimated time to read to table of contents in editor

[opr]

What?

Adds an estimated time to read to the table of contents in the post editor.

Why?

It would be a useful tool for editors to know how long their article will take (the average) reader to read.

Closes #38593.

How?

I took an average of the reading rate (words per minute, but characters per minute for Chinese) from this source: https://irisreading.com/average-reading-speed-in-various-languages/. A lot of other sources cite 200 wpm is the average reading rate but I think they didn't account for other languages. Using the average of 189 should get us a pretty good estimate.

Using this, I created a TimeToRead function, which uses count from @wordpress/wordcount to calculate how many minutes to display.

The number is styled larger than the text. Please guide me on styling if we should do something different.

Testing Instructions

1. Open a post or page and enter some text.
2. Open the table of contents panel (the i above the editor).
3. See the time to read presented at the end of the list.
4. Change the word count in your post, ensure the time to read increases appropriately. For every 189 words you add the time should increase by one minute.

Screenshots or screencast

Additional thoughts

If #41598 gets merged then we could possibly use humanTimeDiff to get the locale specific time between now and the estimated minutes to read. This displays time differences including from a few seconds, x minutes, x hours, x days, x months and x years.

The challenge here would be identifying how to split the resulting string into its locale-correct constituent parts (number of units of time, and string describing the unit of time) and styling the number and string differently. We also need to consider the case of the text only option, where the words are such that the post will take a single unit of time to read (i.e. a minute) and how we would style a minute where no number is present vs 2 minutes where the number being larger than the text looks alright.

[opr]

Is there a better way to leave a space between the number and the text, is CSS more appropriate for this?

[gziolo]

Maybe using sprintf from @wordpress/i18n would be the way to go. It would also cover those languages that would put the word minutes after the number.

[gziolo]

There is also createInterpolateElement from @wordpress/element that can cover using React components:

https://github.com/WordPress/gutenberg/tree/trunk/packages/element#createinterpolateelement

Example usage:

gutenberg/packages/block-editor/src/components/link-control/search-create-button.js

Lines 32 to 39 in 862ec61

	text = createInterpolateElement(
	sprintf(
	/* translators: %s: search term. */
	__( 'Create: <mark>%s</mark>' ),
	searchTerm
	),
	{ mark: <mark /> }
	);

[alexstine]

@opr I'd like to accessibility review this PR but have no idea where the table of contents is. What is the aria-label on the button?

Thanks.

[opr]

Hi @alexstine thank you - sure the aria-label for the button is Details - it's at the top above the post. It's in the Document tools group of icons.

[alexstine]

@opr Accessibility is good and I think the spacing reflects how other items are listed. I only checked this for keyboard navigation and general usability/code quality, I am unable to do visual testing. No idea how it looks. A sighted review would probably be good for this.

[gziolo]

Excellent addition. I left some minor feedback, but overall this looks great 💯

[gziolo]

Maybe using sprintf from @wordpress/i18n would be the way to go. It would also cover those languages that would put the word minutes after the number.

[gziolo]

Should we add a special case for minutes to read less than 1 (or 0.5)? In that case, we could display: Less than a minute. Otherwise, we might see 0 minutes.

[opr]

@gziolo I went with < 1 minute because without there being a number there it looks kind of weird.

Compared to:

[opr]

@gziolo awesome thanks for the reminder about createInterpolateElement this was really helpful!

[gziolo]

Code-wise everything is good. I would appreciate design feedback for this one. I wonder whether the distribution of item in the popover should be a bit different, for example:

[gziolo]

By the way, @richtabor created a WordPress plugin with a Post Reading Time block that is available at https://github.com/richtabor/post-reading-time-block. It could be a good addition to the core as well.

[jameskoster]

I wonder whether the distribution of item in the popover should be a bit different

Your suggestion looks good to me.

[opr]

@gziolo and @jameskoster thanks for your input. I've made the changes you suggested and re-ordered the panel.

As for the time to read block, I think it would be better to bring that in in a separate PR, do you agree?

[gziolo]

As for the time to read block, I think it would be better to bring that in in a separate PR, do you agree?

Surely, it's outside of the scope of this PR. We want to keep it small. It's a good opportunity to discuss further work though before we jump into opening issues.

thanks for your input. I've made the changes you suggested and re-ordered the panel.

Looks good to me! I re-trigger one of the CI job to see if the test (unrelated to this PR) passes.