Mohammad Sajid Ansari

<p><strong>Idara Reading Time</strong> is a focused, single-purpose Gutenberg block that does one thing well: shows readers how long your post will take. It also offers an optional scroll progress bar — a thin bar pinned to the top or bottom of the page that fills as the visitor scrolls.</p>
<p><em>Idara (إدارة) is an Arabic word meaning “studio” or “administration” — the brand behind a growing family of carefully crafted, single-purpose Gutenberg blocks.</em></p>
<h4>Why this and not a full block suite?</h4>
<p>Most block plugins ship 30+ blocks you’ll never use, slowing your editor and your frontend. Idara plugins are deliberately small. This one is under 25 KB. CSS and JS load <strong>only on pages where the block is present</strong> — never globally.</p>
<h4>Features</h4>
<ul>
<li>Estimated reading time, calculated server-side from your post content</li>
<li>Display as a single value (“3 min read”) or a friendly range (“2–3 min read”)</li>
<li>Adjustable words-per-minute (50–600)</li>
<li>4 icon styles: clock, timer, hourglass, or none</li>
<li>Optional scroll progress bar with color, height, and position (top/bottom)</li>
<li>Hide on short posts (e.g. don’t show on anything under 2 minutes)</li>
<li>Custom prefix and suffix text</li>
<li>Inherits theme typography and text color via block supports</li>
<li>Full Site Editing (FSE) compatible — works inside block templates and template parts</li>
<li>Block toolbar shortcuts for icon cycling and range toggle</li>
<li>Semantic, accessible markup with ARIA labels</li>
<li>No tracking, no external requests, no third-party services</li>
<li>Translation-ready</li>
</ul>
<h4>Use cases</h4>
<ul>
<li>Blog posts where readers want to gauge time investment</li>
<li>Long-form articles where the scroll progress bar improves engagement</li>
<li>Documentation sites</li>
<li>News and magazine layouts</li>
</ul>
<h3>Development</h3>
<p>Source code and build tools are available on GitHub:<br />
https://github.com/sajid-ansari-65/idara-reading-time</p>
<p>The <code>src/</code> directory contains the unminified JavaScript (ES modules, JSX) and SCSS. Run <code>npm install && npm run build</code> to compile.</p>


Idara Reading Time

Show estimated reading time with an optional scroll progress bar. A lightweight, FSE-ready Gutenberg block that loads only where used.

Automattic

Tiago Noronha

Nate Allen

Fernando Fernandes

nickpagz

Glynn Quelch

Kim Clow

Automattic Special Projects

Robert Mueller

Tom Rhodes

Geoff Guillain

Derek Hanson

<p>This WordPress plugin adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing the page. It replaces the traditional <code>Previous</code> <code>Next</code> and numbered pagination, with a customizable, <code>Load More</code> button.</p>
<h3>Instructions</h3>
<p>To use this plugin, you must first add the Query Loop block into your post content, then add the Pagination block inside the Query Loop. When working with the Pagination block, you will see new options to enable load more on the block.<br />
The load more option allows you to set a loading text parameter and also the button text. The load more button works with the alignment options and arrow options of the pagination block.<br />
Here is how to enable the load more option:</p>
<ol>
<li>Add the Query Loop block to your post content.</li>
<li>Inside the Query Loop block, add the Pagination block.</li>
<li>In the Pagination block settings, enable the “Load More” option.</li>
<li>Set the loading text parameter and the button text.</li>
<li>Customize the alignment and arrow options if desired.</li>
</ol>
<p>That’s it! Your visitors can now load more posts by clicking the load more button without refreshing the page.</p>
<h3>Customization Options</h3>
<ul>
<li><strong>Alignment</strong>: Use standard block editor settings to set the alignment of the load more button</li>
<li><strong>Button</strong>: Choose the button option for users to click to load more posts</li>
<li><strong>Button Text</strong>: Customize the load more button text</li>
<li><strong>Loading Text</strong>: Customize the text for the post loading state</li>
<li><strong>Infinite Scroll</strong>: Choose this option to allow new posts to load automatically when users reach the bottom of the feed</li>
<li><strong>Color</strong>: Customize the color of the load more button and the loading state icon when using the infinite scroll option</li>
<li><strong>Update URL</strong>: Choose this option to update the browser’s URL when loading more posts</li>
</ul>


Query Loop Load More

This WordPress plugin adds a load more option to the Query Loop Pagination block in Gutenberg, allowing users to load more posts without refreshing th …

Idara Reading Time vs Query Loop Load More