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.

ThemeRuby

<h4>THE LIGHTWEIGHT GUTENBERG BLOCKS PLUGIN FOR WORDPRESS FULL SITE EDITING</h4>
<p>BlockFlow is a fast, no-code block library that brings 25+ professional Gutenberg blocks to the WordPress Site Editor. Build stunning, fully responsive websites with independent desktop, tablet, and mobile controls — no page builder bloat, no coding required.</p>
<p>Built for the WordPress Site Editor, BlockFlow gives you complete control over every part of your layout. Adjust spacing, colors, typography, borders, and more from an intuitive inspector. Friendly, real-time controls mean you see every change instantly, so building professional pages feels effortless whether you are a beginner or a pro.</p>
<p>Perfect for business websites, landing pages, portfolios, blogs, and WooCommerce stores. Build beautiful designs directly in the WordPress Site Editor.</p>
<p>View all features on the <a href="https://wpblockflow.com/" rel="nofollow ugc">Official Site</a>.</p>
<h4>🚀 Why Build with BlockFlow?</h4>
<ul>
<li><strong>No-Code Block Builder:</strong> Design professional layouts with intuitive blocks and real-time preview. No coding, no learning curve.</li>
<li><strong>True Responsive Control:</strong> Set different values for desktop, tablet, and mobile on every block, with smart inheritance so you only override what you need.</li>
<li><strong>Lightweight & Fast:</strong> Conditional asset loading means CSS and JS load only for the blocks actually used on each page.</li>
<li><strong>Built for FSE:</strong> Native support for Full Site Editing, the Site Editor, Global Styles, and theme.json.</li>
<li><strong>Dark Mode Ready:</strong> Built-in dark mode colors for every block.</li>
<li><strong>1000+ Icons Included:</strong> A comprehensive SVG icon library, ready to use.</li>
</ul>
<h4>🗝️ Key Features</h4>
<ul>
<li><strong>25+ Professional Blocks:</strong> Container, Grid, Accordion, Slider, Countdown, Testimonials, Team, and more essential blocks for any website.</li>
<li><strong>100% Responsive Design:</strong> Desktop, tablet, and mobile controls for every block with smart inheritance.</li>
<li><strong>True Device Controls:</strong> Switch between Desktop, Tablet, and Mobile views directly in the block inspector.</li>
<li><strong>Real-Time Preview:</strong> Every change instantly reflects in the editor.</li>
<li><strong>Performance Focused:</strong> Conditional loading means zero bloat — assets load only for blocks on the page.</li>
<li><strong>No Coding Required:</strong> Achieve professional results without touching any code.</li>
</ul>
<h4>🎯 Perfect For</h4>
<ul>
<li>Business and corporate websites</li>
<li>Landing pages and sales funnels</li>
<li>Portfolio and agency sites</li>
<li>Blog and magazine layouts</li>
<li>WooCommerce and online stores</li>
<li>Membership and community sites</li>
</ul>
<h4>⏩ Use of 3rd Party Services</h4>
<p>This plugin connects to external third-party services to provide certain features.</p>
<p><strong>Google Maps</strong> — The Google Map block embeds maps from Google Maps. Sends location address/coordinates when a page with the block loads. <a href="https://www.google.com/intl/en/policies/terms/" rel="nofollow ugc">Terms</a> | <a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy</a></p>
<p><strong>YouTube</strong> — The Video block can embed YouTube videos. Sends video ID and playback settings when a page with a YouTube video loads. <a href="https://www.youtube.com/t/terms" rel="nofollow ugc">Terms</a> | <a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy</a></p>
<p><strong>Google Fonts</strong> — Typography settings can load Google Fonts. Sends font family names when a page using custom fonts loads. <a href="https://policies.google.com/terms" rel="nofollow ugc">Terms</a> | <a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy</a></p>


BlockFlow – FSE Blocks, Site Builder & Starter Templates

25+ responsive Gutenberg blocks with dark mode. Customize desktop, tablet & mobile separately. Fast, lightweight, no bloat and friendly to use.

Idara Reading Time vs BlockFlow – FSE Blocks, Site Builder & Starter Templates