內容簡介
Block Class Manager 是一款針對 Gutenberg 的外掛，提供可重用的全域 CSS 類別和響應式樣式控制，幫助使用者建立一致的佈局，提升設計效率。
【主要功能】
• 管理可重用的全域 CSS 類別
• 支援響應式樣式設定
• 直接在 Gutenberg 中控制佈局和樣式
• 自動生成前端 CSS
• 可為 BCM 區塊添加 HTML 屬性
外掛標籤
開發者團隊
② 後台搜尋「Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg」→ 直接安裝（推薦）
原文外掛簡介
Block Class Manager adds reusable Global Classes and responsive styling controls to Gutenberg, providing a structured, class-based workflow for building consistent layouts with BCM blocks.
Manage reusable CSS classes and responsive styles directly in Gutenberg
Create a class once, reuse it across BCM blocks, and control how it behaves on desktop, tablet, and mobile without repeating the same styles over and over.
Block Class Manager enhances the native Gutenberg workflow with a structured, class-based styling system without replacing Gutenberg with another page builder or block library.
🚀 Try BCM in WordPress Playground
Want to see BCM in action without installing anything?
Try the Live Demo
Explore Global Classes, responsive styling, and the BCM workflow directly in a real WordPress editor.
✨ Global Classes & Responsive Styling
Create once. Reuse across your layouts.
BCM lets you create reusable Global Classes and apply them to BCM blocks. Define your styling rules once and reuse them wherever the same design pattern is needed.
You can also control responsive values for desktop, tablet, and mobile, using the breakpoint values provided by your active WordPress theme.
With BCM you can:
Create and manage up to 10 reusable Global Classes
Apply Global Classes to BCM blocks
Convert local styles into reusable Global Classes
Configure responsive values per device
Control layout and styling directly inside Gutenberg
Generate frontend CSS automatically
Add HTML attributes such as id, data-*, and aria-*
Use BCM with pages, posts, and FSE template parts
🔄 How It Works
Create or select a BCM block: Container, Text, Media, or Button.
Style the block: Use local styling controls for your specific block.
Create a Global Class: Turn reusable styling rules into a class.
Reuse the class: Apply the same Global Class to other BCM blocks.
Adjust responsive values: Define how your styles behave across desktop, tablet, and mobile.
This gives you a more consistent styling workflow without repeatedly configuring the same values on individual blocks.
🧱 Lightweight Foundation Blocks
BCM includes a small set of foundation blocks – Container, Text, Media, and Button – for creating structured Gutenberg layouts.
These blocks are intentionally minimal and focus on structure and clean markup. Styling is handled through BCM’s local styling controls and reusable Global Classes.
BCM is not a page builder or a traditional block library. The foundation blocks provide a lightweight base for the BCM styling workflow while Gutenberg remains at the center of your editing experience.
🔌 Gutenberg & WordPress Integration
BCM is designed to work alongside the WordPress block editor and block-based themes.
Gutenberg Editor
BCM controls are integrated directly into the WordPress block editor.
Full Site Editing (FSE)
Compatible with block-based themes, templates, and template parts.
WordPress Content
Supports pages, posts, and FSE template parts.
Using BCM Global Classes with native WordPress Core blocks requires BCM Extension.
The optional BCM Extension adds the Global Class Engine for native Core blocks, allowing you to use BCM Global Classes beyond BCM foundation blocks.
🚀 BCM Extension
BCM Extension adds advanced workflow and inspection features for larger and more complex Gutenberg projects.
Features include:
Unlimited Global Classes
Drag & Drop Global Class priority management
Global Class usage counter
Generated CSS Inspector (Global & Local CSS viewer)
Style Origin Inspector (CSS cascade visualization)
Enhanced responsive value indicators
Global Class Engine for native WordPress Core blocks
Enhanced “Additional CSS Class(es)” field with Global Class suggestions
The Extension is available separately as a free, pay-what-you-want add-on.
👉 Get BCM Extension
⚡ Why Block Class Manager
Styling Gutenberg layouts can become repetitive when the same spacing, layout, and design rules have to be configured again and again.
BCM introduces a reusable, class-based workflow so you can define styling rules once and reuse them across your layouts.
Instead of repeatedly configuring the same values on individual blocks, you can centralize reusable styles in Global Classes and control responsive behavior from the Gutenberg editor.
💡 Use Cases
Create reusable styling patterns with Global Classes
Standardize spacing and layout rules
Reuse the same styles across multiple BCM blocks
Build responsive layouts with desktop, tablet, and mobile controls
Reduce repetitive block configuration
Create more consistent Gutenberg-based websites
📦 Installation
Requirements
WordPress 6.7 or higher
PHP 8.0 or higher
Installation Steps
Upload the plugin to /wp-content/plugins/ or install it through the WordPress plugin installer.
Activate Block Class Manager.
Open the Gutenberg editor and add a BCM block.
Start creating local styles and reusable Global Classes.
