[WordPress] 外掛分享: ClassyBlocks — Custom CSS Classes for Gutenberg Blocks

首頁外掛目錄 › ClassyBlocks — Custom CSS Classes for Gutenberg Blocks
WordPress 外掛 ClassyBlocks — Custom CSS Classes for Gutenberg Blocks 的封面圖片
全新外掛
安裝啟用
尚無評分
11 天前
最後更新
問題解決
WordPress 5.8+ PHP 7.4+ v2.3.0 上架:2025-07-17

內容簡介

Studio Immens CSS Classes 是一款針對開發者設計的外掛,旨在提升基於 Gutenberg 的 WordPress 網站的速度與靈活性。此外掛讓使用者能夠輕鬆使用自訂的實用 CSS 類別,省去重複編寫 CSS 的麻煩,並提供即時預覽功能。

【主要功能】
• 支援多種流行的 CSS 框架
• 一鍵選擇所需的 CSS 類別
• 即時預覽類別效果於 Gutenberg 區塊
• 無需手動編碼,快速應用類別
• 輕量級 CSS 檔案,無性能影響

外掛標籤

開發者團隊

⬇ 下載最新版 (v2.3.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「ClassyBlocks — Custom CSS Classes for Gutenberg Blocks」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

ClassyBlocks transforms how you style Gutenberg blocks. Instead of wrestling with theme CSS, writing repetitive rules, or switching back and forth between editors, you can create and apply custom CSS classes directly from the block editor — with real-time preview and one-click application.
Whether you’re building a simple landing page or a complex multi-site network, ClassyBlocks keeps your workflow fast, consistent, and maintainable.
Key Features

Custom CSS Class Manager — Create your own library of CSS classes with full support for :hover, :focus, :active, and :visited pseudo-states. Name, describe, and organize each class with its own CSS rules.
9 Built-in CSS Frameworks — Bootstrap 5.3, Materialize, Pure CSS, Bulma, UIkit, Spectre, Semantic UI, Foundation, and Tailwind CSS. Toggle each framework on/off independently for the editor and the frontend.
Live Preview in Gutenberg — See exactly how each class looks in real time, directly inside the block editor. No more guesswork or page reloads.
One-Click Application — Apply any custom or framework class to a block with a single click. No typing class names manually.
Pack Manager — Export, import, and share complete sets of CSS classes as packs. Perfect for agencies managing multiple sites or teams collaborating on design systems.
Interactive Preview Mode — Test your classes interactively with Auto and Interactive modes that cycle through pseudo-states.

What you can do

Design faster — Build a reusable library of utility classes and apply them across your entire site in seconds.
Stay organized — Group classes into packs by project, component, or design system. Search, filter, and manage everything from one dashboard.
Work with any theme — ClassyBlocks works with every WordPress theme. It integrates especially well with Blocksy, GeneratePress, Astra, and other modern block-ready themes.
Keep performance tight — The plugin generates a minimal, optimized stylesheet with zero JavaScript overhead on the frontend. No bloat, no slowdowns.

Perfect for

Developers and agencies building client sites with consistent design systems.
Freelancers who want to speed up their Gutenberg workflow without custom coding every time.
Site owners who want more design flexibility without installing a page builder.

ClassyBlocks — the smart way to manage CSS classes in WordPress.
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.

延伸相關外掛

文章
Filter
Mastodon