Title: ClassyBlocks — Custom CSS Classes, Design System & Preview for Gutenberg Author: Studio Immens Published: 2025 年 7 月 18 日 Last modified: 2026 年 7 月 27 日 --- 搜尋外掛 ![](https://ps.w.org/studio-immens-css-classes/assets/banner-772x250.png?rev=3552833) ![](https://ps.w.org/studio-immens-css-classes/assets/icon-128x128.png?rev=3552715) # ClassyBlocks — Custom CSS Classes, Design System & Preview for Gutenberg 由 [Studio Immens](https://profiles.wordpress.org/innovazioneweb/) 開發 [下載](https://downloads.wordpress.org/plugin/studio-immens-css-classes.2.3.5.zip) * [詳細資料](https://tw.wordpress.org/plugins/studio-immens-css-classes/#description) * [使用者評論](https://tw.wordpress.org/plugins/studio-immens-css-classes/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/studio-immens-css-classes/#installation) * [開發資訊](https://tw.wordpress.org/plugins/studio-immens-css-classes/#developers) [技術支援](https://wordpress.org/support/plugin/studio-immens-css-classes/) ## 外掛說明 **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 ](https://studioimmens.com/classyblocks-pro/) ### How it works 1. Install and activate the plugin. 2. Go to the CSS Classes section and create your own classes with the properties you want. 3. Go to the page editor (Gutenberg). 4. 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](https://www.studioimmens.com) – Modular digital solutions for professionals and businesses. ### License This plugin is licensed under the GPL v2 or later. ## 螢幕擷圖 [⌊Custom CSS class creation and management dashboard.⌉⌊Custom CSS class creation and management dashboard.⌉[ Custom CSS class creation and management dashboard. [⌊New CSS Class creation modal with interactive preview.⌉⌊New CSS Class creation modal with interactive preview.⌉[ New CSS Class creation modal with interactive preview. [⌊Settings page with CSS framework toggles and Tailwind configuration.⌉⌊Settings page with CSS framework toggles and Tailwind configuration.⌉[ Settings page with CSS framework toggles and Tailwind configuration. [⌊Pack Manager for importing, exporting, and organizing CSS class packs.⌉⌊Pack Manager for importing, exporting, and organizing CSS class packs.⌉[ Pack Manager for importing, exporting, and organizing CSS class packs. [⌊Resources page showcasing other Studio Immens plugins.⌉⌊Resources page showcasing other Studio Immens plugins.⌉[ Resources page showcasing other Studio Immens plugins. [⌊CSS classes grid with live preview and search functionality.⌉⌊CSS classes grid with live preview and search functionality.⌉[ CSS classes grid with live preview and search functionality. ## 適用於區塊編輯器 這個外掛提供 1 個可供區塊編輯器使用的區塊。 * Studioimmens Css Editor ## 安裝方式 1. Download the plugin from GitHub or the repository. 2. Upload the `studioimmens-css-classes` folder to the `/wp-content/plugins/` directory. 3. Activate the plugin from the WordPress “Plugins” section. 4. Go to the CSS Classes section and create your own classes with the properties you want. 5. Start using advanced CSS classes in your Gutenberg blocks. ## 常見問題集 ### Is it compatible with all themes? Yes, but it’s designed to integrate seamlessly with Blocksy, GeneratePress, Astra, and other themes with a modern structure and clean semantics. ### Can I add my own custom classes? Of course. Go to the CSS Class section and create as many classes with the properties you want. ### Will the plugin slow down my site? No. The CSS file is minimal, loads optimally, and doesn’t include JavaScript. ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈ClassyBlocks — Custom CSS Classes, Design System & Preview for Gutenberg〉的開發相關工作。 參與者 * [ Studio Immens ](https://profiles.wordpress.org/innovazioneweb/) [將〈ClassyBlocks — Custom CSS Classes, Design System & Preview for Gutenberg〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/studio-immens-css-classes) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/studio-immens-css-classes/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/studio-immens-css-classes/)， 或透過 [RSS](https://plugins.trac.wordpress.org/log/studio-immens-css-classes/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/studio-immens-css-classes/)。 ## 變更記錄 #### 2.3.0 * Added WordPress.org SVN deploy automation via GitHub Actions. * Updated screenshots and WordPress.org assets. * Improved readme.txt description and formatting. * Fixed Tested up to version consistency. #### 2.2.0 * Tailwind CSS now bundled locally (no external CDN dependency) * Enhanced security: CSS sanitization, file upload validation, XSS fixes * Improved localization: all JavaScript strings are translatable * Replaced uniqid() with wp_generate_uuid4() for stronger IDs * Added HTTP method checks to all AJAX handlers * Various performance and security improvements #### 2.1.0 * Rebrand: Studio Immens CSS Classes ClassyBlocks * Introdotto ClassyBlocks Pro: animazioni scroll-driven, Pack Manager e funzionalità premium #### 1.2.1 * bug fix * Added setting page options #### 1.1.1 * bug fix #### 1.1.0 * Added multiple set of framework CSS easly selectable from editor ( bootstrap, materialize, purecss, uikit, spectre, bulma, semantic ) * Added setting page #### 1.0.0 * Initial stable release * Added core set of CSS utility classes * Compatibility with Gutenberg and Blocksy, GeneratePress, and Astra themes ## 中繼資料 * 版本 **2.3.5** * 最後更新 **1 個月前** * 啟用安裝數 **10+** * WordPress 版本需求 ** 5.8 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0.4** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/studio-immens-css-classes/) * 標籤: * [css](https://tw.wordpress.org/plugins/tags/css/)[design](https://tw.wordpress.org/plugins/tags/design/) [Frontend](https://tw.wordpress.org/plugins/tags/frontend/)[utility classes](https://tw.wordpress.org/plugins/tags/utility-classes/) * [進階檢視](https://tw.wordpress.org/plugins/studio-immens-css-classes/advanced/) ## 評分 這個項目尚無任何評論記錄。 [撰寫評分](https://wordpress.org/support/plugin/studio-immens-css-classes/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/studio-immens-css-classes/reviews/) ## 參與者 * [ Studio Immens ](https://profiles.wordpress.org/innovazioneweb/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/studio-immens-css-classes/)