Bricks Productivity
Bricks Productivity is a professional AI-powered productivity toolkit for Bricks Builder. It adds an advanced bottom CSS editor, AI content and code generation, automated BEM workflows, structure panel enhancements, and visual debugging tools — all directly inside the Bricks editor.
Bricks Productivity is a comprehensive productivity and workflow enhancement plugin
for Bricks Builder, designed for professional developers, designers, and agencies building
high-quality WordPress websites.
It brings advanced CSS tooling, AI-powered content and code generation, BEM automation,
accessibility debugging, and structure panel enhancements directly into the Bricks editor —
eliminating context switching and dramatically speeding up site builds.
Advanced Bottom CSS Panel
A full-featured CSS editor powered by CodeMirror 6, docked below the Bricks preview window.
- Real-time CSS linting with inline error markers
- 50+ TAB shortcuts for properties, selectors, and pseudo-states
- Multi-cursor editing for fast refactors
- Context-aware CSS typeahead and variable picker
- Auto BEM class selection synced with the Structure Panel
- Detachable panel with live sync in a separate window
- Built-in gradient and SVG pattern generators
AI Content & Code Generation
Generate content, images, and code directly inside Bricks using your preferred AI provider.
- Supports OpenAI, Anthropic (Claude), and Google Gemini
- AI text generation via simple inline patterns
- Context-aware code completion for HTML, CSS, PHP, and JavaScript
- AI image generation with direct insertion into Bricks image controls
- Convert AI-generated HTML into native Bricks elements
BEM Workflow Automation
Automate clean, consistent BEM class naming directly from the Structure Panel.
- Automatic BEM class generation from element labels
- Status indicators for applied, available, and conflicting classes
- Rename detection and safe update workflows
- BEM Audit Modal with hierarchical overview and bulk updates
- Conflict prevention and label normalization
Structure Panel Enhancements
- Quick element insertion shortcuts with drag-and-drop grids
- HTML tag selector without losing settings or children
- Builder and frontend visibility toggles
- Expand and collapse controls for complex layouts
- Live class preview on hover
- Isolation Mode to focus on specific layout sections
Content Debug & Accessibility Tools
Visual debugging overlays help catch layout and accessibility issues early.
- Overflow detection for horizontal scroll issues
- Responsive layout guides
- Heading order validation
- Missing image alt text detection
UI to CSS Converter
Convert Bricks UI settings into clean, reusable custom CSS.
- Supports spacing, sizing, borders, flex, grid, and positioning
- Handles responsive breakpoints automatically
- Preserves CSS variables and framework tokens
Built for Professionals
- Modular feature toggles and master enable/disable
- Export and import settings via JSON
- Customizable admin theming and dark/light mode support
- Modern ES6+ architecture
Requirements
- Word