內容簡介
Blicks 是一款為 WordPress 區塊編輯器提供的佈局與內容區塊外掛，能夠與主題的 theme.json 同步，讓使用者輕鬆創建一致性的設計。它提供多種可組合的區塊，簡化了內容的排版與設計流程。
【主要功能】
• 提供多種可組合的區塊，如 Section、Box、Grid 等
• 支援主題的設計系統，確保樣式一致性
• 無需外部伺服器或授權金鑰，完全免費
外掛標籤
開發者團隊
② 後台搜尋「Blicks – Layout Blocks for the Block Editor」→ 直接安裝（推薦）
原文外掛簡介
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:
git clone https://github.com/blicks-dev/blicks.git && cd blicks
pnpm install
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.
