Aludra
| 开发者 | rhand |
|---|---|
| 更新时间 | 2026年11月13日 16:29 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPL v3 or later |
| 版权网址: | 版权信息 |
详情介绍:
Aludra is a page builder for the WordPress block editor — not a separate editing app bolted on top of it. 34 native blocks, 21 ready-made sections, 8 whole page layouts and 5 headers and footers, built and edited in the editor you already have. No shortcodes, no proprietary markup, and nothing that turns into a wall of broken tags the day you switch it off.
A theme gives you the palette, the type and a default header and footer; Aludra gives you everything between them — the bands a page is actually made of: heroes, stat rails, trust bars, feature grids, pricing tiers, comparison tables, FAQs, reviews, contact sections and CTA bands — plus headers and footers to swap in when the theme's own are not enough.
That holds whatever the site is for. The same sections build a portfolio, a services site, a one-page launch, or a straightforward online presence for a business — the bands are the same, the copy is not.
You rarely start from an empty block. You pick a section — a hero that already has its eyebrow, heading, lead and buttons, in the right style variation — drop it in and replace the copy. Or you pick a whole page pattern and delete the parts you do not need.
What you get
- 21 section patterns — one page band each, grouped into Heroes, Proof, Features & Services, Layout and Convert. Every content block has one
- 8 page patterns — homepage, landing, service, services overview, pricing, about, team and contact, offered when you create a new page
- 5 header and footer patterns — a header with a mega menu, a dark header with social icons and full-screen search, a shop header with account and mini cart (WooCommerce), a four-column link footer and a footer with a call-to-action band. Select the header or footer in the Site Editor and choose Replace to use one, in any block theme
- 34 blocks — grouped into six inserter categories that follow the order a page gets built in, and individually enable/disable-able under Settings → Aludra
- 13 more patterns — five pre-configured carousels and eight mega menu layouts for menu template parts
- Show or hide any section per device — every Aludra block works with the block editor's own visibility controls, so a band can be hidden on mobile, tablet or desktop (WordPress 7.0 and later). No extra markup or scripts: core adds one class and one media query
- Different styles per device — on WordPress 7.1 and later, switch the editor's preview to Tablet or Mobile and change a block's spacing, colours or typography for that device only. Works on every Aludra block with those settings
- Section colours — give a section, or a Group around several, one of four colour schemes from the Styles tab: Page, Tint (a tinted band), Invert (a dark band) or Brand. Everything inside follows, buttons and links included, and every scheme is made from your theme's own colours
安装:
- Upload the plugin files to the
/wp-content/plugins/aludradirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the 'Plugins' screen in WordPress.
- Blocks will be automatically available in the Gutenberg editor.
- For Mega Menu: Place inside a Navigation block to use the mega menu functionality.
- For Carousel: Add a Carousel block, then add Slide blocks inside it.
屏幕截图:
常见问题:
Can I hide a section on mobile?
Yes. On WordPress 7.0 and later, select the block and use the editor's Show / Hide setting to pick the devices it should be hidden on. This is the block editor's own visibility setting, so it works the same on Aludra blocks as on core blocks. The breakpoints come from your theme (480px and 782px by default).
Can I change my theme's header or footer?
Yes, in any block theme. In the Site Editor, select the header or footer, choose Replace and pick one of Aludra's: Header: Mega Menu, Header: Search and Social, Header: Store (with WooCommerce), Footer: Link Columns or Footer: Call to Action. They use your theme's colours and fonts, and drop extras such as the social icons or the call-to-action button on phones with the block editor's own visibility setting. For the mega menu header, pick the menu's template part in the Mega Menu block's settings.
Can I put a section on a dark or brand-coloured band?
Yes. Select the section, or a Group block around several sections, open the Styles tab and choose a scheme under Section colours: Tint swaps the page and tint colours, Invert reverses the page colours (a dark band on a light theme, a light band on a dark style variation), and Brand puts the section on your brand colour. Every block inside follows, including buttons, links and cards, because the scheme changes the theme's colours for that section only. Page removes the scheme again. It works alongside a block's own styles, such as the pricing table's Cards and Spec sheet.
Can a section look different on mobile?
Yes, on WordPress 7.1 and later. Switch the editor's preview (the Desktop menu in the top bar) to Tablet or Mobile and turn on styling for that device; spacing, colour and typography changes then apply to that device only. This is the block editor's own feature and works on every Aludra block that has those settings.
Does this plugin work with any theme?
Yes, with any WordPress theme: FSE, block, or classic. Aludra names its colours the way the Imagewize themes (Aviendha, Elayne) and Ollie-based themes do. When a theme does not define one of those colours, Aludra derives it from the theme's own palette: the brand colour is the first colour in the palette that your background colour reads well on, and tints, borders and muted text are blends of your background and text colours. A theme's own colours are never overridden. To use a different brand colour, pick one of your theme's colours under Settings → Aludra → Start.
How do I build the blocks from source?
The blocks share one npm workspace. Install once from the repository root, then build:
npm ci
npm run build --workspaces --if-present
npm run build --workspace=blocks/carousel
The first build command builds every block, the second just one. For development mode with watch: npm start --workspace=blocks/[block-name]
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. A new carousel starts as a scroll rail: a swipeable row of slides that loads no JavaScript. Switch the Engine setting in the sidebar to Slider for arrows, dots, autoplay, center mode and thumbnail navigation; that engine uses Slick Carousel and loads jQuery only on pages where such a carousel appears.
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
- Top and bottom margin and the gap between slides set from the block's Spacing panel 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
- 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)
- WordPress 7.0 or higher
- PHP 7.4 or higher
- Works with any WordPress theme (FSE, block, or classic)
src/block.json- Block metadata and configurationsrc/index.js- Registration entry pointsrc/edit.js- React editor componentsrc/save.jsx- Frontend output markupsrc/view.js- Frontend interactivity (optional)src/render.php- Server-side rendering (optional)src/editor.scss- Editor-only stylessrc/style.scss- Frontend + editor styles
更新日志:
2.43.0
- Added: five header and footer patterns, offered under Replace when you select a header or footer in the Site Editor, in any block theme: Header: Mega Menu, Header: Search and Social, Header: Store (with WooCommerce), Footer: Link Columns and Footer: Call to Action. They drop extras such as social icons or the call-to-action button on phones with the block editor's own visibility setting
- Added: Section colours — give a section, or a Group around several, a Tint, Invert or Brand colour scheme from the Styles tab. Everything inside follows, buttons and links included
- Changed: requires WordPress 7.0 or later, for per-device block visibility
- Fixed: a tall mega menu panel ran off tablet and small laptop screens and could not be scrolled; it now scrolls inside itself, and a wide panel stays within the screen edges
- Fixed: the CTA Banner button could blend into the band on some themes (Elayne Store); it is now the band's colours inverted, and a button colour picked in the editor is kept
- Fixed: in the Pricing Tiers Spec sheet style, a featured tier's name no longer breaks mid-word next to its Most popular flag
- Fixed: the GitHub release zip now wraps the plugin in its own
aludra/folder, so uploading it on WordPress 7.1.4 or later installs or replacesaludrainstead of creating a randomly named folder. The WordPress.org package was not affected.
- Added: Aludra now takes on the colours of any block theme. On a theme that does not use Aviendha's colour names, such as Twenty Twenty-Five, its sections use the theme's own palette, dark style variations included, instead of Aviendha's colours
- Added: Settings → Aludra → Start has a Brand colour section to pick which of your theme's colours Aludra uses for buttons, call-to-action bands and highlights
- Added: the Carousel block has margin and block spacing (gap between slides) settings
- Changed: pages created from the Start tab use your theme's title-less page template when it has one, so the page title no longer appears above the layout's hero
- Changed: Dutch translation updated for all new strings
- Fixed: the Load Waterfall block no longer becomes invalid when saved by a user without the unfiltered_html capability, such as an author, or any role below super admin on a multisite
- Version 2.42.0 was tagged without its version number set; 2.42.1 is the same release
- Added: Settings → Aludra opens on a new Start tab — create a draft page from any page layout in one click, find the section patterns, and see which optional features your site supports. A Get started link on the Plugins screen leads there
- Changed: new carousels start on the rail engine, a scroll-snapping row that loads no JavaScript; an Engine setting switches to the Slick slider. Existing carousels are unchanged
- Changed: new logo, plugin icon and banner — a one-colour firework rocket; tagline "Everything a page builder gives you, inside the editor you already have."
- Changed: readme documents hiding sections and changing styles per device with the block editor's own controls (WordPress 7.0 and 7.1)
- Changed: Dutch translation updated for all new strings
- Added: Free Shipping Progress and Sticky Add to Cart are inserted automatically into the Winespring theme's announcement bar and single product template; other themes can opt in with the aludra_store_block_hooks_themes filter
- Added: Settings → Aludra → Store tab to switch the automatic Free Shipping Progress and Sticky Add to Cart placement on or off for the active theme
- Added: complete Dutch translation, loaded from the plugin's languages folder (language packs from translate.wordpress.org still take precedence)
- Changed: development tooling only — blocks now build from a shared npm workspace; no change to the blocks themselves
- Added: Free Shipping Progress block — a progress bar toward free shipping that updates as the WooCommerce cart changes
- Added: Sticky Add to Cart block — a product bar that appears when the add to cart form scrolls out of view
- Fixed: a stray hidden file no longer ships in the zip, as WordPress.org requires
- Fixed: the translation template now covers all translatable strings, and the Dutch translation file is repaired
- Added: WordPress.org directory assets — plugin icon and banners
- Changed: new fireworks logo and plugin icon, a nod to the Nightflowers of The Wheel of Time; credits updated
- Removed: the SVG and WebP upload filter. Core has handled WebP since 5.8, and enabling SVG uploads site-wide without sanitization was a security risk
- Changed: the carousel patterns, team pattern and two mega menu patterns now use bundled SVG placeholder images instead of linking to external image hosts
- Fixed: the Hero Carousel and Portfolio Showcase patterns no longer trigger a block-validation (deprecation migration) notice in the editor
- Changed: the carousel patterns now live in
patterns/carousel-*.phplike the other patterns; slugs and titles are unchanged
- Added: store patterns for WooCommerce sites — a store hero, shop categories, newest products, a brand story, star-rated testimonials and a full store homepage. They appear in their own "Aludra: Store" category, and only when WooCommerce is active.
- Fixed: text contrast in dark style variations (store patterns, CTA banner button, night hero accents, stat rail highlight), and the Testimonial Grid layout with three cards on wide screens.
- Fixed: five mega menu patterns and the About page pattern no longer trigger block-validation warnings on WordPress 7.1.
- Fixed: a Carousel or Testimonial Grid that came from a pattern, template or template part rather than being saved in the page itself showed as an unstyled, non-sliding list.
- Fixed: a Split Section or CTA Columns block with Reveal on Scroll turned on stayed invisible when it came from a pattern, template or template part rather than being saved in the page itself.
- Fixed: a Carousel in rail mode inside a Spine Section or Split Section stuck out past the edge of the screen on laptop and tablet widths, giving the whole page a horizontal scrollbar.
- Fixed: Spine Section, Split Section, and Comparison Table used a different gutter token than the rest of the section blocks, leaving their content edges misaligned with neighbouring sections between roughly 768px and 1366px.
- Fixed: CTA Columns block (
aludra/cta-columns) — the "Light Gray" background option had no matching CSS rule, so selecting it had no visible effect on the frontend.
- Added: Photo Grid block (
aludra/photo-grid) — heading, follow line, and a tight square photo grid for an Instagram-style feed section. Fully static and theme-neutral: authors drop in their own photos viacore/image, no API key or live connection to maintain. - Added: Instagram Embed block (
aludra/instagram-embed) — a live feed of a public Instagram profile via Instagram's own public embed iframe (instagram.com/username/embed). No developer app or API key needed, unlike the official oEmbed route Meta locked down in October 2020. The rendered markup ships only a "Load Instagram feed" button and a profile-link fallback; the iframe itself is only injected client-side after a visitor clicks it, so nothing loads from instagram.com — and no consent question is raised — until they opt in. This is an unofficial, undocumented endpoint: it could change or stop working without notice, so keep a plain profile link as a fallback. - Fixed: Settings → Aludra no longer silently disables blocks introduced by an update. The screen read the saved
aludra_enabledoption without merging in the defaults, so a block added after you last saved that screen showed up unchecked — and because saving writes "off" for every box not submitted, toggling one unrelated block then disabled those blocks for real, removing them from the inserter. Block registration always read a missing entry as enabled, so only the admin screen was affected; if this caught you, just re-enable them there.
- Security: Bumped the
@imwz/wp-pattern-sentineldev dependency to 1.1.1, which pulls in ajs-yamlfix for GHSA-5p4m-2wfm-xmqj, a quadratic CPU consumption (DoS) bug in!!omapYAML resolution.js-yamlis only used by sentinel's--trellisauto-discovery ofwordpress_sites.yml; nothing in this plugin's own runtime is affected. Older entries are trimmed to keep this section within the 5000-character limit WordPress.org enforces. The complete history is in CHANGELOG.md: https://github.com/imagewize/aludra/blob/main/CHANGELOG.md