Blockloom

WordPress · v1.0.0 · View on GitHub → · View on Store →

Blockloom is a collection of lightweight, zero-dependency Gutenberg blocks for WordPress. It’s built entirely on native WordPress APIs (@wordpress/block-editor, @wordpress/components, @wordpress/scripts) with Font Awesome Free icons rendered as inline SVG — no icon fonts, no CDN, no API key, and nothing extra shipped to the browser.

Blocks

• Icon — a single Font Awesome icon with link, accessibility label, background shape, hover colour and animation.
• Icon List — a vertical or horizontal list of icon + text items with responsive wrapping (items are server-side rendered).
• Info Box — an icon + title + description card with three layout modes and an optional CTA.
• FAQs — an accessible accordion with smooth animation and JSON-LD FAQ schema.
• Team Member — a profile card with photo, bio, up to seven social networks and Person schema.
• Rating — a star or bar rating with half-star support and AggregateRating schema.
• Progress Bar — an animated bar with striped fill, scroll animation and a custom label.

Requirements

• WordPress 6.3 or newer
• PHP 7.4 or newer
• Node.js 18+ and Composer 2.0+ (development only)

Installation

From a ZIP: download blockloom.zip, go to Plugins → Add New → Upload Plugin, then upload and activate.

From source:

cd wp-content/plugins/
git clone https://github.com/jainilnagar/blockloom.git
cd blockloom

npm install              # JS dependencies
npm run generate-icons   # generate Font Awesome icon data
npm run build            # production build
composer install         # PHP dev tools

Then activate it in Plugins → Installed Plugins.

Icon system

Icons come from Font Awesome Free, rendered as inline SVG. A build step (npm run generate-icons) produces data/icons.json — roughly 2,141 icons across Solid, Regular, and Brands. Icons are loaded only in the editor; on the front end, only the selected icon’s SVG path is output inline, so there’s zero extra weight per page. Icons are referenced by style/name, e.g. solid/star, brands/github, regular/heart.

Design philosophy

• Zero runtime dependencies — only @wordpress/scripts and Font Awesome Free as dev tools; FA icons are extracted to inline SVG at authoring time.
• Minimal frontend CSS — structural layout only; colours, type and spacing inherit from your theme and are overridable via CSS custom properties set on each block wrapper.
• Server-side rendering where it matters — Icon List Items render via render.php (always fresh, no block-validation issues), with a static-cached PHP icon helper so the icon data is decoded only once per request.
• Conditional asset loading — the frontend script and block styles are enqueued only on pages that actually contain a Blockloom block (via has_block()); Dashicons are not used.

Accessibility

Accessible by default: the FAQ accordion uses native <button> elements with aria-expanded and Escape-to-close; decorative icons are aria-hidden, with an optional aria-label on the Icon block; Info Box and Rating expose a heading-tag selector for correct hierarchy; and rating rows use role="img" with a descriptive label.

License

GPL-2.0-or-later.