Title: Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg Author: Block Class Manager Published: Jiyè 20, 2026 Last modified: Septanm 18, 2026 --- Search plugins ![](https://ps.w.org/block-class-manager/assets/banner-772x250.png?rev=3688569) ![](https://ps.w.org/block-class-manager/assets/icon-256x256.png?rev=3688569) # Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg By [Block Class Manager](https://profiles.wordpress.org/blockclassmanager/) [Download](https://downloads.wordpress.org/plugin/block-class-manager.0.0.6.zip) * [Details](https://hat.wordpress.org/plugins/block-class-manager/#description) * [Reviews](https://hat.wordpress.org/plugins/block-class-manager/#reviews) * [Development](https://hat.wordpress.org/plugins/block-class-manager/#developers) [Support](https://wordpress.org/support/plugin/block-class-manager/) ## Description 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](https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fblockclassmanager.com%2Fwp-json%2Fbcm-playground%2Fv1%2Fdemo%2Fbcm-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 1. **Create or select a BCM block**: Container, Text, Media, or Button. 2. **Style the block**: Use local styling controls for your specific block. 3. **Create a Global Class**: Turn reusable styling rules into a class. 4. **Reuse the class**: Apply the same Global Class to other BCM blocks. 5. **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](https://blockclassmanager.gumroad.com/l/block-class-manager-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 1. Upload the plugin to `/wp-content/plugins/` or install it through the WordPress plugin installer. 2. Activate Block Class Manager. 3. Open the Gutenberg editor and add a BCM block. 4. Start creating local styles and reusable Global Classes. ## Screenshots [⌊Create and manage reusable Global Classes directly in the Gutenberg editor.⌉⌊Create and manage reusable Global Classes directly in the Gutenberg editor.⌉[ Create and manage reusable Global Classes directly in the Gutenberg editor. [⌊Block Class Manager control panel for styling and layout.⌉⌊Block Class Manager control panel for styling and layout.⌉[ Block Class Manager control panel for styling and layout. [⌊Control flex layout properties directly from the Gutenberg editor.⌉⌊Control flex layout properties directly from the Gutenberg editor.⌉[ Control flex layout properties directly from the Gutenberg editor. [⌊View and manage your Global Classes in one place.⌉⌊View and manage your Global Classes in one place.⌉[ View and manage your Global Classes in one place. [⌊Manage Global Class states and edit their styling rules.⌉⌊Manage Global Class states and edit their styling rules.⌉[ Manage Global Class states and edit their styling rules. [⌊Quickly find and apply Global Classes with autocomplete and search.⌉⌊Quickly find and apply Global Classes with autocomplete and search.⌉[ Quickly find and apply Global Classes with autocomplete and search. [⌊Set HTML elements and custom attributes such as ID, data-*, and ARIA attributes.⌉⌊ Set HTML elements and custom attributes such as ID, data-*, and ARIA attributes.⌉[ Set HTML elements and custom attributes such as ID, data-*, and ARIA attributes. [⌊Control responsive styles for tablet layouts.⌉⌊Control responsive styles for tablet layouts.⌉[ Control responsive styles for tablet layouts. [⌊Control responsive styles for mobile layouts.⌉⌊Control responsive styles for mobile layouts.⌉[ Control responsive styles for mobile layouts. [⌊Control margin and padding with dedicated spacing controls.⌉⌊Control margin and padding with dedicated spacing controls.⌉[ Control margin and padding with dedicated spacing controls. ## FAQ ### What does BCM do? BCM adds a structured, class-based styling workflow to Gutenberg using reusable Global Classes, local styling controls, and responsive design rules. ### Is BCM a page builder? No. BCM is not a page builder. It enhances Gutenberg with a structured styling layer while keeping the WordPress block editor at the center of the workflow. ### Do I need to replace my existing Gutenberg blocks? No. BCM is designed to complement Gutenberg rather than replace it. Its foundation blocks provide the core BCM styling workflow, while BCM Extension can extend Global Classes to native WordPress Core blocks. ### Can I use BCM Global Classes with native WordPress Core blocks? Yes, with **[BCM Extension](https://blockclassmanager.gumroad.com/l/block-class-manager-extension)**. The Extension includes the Global Class Engine, which allows BCM Global Classes to be used with native WordPress Core blocks. ### Who is BCM designed for? BCM is designed for freelancers, agencies, developers, and advanced WordPress users who want a more structured and reusable styling workflow inside Gutenberg. ### Is there a limit on Global Classes? Yes. The WordPress.org version supports up to 10 Global Classes. **[BCM Extension](https://blockclassmanager.gumroad.com/l/block-class-manager-extension)** removes this limit. ### Is BCM Extension available? Yes. **[BCM Extension](https://blockclassmanager.gumroad.com/l/block-class-manager-extension)** is available separately with a pay-what-you-want 0+ model and adds advanced workflow features, including unlimited Global Classes and support for Global Classes on native WordPress Core blocks. ### Does BCM work with block-based themes? Yes. BCM supports Full Site Editing workflows, including block-based themes, templates, and template parts. ### Does BCM affect performance? BCM generates class-based frontend CSS and is designed to avoid unnecessary repeated inline styling. ## Reviews ![](https://secure.gravatar.com/avatar/b6b1e766a6d3f8e8188072f2096b5009efedd4480aaecad579a904083132ce8a? s=60&d=retro&r=g) ### 󠀁[Excellent for block styling](https://wordpress.org/support/topic/excellent-for-block-styling/)󠁿 [banner10](https://profiles.wordpress.org/banner10/) Septanm 9, 2026 A very useful tool for managing reusable CSS classes directly in Gutenberg. The responsive controls and global class system make it much easier to keep styling consistent. Lightweight and well integrated with the Block Editor. [ Read all 1 review ](https://wordpress.org/support/plugin/block-class-manager/reviews/) ## Contributors & Developers “Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg” is open source software. The following people have contributed to this plugin. Contributors * [ Block Class Manager ](https://profiles.wordpress.org/blockclassmanager/) [Translate “Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg” into your language.](https://translate.wordpress.org/projects/wp-plugins/block-class-manager) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/block-class-manager/), check out the [SVN repository](https://plugins.svn.wordpress.org/block-class-manager/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/block-class-manager/) by [RSS](https://plugins.trac.wordpress.org/log/block-class-manager/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.0.6 * Update: Improved UI labels and styling for a clearer and more consistent user experience. #### 0.0.5 * Fix: Corrected stylesheet registration to ensure proper CSS versioning and cache invalidation. #### 0.0.4 * Update: BCM now uses the breakpoint values defined by the active theme via `theme. json`, with fallback values for compatibility. #### 0.0.3 * Fix: Placeholder image path. * Update: Added the `bcm-block` base class to improve frontend styling consistency and provide a shared selector for BCM blocks. #### 0.0.2 * Fix: Improved handling of block styles after duplicating or removing blocks in the editor. #### 0.0.1 * Initial release. ## Meta * Version **0.0.6** * Last updated **3 jou ago** * Active installations **Fewer than 10** * WordPress version ** 7.0 or higher ** * Tested up to **7.1.1** * PHP version ** 8.0 or higher ** * Language * [English (US)](https://wordpress.org/plugins/block-class-manager/) * Tags * [block-editor](https://hat.wordpress.org/plugins/tags/block-editor/)[css](https://hat.wordpress.org/plugins/tags/css/) [gutenberg](https://hat.wordpress.org/plugins/tags/gutenberg/)[responsive](https://hat.wordpress.org/plugins/tags/responsive/) [wordpress blocks](https://hat.wordpress.org/plugins/tags/wordpress-blocks/) * [Advanced View](https://hat.wordpress.org/plugins/block-class-manager/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/block-class-manager/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/block-class-manager/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/block-class-manager/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/block-class-manager/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/block-class-manager/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-class-manager/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/block-class-manager/reviews/) ## Contributors * [ Block Class Manager ](https://profiles.wordpress.org/blockclassmanager/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/block-class-manager/)