Block Class Manager – Global CSS Classes & Responsive Styles for Gutenberg

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

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

⚡ 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.