This release brings a major design-system upgrade with powerful new component features and significant workflow improvements.
Bricks 2.2 was released earlier this week and is available as a one-click update for all active license holders.
Style Manager
A unified hub that centralizes all your design tokens and styles inside the builder. Manage theme styles, classes, CSS variables, color palettes, typography scales, and spacing scales. All from keyboard-accessible tabs.
Color Manager
Streamline your color workflow with support for dark mode, shade generation (light, dark, transparent), and color harmonies (analogous, complementary, etc.). Create utility classes for backgrounds, text, borders, and more. All powered by CSS variables for maximum scalability.
Revamped Color Control
Quick color input in any format (HEX, RGB, HSL, CSS variables) with auto-expansion. Type var or -- to instantly search your variable manager. Access palettes in grid or list view, browse shades, and integrate with dynamic data.
Typography & Spacing Scales
Build consistent design systems with scalable typography and spacing. Choose t-shirt sizing (2xs … 2xl), numeric scales, or custom steps. Set min/max values for fluid-responsive scaling between breakpoints.
CSS Framework Importer
Paste any CSS framework’s content, and Bricks automatically extracts all classes and variables, organized by category (layout, colors, typography). Add prefixes to avoid conflicts and import with customizable options.
Component Slots
Add placeholder areas within your components where custom content can be inserted when instantiated. Drag and drop elements directly into virtual slots, just like modern web frameworks.
Component Style Variants
Create multiple visual variations (primary, secondary, outline, etc.) without duplicating structure. Define a base variant plus custom variants, then select which to apply per instance. Works seamlessly in Gutenberg too.
Nested Property Bindings
Connect child component properties directly to parent component properties. Values inherit automatically and update dynamically throughout your component hierarchy.
Components as Gutenberg Blocks
Register components as Gutenberg blocks with custom icons, categories, and preview images for better organization and visual identification in the WordPress editor.
Search Criteria
Take granular control over search behavior. Specify exactly which fields to search (post title, content, excerpt, term fields, user fields, custom meta) and assign weight scores to prioritize important matches.
New Query Type: Array
Query custom PHP arrays or JSON data directly without relying on WordPress database queries. Supports pagination, conditional filtering, and integration with dynamic data providers.
New Element: Light/Dark Mode Toggle
Let visitors switch between light and dark mode instantly. No more page reload required. Customizable icons, colors, and accessibility labels included.
Real-Time Hover Previews
Preview colors, classes, and variables instantly when hovering over them in the control panel. Enable individually under Bricks > Settings > Builder > Control Panel.
Instant Navigation (Experimental)
Switch between pages in the builder without full reloads or loading screens. Opt-in under Bricks > Settings > Builder.
Template Updates
Wireframes and Design Sets are now stable. Liv, Sizzle, Reality, and Digital design sets have been refreshed with improvements.
Full changelog: Bricks 2.2 Changelog – Bricks
Watch the feature overview: https://www.youtube.com/watch?v=QQatSyYJcEA
Style Manager docs: Style Manager – Bricks Academy
Search Criteria docs: Search Criteria – Bricks Academy
Array Query docs: Query Loop – Bricks Academy
Update now and let us know what you think!