Blog · Gutenberg
Reading Time block for WordPress
Displays estimated reading time calculated from the post content. Fully customizable styling.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Displays estimated reading time calculated from the post content. Fully customizable styling.
Inspector panels on this block: Reading Time Settings, Badge Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Display Style” options: Badge (pill), Inline text, Icon only + text; “Reading Time Settings — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Blog → search “Reading Time” (block name `blockenberg/reading-time` in block.json). Style it in the sidebar after insert.
How to use Reading Time block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Reading Time”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Reading Time Settings. Set “Words Per Minute”, “Prefix”, “Suffix”, “Display Style”.
- Check the published page. The view script reads HTML data attributes: data-prefix, data-suffix, data-wpm. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Words Per Minute | Numeric range control in the inspector. Range 50–500. block.json default: 200. Saved as `wpm`. |
| Prefix | Text field in the inspector. Saved as `prefix`. |
| Suffix | Text field in the inspector. block.json default: min read. Saved as `suffix`. |
| Display Style | Select control; the chosen value is saved on the block. Options: Badge (pill); Inline text; Icon only + text. block.json default: badge. Saved as `displayStyle`. |
| Reading Time Settings — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `textAlign`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Reading Time Settings — Icon | Select control; the chosen value is saved on the block. block.json default: clock. Saved as `icon`. |
| Badge Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `badgeTypo`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 40. Saved as `borderRadius`. |
| Padding X (px) | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `paddingX`. |
| Padding Y (px) | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `paddingY`. |
| Colors — Background | Color control in the inspector. block.json default: #ede9fc. Saved as `bgColor`. |
| Text / Icon | Color control in the inspector. block.json default: #6c3fb5. Saved as `textColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-prefix, data-suffix, data-wpm.
When this is the right block
- Displays estimated reading time calculated from the post content. Fully customizable styling — that is the job of Reading Time, not a generic content block.
- Use it when you need the editor control labeled “Words Per Minute”, which exists on this block’s inspector.
- It matches pages about reading time, read, estimate.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Reading Time block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Reading Time”. It sits under Blog. After insert, open Reading Time Settings and set “Words Per Minute”, “Prefix”, “Suffix”, “Display Style”.
Does Reading Time need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Reading Time Gutenberg block free?
Yes. Reading Time ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Reading Time to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Reading Time Settings, Badge Style).
Related blog blocks
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Dynamic Date
Outputs the current date, time or copyright year automatically, with live clock option.
Meeting Recap
Structured meeting notes with attendees, agenda, decisions, action items, and next steps.
Post Meta Bar
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Reading Time from the Gutenberg inserter.