Zealblocks

Опис

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.

Built on the WordPress icon library

The Icon block uses the icon registry WordPress 7.1 added, so it draws on the 88
icons that ship with core rather than bundling its own set — and any icon a
theme or plugin registers appears in it automatically.

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, `style.@tablet.zealblocks.width`

and style.@mobile.zealblocks.width 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

Four built-in icons (arrow, chevron, download, external), 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.

Privacy

Zealblocks does not collect, store or transmit any data. It makes no external
network requests, sets no cookies, creates no database tables, and registers no
REST endpoints or AJAX handlers.

Source code

The JavaScript in build/ is compiled and minified by @wordpress/scripts.
The unminified sources, the build configuration and the full development
history are public at:

https://github.com/rahulvarma722/zealblocks

To build from source: npm install && npm run build.