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

opr · 2022-06-08T23:33:44Z

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.

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

Open a post or page and enter some text.
Open the table of contents panel (the i above the editor).
See the time to read presented at the end of the list.
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 · 2022-06-08T23:39:04Z

packages/editor/src/components/time-to-read/index.js

+	return (
+		<span className="time-to-read">
+			<span className="table-of-contents__number">
+				{ minutesToRead }{ ' ' }


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

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.

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 · 2022-06-09T04:00:43Z

@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 · 2022-06-09T09:14:55Z

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 · 2022-06-15T09:25:23Z

packages/editor/src/components/time-to-read/index.js

+	return (
+		<span className="time-to-read">
+			<span className="table-of-contents__number">
+				{ minutesToRead }{ ' ' }


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 · 2022-06-15T09:28:23Z

packages/editor/src/components/time-to-read/index.js

+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const minutesToRead = Math.round(


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.

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

Compared to:

opr · 2022-06-17T14:23:13Z

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

gziolo · 2022-06-28T11:44:51Z

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 · 2022-06-28T11:51:46Z

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 · 2022-06-28T12:26:03Z

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

Your suggestion looks good to me.

opr · 2022-07-02T18:03:23Z

@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 · 2022-07-04T08:49:52Z

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.

opr commented Jun 8, 2022

View reviewed changes

alexstine approved these changes Jun 9, 2022

View reviewed changes

gziolo added [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement. labels Jun 15, 2022

gziolo reviewed Jun 15, 2022

View reviewed changes

opr requested a review from gziolo June 17, 2022 14:23

gziolo added the Needs Design Feedback Needs general design feedback. label Jun 28, 2022

gziolo approved these changes Jun 28, 2022

View reviewed changes

gziolo requested review from critterverse, kellychoffman and jameskoster June 28, 2022 11:45

opr added 5 commits July 2, 2022 21:44

Add TimeToRead component

3818424

Add TimeToRead to the table of contents panel

8def320

Adjust average reading rate

8c2372b

Use createInterpolateElement to show the minutes to read

17dae93

Re-order information in toc panel

d171a84

opr force-pushed the add/time-to-read branch from 3044530 to d171a84 Compare July 3, 2022 04:45

gziolo merged commit bc071fc into WordPress:trunk Jul 6, 2022

gziolo removed the Needs Design Feedback Needs general design feedback. label Jul 6, 2022

github-actions bot added this to the Gutenberg 13.7 milestone Jul 6, 2022

opr deleted the add/time-to-read branch July 11, 2022 08:51

bph mentioned this pull request Jul 19, 2022

New Block: Time to Read #42542

Closed

gikaragia mentioned this pull request Jul 26, 2022

Add an estimate for lesson length Automattic/sensei#5384

Open

femkreations added the Needs User Documentation Needs new user documentation label Sep 3, 2022

t-hamano mentioned this pull request Sep 18, 2022

[New Block] Add post time to read block #43403

Merged

femkreations mentioned this pull request Oct 3, 2022

[HelpHub] WordPress Editor WordPress/Documentation-Issue-Tracker#302

Closed

30 tasks

courtneyr-dev mentioned this pull request Oct 5, 2022

Intro to Site Editor and Templates - Lesson Plan WordPress/Learn#699

Closed

42 tasks

t-hamano mentioned this pull request Aug 23, 2023

Stabilize Time to Read block #53776

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

opr commented Jun 8, 2022

opr Jun 8, 2022 •

edited

Loading

gziolo Jun 15, 2022

gziolo Jun 15, 2022 •

edited

Loading

alexstine commented Jun 9, 2022

opr commented Jun 9, 2022

alexstine left a comment

gziolo left a comment

gziolo Jun 15, 2022

gziolo Jun 15, 2022

opr Jun 17, 2022

opr commented Jun 17, 2022

gziolo commented Jun 28, 2022

gziolo commented Jun 28, 2022

jameskoster commented Jun 28, 2022

opr commented Jul 2, 2022 •

edited

Loading

gziolo commented Jul 4, 2022 •

edited

Loading

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

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

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

Conversation

opr commented Jun 8, 2022

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Additional thoughts

opr Jun 8, 2022 • edited Loading

Choose a reason for hiding this comment

gziolo Jun 15, 2022

Choose a reason for hiding this comment

gziolo Jun 15, 2022 • edited Loading

Choose a reason for hiding this comment

alexstine commented Jun 9, 2022

opr commented Jun 9, 2022

alexstine left a comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

gziolo Jun 15, 2022

Choose a reason for hiding this comment

gziolo Jun 15, 2022

Choose a reason for hiding this comment

opr Jun 17, 2022

Choose a reason for hiding this comment

opr commented Jun 17, 2022

gziolo commented Jun 28, 2022

gziolo commented Jun 28, 2022

jameskoster commented Jun 28, 2022

opr commented Jul 2, 2022 • edited Loading

gziolo commented Jul 4, 2022 • edited Loading

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

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

opr Jun 8, 2022 •

edited

Loading

gziolo Jun 15, 2022 •

edited

Loading

opr commented Jul 2, 2022 •

edited

Loading

gziolo commented Jul 4, 2022 •

edited

Loading