內容簡介
Zealblocks 是一款基於 WordPress 7.1 的區塊 API 的外掛，提供多種增強的區塊功能，讓使用者能夠更靈活地設計內容。它繼承核心的排版、顏色、間距和邊框控制，並補充核心所缺乏的部分，提升使用者的編輯體驗。
【主要功能】
• 提供 1,992 個可搜尋的 Font Awesome 免費圖示
• 支援多種文字樣式預設，獨立於佈景主題
• 按鈕區塊可容納多個按鈕，具彈性佈局
• 圖示和按鈕區塊可設定視口寬度和圖示大小
• 正確的無障礙標記，提升可及性
• 文字樣式遵循佈景主題的字型設定
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
Zealblocks adds blocks that build on WordPress 7.1’s block API instead of
duplicating it. Core’s typography, colour, spacing and border controls — and
core’s per-viewport style states — are declared as supports and inherited, not
reimplemented. What Zealblocks adds is the part core leaves out.
Blocks
Icon — an SVG icon from the WordPress icon library, with flip, free rotation and a proper decorative/meaningful accessibility choice.
Text — a paragraph with a visual style preset: Display, H1–H6, Lead, Body, Caption or Eyebrow, chosen independently of the theme’s default paragraph sizing.
Buttons — a flex container for one or more buttons, with block gap, padding and wide/full alignment.
Button — a button-style link with an optional icon, and per-viewport width and icon size.
1,992 icons, shared by every block
The Icon and Button blocks draw from one bundled library of 1,992 Font Awesome
Free icons, searchable and grouped into 68 categories. A block stores only the
icon’s name, so the artwork is resolved when the page renders — post content
stays small, and an updated icon set applies to pages already published.
The picker loads its artwork only when you open it, so an editor session that
never picks an icon never downloads one.
Icons are marked up correctly for assistive technology: leave the alternative
text empty and the icon is hidden from screen readers as decoration; set it and
the icon is announced as content. That distinction is the most commonly missed
part of icon accessibility.
The typographic scale follows your theme
The Text block’s presets are emitted as classes, and each one resolves through your
theme’s own theme.json font-size presets before falling back to a fluid
clamp(). So a theme with a real type scale drives the look, a theme without
one still renders sensibly, and a theme can override the whole scale in one
place. Nothing is written as an inline style, which is what would otherwise beat
the theme permanently.
The Eyebrow preset — the small uppercase label that sits above a heading — has
no equivalent in core, and is the one most often faked with an undersized H6.
On responsive values
WordPress 7.1 emits per-viewport CSS for its own style paths, so Zealblocks does
not need to reinvent that and does not try to. Where Zealblocks adds a property
core has no support for, it stores the value inside core’s own style attribute
under a namespaced key, in core’s viewport-state shape, and generates the CSS
using core’s media queries:
style.zealblocks.width for the base layer, `[email protected]`
and [email protected] for the overrides. Icon size uses the
same shape under iconSize.
The breakpoints come from WP_Theme_JSON::get_viewport_media_queries(), which
reads settings.viewport from theme.json. Change your breakpoints there and
Zealblocks follows, because it never had its own.
Desktop is the base layer rather than a third band, matching core: it carries no
media query and applies at every width, so Mobile falls back to the base value
when unset, never to Tablet.
Icons
Any icon from the bundled library, positionable left or right. Position is done
with flex-direction: row-reverse rather than order, so the DOM order stays
text-then-icon and the button’s accessible name is unaffected by where the icon
appears. Icons are marked aria-hidden — they are decorative, and the button
text is the accessible name.
Directional icons can be set to mirror in right-to-left languages. It is opt-in
per block, because an arrow should flip and a clock should not.
Privacy
Zealblocks does not collect, store or transmit any data. It makes no external
network requests, sets no cookies, and creates no database tables.
It registers two REST routes under zealblocks/v1, used by the editor to look
up icon names and artwork. Both require the edit_posts capability, read only
from files bundled with the plugin, and are never called by the front end.
Credits
Icons are from Font Awesome Free 7.3.1, licensed CC BY 4.0
(https://fontawesome.com/license/free). Font Awesome is a trademark of
Fonticons, Inc.
