內容簡介
ClassyBlocks 是一款為 Gutenberg 編輯器設計的外掛，提供自訂 CSS 類別與設計系統，讓使用者能夠快速創建和應用樣式，提升網站開發效率。
【主要功能】
• 自訂 CSS 類別庫，支援多種狀態
• 9 種內建 CSS 框架可選擇
• 實時預覽功能，無需重新載入
• 一鍵應用，簡化樣式設定
• 包裝管理器，快速匯入匯出類別集
外掛標籤
開發者團隊
② 後台搜尋「ClassyBlocks — Custom CSS Classes, Design System & Preview for Gutenberg」→ 直接安裝（推薦）
原文外掛簡介
Every Gutenberg block needs custom styling. And that’s where your time disappears.
You write the same CSS across 30 blocks. You switch between editor and customizer. One typo in a class name and the layout breaks. Your client calls because they can’t change a button color.
There’s a faster way.
ClassyBlocks gives you a design system command center right inside the WordPress block editor.
Create your classes once — name them, write the rules, preview them live — and apply them anywhere with one click.
What you get
Your own class library — Create and organize CSS classes with full support for :hover, :focus, :active, and :visited. Each class documented and ready to use across your entire site.
9 built-in CSS frameworks — Bootstrap 5.3, Tailwind CSS 3.4, Foundation, Bulma, UIkit, Materialize, Pure CSS, Spectre, and Semantic UI. Toggle each on/off for editor and frontend independently.
Live preview — See how every class looks in real time inside the block editor. No reloads, no switching tabs.
One-click apply — Apply any class to any block with a single click. No typing class names manually.
Pack Manager — Export and import complete class sets as packs. Share your design system across client sites in seconds.
Benefits that move the needle
Ship sites 3x faster — Build your class library once. Apply across pages and posts in minutes, not hours.
Kill support tickets — Clients style their own content using your pre-built classes. They stop calling you for every color change.
Zero performance impact — Minimal stylesheet, zero JavaScript on the frontend. No bloat. No harm to Core Web Vitals.
Works with every theme — Blocksy, GeneratePress, Astra, Twenty Twenty-Four. If it runs Gutenberg, ClassyBlocks works.
Trusted by agencies and freelancers
Used by digital agencies managing 50+ client sites and solo freelancers who want a professional design workflow without the overhead.
Need scroll-driven animations, priority support, and advanced features? Get ClassyBlocks Pro →
How it works
Install and activate the plugin.
Go to the CSS Classes section and create your own classes with the properties you want.
Go to the page editor (Gutenberg).
In the “CSS Classes” section of each block, you can select the plugin’s custom classes.
You can easily combine classes to achieve complex results.
Credits
Developed by Studio Immens – Modular digital solutions for professionals and businesses.
License
This plugin is licensed under the GPL v2 or later.
