
外掛標籤
開發者團隊
② 後台搜尋「Etu Blocks — Interactive Accessible Block Library & Page Builder」→ 直接安裝(推薦)
原文外掛簡介
🧱 Etu Blocks is a focused, accessible block library — and all of it is free.
1. Accessible by construction. Every interactive block is built keyboard-operable and screen-reader-correct from the first line of code, against WCAG 2.2 Level AA — real dialog semantics, real range inputs, real focus management, real ARIA state that can’t drift from what you see. Accessibility is a merge gate, not a polish pass.
2. Interactive without bloat. Front-end behaviour runs on the native WordPress Interactivity API — no jQuery, no framework runtime, no build system on your visitors’ pages. Each block’s script loads only where it’s used, and the content is server-rendered first, so it works even before that script loads — or if it never does.
Etu Blocks does not reinvent core blocks — it builds only what core has no equal for, held to a premium bar: shared design tokens, a schema-driven Inspector every block inherits, and multiple presets per block.
This plugin is free, in full.
No locked panels, no “upgrade to unlock”, no nag screens, no paywall — every block and every control described here works for everyone.
An Etu Blocks Pro add-on with additional premium blocks may follow, but nothing in this free plugin will move behind a paywall.
How Etu Blocks is organised
Accessible by default — WCAG 2.2 AA is the definition of done
Interactivity API only — server-rendered first, no framework runtime on visitors’ pages
Privacy first — video and map embeds use a click-to-load facade; no telemetry, no phone-home
Etu Blocks ships 29 blocks across Content, Marketing, Interactive, Data, and Media groups. Every block is browsable in the editor inserter, with a full description and preview shown inline as you insert it.
🧱 The Blocks
Content
❓ FAQ / Accordion — the disclosure pattern, done right: each header is a real
/
. Multiple presets.
👥 Team Member — profile card with Card, Overlay, Horizontal, and Minimal presets. Social links are real elements with accessible names, never icon-only.
📋 Icon List — feature or checklist list with per-item icons. Realsemantics — a screen reader announces “list, 5 items”.
Marketing
💳 Pricing Table — premium plan cards with a featured plan, feature lists, and an optional monthly/annual billing toggle. The toggle is a keyboard-operable radio group (not a fake switch), and the recommended plan is marked with a text badge — never colour alone.
⚖️ Comparison Table — compare plans or products side-by-side, with a highlighted column, check/cross/text cells, and a realwith
headers so the row/column relationships are announced correctly.
🖼️ Post Grid — display posts as a grid, masonry, or carousel with full query controls (post type, categories, order, offset, exclude-current), premium card presets (Elevated, Bordered, Minimal, Overlay), an optional category filter bar, and carousel controls that respect reduced motion.
🏷️ Taxonomy — a visual term browser for any public taxonomy: image-card grid, list, or pill layout. Each card uses the term’s own image or the latest post’s featured image as a universal fallback, cached in a transient so it isn’t re-queried on every page load.Interactive
🪟 Modal / Popup — an accessible dialog: role="dialog" + aria-modal, focus trapped while open and restored to the trigger on close, Esc closes, backdrop dismiss is opt-in, body scroll is locked, and the background is made inert so assistive tech and keyboard focus can only reach the dialog. Opens on click, on page load, or after a delay; holds any blocks.
🎬 Video Popup — a video lightbox on the same accessible dialog recipe, with a privacy-first click-to-load facade: the YouTube (via youtube-nocookie.com), Vimeo (with dnt=1), or self-hosted video is requested only when the visitor opens it — no third-party requests, cookies, or autoplay on page view — and closing actually stops playback. Focus is moved in and returned.
🎠 Slides / Carousel — put any blocks in each slide; a genuine keyboard-scrollable region (nothing hidden from screen readers), with real prev/next and dot controls, arrows, opt-in autoplay that ships a real pause button and never runs under reduced motion.
🔀 Before / After — an image comparison you can operate with the keyboard, not just the mouse. Built on a real , so arrow keys move the divider, dragging works, and the position is announced as a percentage via aria-valuetext. Horizontal or vertical.
⏳ Countdown — a countdown to a fixed date or an evergreen per-visitor duration. The ticking digits are hidden from screen readers, so a screen-reader user isn’t read a new number every second, while a role="timer" container carries a descriptive label and the end is announced once via a polite live region.
🔍 Post Filter — a filterable post grid: a search field, taxonomy dropdowns, and a reset button. Filtering happens live over a REST endpoint (etu/v1/posts) — but the bar is a real GET
