BricksMate

Your personal toolkit for Bricks Builder — BEM generator, CSS recipes, smart values, configurable shortcuts and more, with a clean, explained settings panel.

BricksMate is a suite of tools that extend the Bricks Builder editor. It adds a master–detail settings panel where every module is explained with a live example, so you always know what each tool does before enabling it. Each module can be toggled on or off independently.

Modules

• BEM Generator — generate and rename CSS classes with BEM naming in bulk.
• Style Indicators — colored bar per element (blue = styles via CSS class, red = styles via ID).
• Sidebar Shortcuts — a configurable quick-insert rail (add, remove and reorder elements).
• HTML Tags — change an element's semantic tag from the structure panel.
• Auto-Select Class — selects the class automatically after create/rename.
• Export ID Styles to Class — move ID-level styles to the first CSS class.
• CSS Recipes — expand shortcuts like @clickable-parent; into full CSS.
• Expand Children — expand or collapse an element's entire subtree at once.
• Smart Values — press Enter to turn --space-m into var(--space-m), and var(--x) * 2 into calc(var(--x) * 2).

Installation

1. Upload the plugin ZIP via Plugins → Add New → Upload Plugin, or copy the bricksmate folder to wp-content/plugins/.
2. Activate BricksMate through the Plugins screen.
3. Open the Bricks Builder editor — a BricksMate icon appears in the top toolbar.
4. Click it to open the settings panel and enable the modules you want.

Requirements

• WordPress 6.0+
• Bricks Builder
• PHP 7.4+

Support

If BricksMate saves you time, you can support its development ☕

License

GPLv2 or later.