Blicks – Layout Blocks for the Block Editor

Description

ATOMIC LAYOUT AND CONTENT BLOCKS FOR THE WORDPRESS BLOCK EDITOR, ON ONE DESIGN SYSTEM THAT SYNCS WITH YOUR THEME.JSON

Blicks adds composable layout and content blocks to the native block editor — Section, Box, Stack, Grid, Heading, Text, Buttons, Button, Image, Icon, Spacer and Divider.

Every block draws from one design system. Instead of a color or a font size baked into each block, Blicks keeps a token catalogue whose values resolve through your active theme’s theme.json presets. Set a value once and it applies everywhere, and where your theme defines no scale of its own, Blicks falls back to its own.

Blicks is free and GPL-2.0-or-later. It contacts no external server, ships no license key, and adds no telemetry.

🧱 The blocks

• Section: A full-bleed page band with outer section sizing and independent content sizing controls.
• Box: A generic styled wrapper for cards, panels, and manual layouts.
• Stack: A one-dimensional flex layout for arranging child blocks vertically or horizontally.
• Grid: A two-dimensional layout block for equal-width or auto-fit child columns.
• Heading: A semantic h1–h6 heading that inherits the active theme by default.
• Text: A rich paragraph block for body copy.
• Buttons and Button: A row or column of buttons with shared alignment, spacing and wrapping, each with variants, sizes, links and optional icons.
• Image: A responsive media block with optional link and caption.
• Icon: An inline SVG icon that inherits the current text color.
• Spacer: A responsive empty space block for vertical or horizontal rhythm.
• Divider: A semantic divider for separating content groups.

All of them live in one Blicks category in the inserter.

🎨 Key features

• Theme-native tokens: Blicks tokens (--blicks-*) alias WordPress preset variables (--wp--preset--*, --wp--custom--*), so color, type and spacing values resolve through whatever theme is active.
• Type roles: Semantic typography roles — display, h1–h6, body, lead, small, caption, code, mono — layered on top of the font-size scale, so a heading is styled by the role it plays.
• Named design themes: Snapshot a set of token values, switch between them, or reset back to your theme’s defaults.
• Responsive design: Every style value can be set per device — desktop, tablet and mobile — with tablet and mobile breakpoints you control.
• States: Every style value can also be set per state — default, hover, focus and active.
• Pseudo-elements: Style ::before and ::after as boxes in their own right, from the same controls.
• Custom keyframe animations: Build animations step by step in the admin, then apply them from the block’s Animation controls. Animated rules are wrapped in prefers-reduced-motion: no-preference.
• Container queries: Set a container type and name on a block, and size its children against the container rather than the viewport.
• Visibility and attributes: Hide a block at chosen screen sizes, and add data-*, aria-*, role, title, id, lang or dir attributes to its wrapper.
• HTML importer: Paste markup and Blicks maps each element to the closest block, turning the inline styles it recognizes into ordinary block attributes.

🎛️ Style controls on every block

Block controls are split across three tabs — Settings for what the block is, Style for how it looks, Advanced for visibility and attributes. The Style tab covers:

• Layout: display, flex direction and alignment, grid tracks and areas, gap, width and height bounds, overflow, scroll snap, container queries, aspect ratio, object fit.
• Spacing: padding and margin, per side.
• Typography: type role, family, size, line height, weight, style, letter and word spacing, transform, decoration, alignment, writing mode, text color.
• Background: color, gradient, image, size, position, repeat, attachment, blend mode, background-clip text.
• Border: width, style, color and radius.
• Position, Multi-column, Grid child, Flex child, Effects, Animation, Pseudo-elements and States.

⚡ Output

• One stylesheet, 13 KB gzipped: The runtime stylesheet is 13,301 bytes gzipped, and it is the only stylesheet Blicks enqueues.
• No per-block style tags: Token values become utility classes; custom values become CSS custom properties on the element.
• Per-instance rules collected once: Pseudo-elements, container queries and keyframes are accumulated, deduplicated and attached once per request rather than repeated on every block.
• Plain HTML and CSS: No jQuery, no bundled front-end framework, no shortcodes.

🧰 The Blicks admin

Three screens under the Blicks menu:

• Overview: What is registered, and links to the docs and the issue forms.
• Design System: Token values by category — color, typography, spacing, radius, shadow, gradient, motion, animation, z-index, opacity, border, focus ring, sizing, line height — plus breakpoints, type roles, named themes and the custom animation editor.
• Settings: Plugin behavior, including whether Blicks removes its data on uninstall.

🔒 No external services

Blicks contacts no third-party server. It loads no remote fonts, scripts or styles, and sends no data anywhere. Everything it renders is served from the plugin itself and from your own theme’s settings.

🌐 Translation

Blicks is fully internationalized and ships a .pot file. To contribute a translation, add a language via translate.wordpress.org.

🧑‍💻 Open source

The full source — TypeScript, SCSS, block definitions and build configuration — is public at github.com/blicks-dev/blicks, and the documentation is generated from it at docs.blicks.dev.

💬 Support, feedback and security

Bug reports and feature requests are handled in public, on the GitHub issue tracker:

• Report a bug
• Request a feature
• Questions and how-do-I

Both forms are linked from the plugin itself — under the Blicks row on the Plugins screen, and at the foot of the Blicks Overview screen. A bug report is most useful with the WordPress and PHP versions, the active theme, and the block markup copied from the editor (select the block, then Options → Copy). The form asks for each of these.

Security issues should never be filed as a public issue. Report them privately at github.com/blicks-dev/blicks/security/advisories/new.

External Services

Blicks uses no external services. It contacts no third-party server, loads no remote fonts, scripts or styles, and sends no data anywhere. Everything it renders is served from the plugin itself and from your own theme’s settings.

The only exception is one you control: if you set a background image to an address on another site, the visitor’s browser loads that image from wherever you pointed it. Blicks itself makes no such request.

Source Code

The JavaScript and CSS in the build/ directory are compiled. The full, human-readable source they are built from — TypeScript, SCSS, the block definitions and the build configuration — is public at:

https://github.com/blicks-dev/blicks

To rebuild the plugin from source you need Node.js 20+ and pnpm:

1. git clone https://github.com/blicks-dev/blicks.git && cd blicks
2. pnpm install
3. pnpm build — writes the compiled assets to build/.

The PHP in src/ is shipped as source and is not compiled. Blicks has no production PHP dependencies and bundles no third-party PHP library — the vendor/ directory in the release holds only Composer’s own class autoloader. Composer is otherwise used just for the development tools (PHPUnit, PHP_CodeSniffer), which are never shipped.

Third-Party Licenses

Blicks includes a curated icon registry generated from Lucide icons. Lucide is licensed under ISC; some Lucide icons derive from Feather icons, licensed under MIT. Full notices are in licenses.txt and in the generated icon registry metadata.