Does this plugin work with any theme?
Yes. Aludra is a theme-neutral block library and works with any WordPress theme — FSE, block, or classic. It is used across the Imagewize block themes (Elayne, Aviendha), and blocks reference theme color presets with fallbacks so they render correctly everywhere.
How do I build the blocks from source?
Each block has isolated dependencies and must be built separately:
`
cd blocks/carousel && npm install && npm run build cd blocks/mega-menu && npm install && npm run build cd blocks/slide && npm install && npm run build `
For development mode with watch: cd blocks/[block-name] && npm start
Are the build files included?
Yes, the build/ directories are committed to the repository for Packagist distribution, so users get working blocks without needing to run build commands.
Can I customize the carousel settings?
Yes, the carousel block uses Slick Carousel which is highly customizable. You can extend the block to add additional Slick settings through the block attributes.
Does the Mega Menu work with keyboard navigation?
Yes, the mega menu block includes full keyboard navigation support, outside-click dismissal, and proper focus management for accessibility.
What is the WordPress Interactivity API?
It’s WordPress’s official frontend reactivity system. The mega menu block uses it for modern, reactive user interactions without heavy JavaScript frameworks.
What blocks are included, and how are they built?
Mega Menu Block * Create dropdown mega menus with rich content * Can only be placed inside a core/navigation block * Uses WordPress Interactivity API for frontend state management * Features click/keyboard navigation, outside-click dismissal, and focus management * Supports template part integration for complex menu layouts * Server-side rendering for dynamic content
Carousel Block * Build beautiful, responsive image and content carousels * Powered by Slick Carousel library (1.8.1) * Parent block that only accepts Slide blocks as children * Assets loaded conditionally only when carousel is present on page * Fully customizable carousel settings
Slide Block * Individual slides for use within Carousel blocks * Uses InnerBlocks to accept any block content * Can only exist inside Carousel parent (enforced via parent constraint) * Flexible content options – images, text, buttons, or any WordPress blocks
FAQ Tabs Block * Interactive FAQ section with vertical tab navigation and dynamic content display * Inline-editable questions via RichText, responsive mobile accordion layout * Three display modes: tabs (desktop tabs / mobile accordion), accordion (stacked everywhere), and native (real / elements — no JavaScript, and browser find-in-page can expand a closed answer) * Parent of the FAQ Tab Answer block
FAQ Tab Answer Block * Individual answer child block for FAQ Tabs, with InnerBlocks for rich content * Editable question (tab label) and answer title * Only valid inside the FAQ Tabs block
Search Overlay Trigger Block * Search icon that opens a full-screen search overlay with smooth animations * Customizable overlay, search-bar, and close-button colors * Auto-focus, body scroll lock, and multiple close methods (X, backdrop, Escape)
Feature Cards Block * Responsive grid of feature highlight cards with SVG icons and a section header * Icons resolved via the reusable aludra/icon binding * Theme color presets with fallbacks, so it renders correctly on any theme
Icon Grid Block * Auto-fit grid of icon + text items with an eyebrow, title, and lead * Icons resolved via the aludra/icon binding * Theme color presets with fallbacks
Trust Bar Block * Inline bar of trust-signal items (icon + text) that wraps on mobile * Icons resolved via the aludra/icon binding * Theme color presets with fallbacks
Pricing Tiers Block * Three-column pricing comparison table with featured tier highlighting * Built from InnerBlocks so every price, feature, and button is fully editable * Two styles: separate cards (default) or a single bordered spec sheet split by internal hairlines, with the featured tier marked by a thin accent bar
Testimonial Grid Block * Grid of customer testimonials with metrics * Automatically becomes a Slick Carousel on larger sets (4+ cards on desktop, 2+ on mobile), otherwise renders as a static grid * Shares the same Slick Carousel assets as the Carousel block — no duplicate library loaded
CTA Columns Block * Dual call-to-action cards with headings, descriptions, and buttons * Color variant control via the block inspector * Optional “Reveal on scroll” entrance animation, fading and sliding the section into view
Feature List Grid Block * Two-column grid of features with checkmarks and hover effects
Contact Section Block * Dark contact section with an intro, a two-column info/details grid, and a Contact Form 7 form card * Contact details (email, response time, location) rendered via the aludra/icon binding * Theme color presets with fallbacks, so it renders correctly on any theme
Hero Banner Block * Dark full-width hero with an eyebrow badge, heading, lead text, and dual CTA buttons * Theme color presets with fallbacks, so it renders correctly on any theme
Load Waterfall Block * Animated network load-time waterfall panel with an LCP marker, for hero sections that need to show off site speed * Site URL, badge, row labels, and the LCP label are editable via RichText; row timing/positions are fixed to match the reference design * Respects prefers-reduced-motion
Stat Rail Block * Full-width band of big-number stats with captions, for the seam between a hero and the rest of the page * Equal-width columns via CSS grid, so the layout isn’t locked to a fixed item count * Dark band by default, with a “Light band” style for light-ground themes — both draw their colors from the active palette * Built from InnerBlocks — add or remove stat items freely; parent of the Stat Item block
Stat Item Block * Single big-number stat with a caption, used inside Stat Rail * Optional “highlight” toggle to render the number in the theme’s accent color * Number and caption colors set independently from the theme palette, or a custom value * The number can render as a heading (H1-H6) where the rail is a real section of the page, or as plain text (the default) * Only valid inside the Stat Rail block
Spine Section Block * Page section with a sticky label/heading/aside column on the left and its content on the right * Wraps any block as its content — nested Aludra section blocks have their own page shell suppressed so both columns align * Collapses to a single stacked column (sticky disabled) below 860px * Optional tinted background, and a tunable sticky offset via the –aludra-spine-top custom property
Key Features
- Theme Neutral – Works with any WordPress theme; uses theme color presets with fallbacks
- Performance Optimized – Conditional asset loading (Slick Carousel only loads when needed)
- WordPress Interactivity API – Modern reactive frontend for mega menu
- Parent-Child Relationships – Carousel → Slide hierarchy enforced for better UX
- Dynamic Block Discovery – Automatically discovers and registers all blocks at runtime
- Translation Ready – Full internationalization support with text domain
Technical Highlights
- Follows WordPress block development best practices
- Each block has isolated dependencies for independent versioning
- Block metadata in block.json is single source of truth
- Build tooling via @wordpress/scripts (Webpack, Babel, etc.)
- Server-side rendering support (mega-menu)
Requirements
- WordPress 6.9 or higher
- PHP 7.4 or higher
- Works with any WordPress theme (FSE, block, or classic)
Block Structure
Each block follows standard WordPress block structure: * src/block.json – Block metadata and configuration * src/index.js – Registration entry point * src/edit.js – React editor component * src/save.jsx – Frontend output markup * src/view.js – Frontend interactivity (optional) * src/render.php – Server-side rendering (optional) * src/editor.scss – Editor-only styles * src/style.scss – Frontend + editor styles
