Bricks 2.2 is now live and introduces a major design-system upgrade, alongside powerful new component features and significant workflow improvements.
After extensive beta and release-candidate testing, 2.2 is now ready for production use, and available as a one-click update for all active license holders from your WordPress dashboard.
This release unifies design tokens through the new Style Manager, expands component capabilities with Slots, Style Variants, and Property Bindings, and delivers a faster, more consistent building experience.
The video below highlights the core features introduced in Bricks 2.2. It is based on the early beta and reflects the main features that have since been refined and stabilized for this final release.
Style Manager
Bricks 2.2 introduces a unified Style Manager that centralizes the management of design tokens and styles inside the builder, enabling scalable and maintainable design systems.
This new interface organizes key styling elements into keyboard-accessible tabs for Theme styles, Classes, CSS variables, Color palettes, Typography scales, Spacing scales, CSS framework importer, and the Style Manager settings.
Documentation: http://academy.bricksbuilder.io/article/style-manager/
Color Manager
The new Color Manager in Bricks streamlines your color workflow, supports advanced features like dark mode, shades, transparency, and even generating various complementary colors. All using CSS variables (custom properties) for maximum scalability and maintainability.
- Create, edit, rename, delete, import, and export color palettes as JSON files.
- Manage individual colors with support for light/dark mode variants, variable naming, and direct color picker integration.
- Generate color shades (light, dark, transparent) and harmonies (analogous, monochromatic, complementary, etc.) for enhanced design flexibility.
- Create utility classes for colors (e.g., background, text, border, fill, stroke, outline), which are dynamically added to global classes.
- Convert legacy colors from pre-v2.2 formats to modern HSL-based variables, ensuring backward compatibility.
- Preview and export generated CSS for entire palettes or individual colors.
Color Control (revamped)
The new color control in Bricks 2.2 enhances color selection and management within the builder.
- Quick color value input in any format (raw, HEX, RGB, HSL, CSS variable names) with auto-expansion for complex values (type
varor--to search the variable manager). - Integrate a color picker for visual selection, supporting multiple formats (HSL, RGB, HEX).
- Color palettes access via a popup interface, supporting grid and list views for browsing root colors and their shades (light, dark, transparent).
- Variable picker to choose colors from global palettes, integrating with dynamic data tags.
- Manage palette preferences like active palette and view mode.
This control supports advanced features like shades and transparency, and ensures seamless integration with the builder’s state and palettes.
New element: Toggle – Mode (light/dark)
The “Toggle – Mode” element provides a button to let visitors switch between light and dark mode on your website without page reload. It features:
- Customizable icons for light and dark modes, with default sun/moon SVGs if not specified.
- Styling controls for icon colors and sizes in both modes, applied via CSS properties like color, fill, and font-size.
- Accessibility support with configurable aria-label for screen readers.
- Dynamic rendering based on the project’s default mode (light, dark, or auto), showing the active state accordingly.
Typography & Spacing Scales
The new Typography & Spacing scale generator & editor enables users to create and manage scalable design systems for consistent typography and spacing across projects. It supports:
- Scale creation and editing with options for typography or spacing scopes, including naming, variable prefixes, and baseline steps.
- Scale types such as t-shirt (e.g., 2xs to 2xl), numeric (1 to n), or custom steps, with configurable scale ratios (e.g., Minor Second to Octave).
- Responsive scaling by setting minimum (mobile) and maximum (desktop) font sizes and ratios, generating fluid variables that adapt between breakpoints (via Style Manager “Settings”).
- Variable generation that creates CSS custom properties for each scale step, with previews showing min/max values and typography/spacing examples.
- Utility class configuration allowing users to define class names and CSS properties (e.g., font-size, margin) that map to scale variables, automatically generating global classes.
- CSS export for downloading generated variables and utility classes as files.
- Reset and rename functionality to restore defaults or update scale names.
CSS Framework Importer
The CSS Framework Importer is a tool that lets you extract the classes & variables of any CSS framework into the class & variable manager in Bricks.
Simply paste the content CSS file content into the code editor, and Bricks automatically shows you all extracted classes grouped into categories like layout, colors, and typography. Plus, it extracts all CSS variables.
You can add prefixes to avoid conflicts, choose categories, and import everything with customizable options for custom CSS and variable values.
Component Slots
The Component slots feature in Bricks introduces a powerful way to create flexible, reusable components. By adding Slot elements as placeholders within a component, users can define specific areas where custom content can be inserted when the component is instantiated.
This allows for dynamic content injection, enabling components to adapt to different contexts while maintaining a consistent structure.
When editing a component instance, users can drag and drop elements directly into these virtual slots, which are visually represented in the builder’s structure panel. Slot elements render the assigned content seamlessly, providing a slot-based architecture similar to modern web frameworks.
Component Style Variants
Create multiple visual variations of a component without duplicating its structure by defining custom variants (e.g., primary, secondary styles for buttons) alongside a base/default variant, streamlining design consistency and reusability.
Key capabilities include:
- Variant management for components: Add, rename, and delete custom variants.
- Editing variants during component creation, with a selector to switch between base and custom variants for targeted styling.
- Instance selection for component usages, allowing users to apply specific variants (e.g., different button styles) via a dropdown in the element panel.
- Integration with Gutenberg blocks, exposing variant options as select controls for seamless editing in the WordPress editor.
- Base variant labeling with customizable labels for the default state.
This feature enhances component flexibility, reducing redundancy and enabling efficient style variations across projects.
Nested Components: Property bindings
Nested component property bindings enable developers to connect properties of nested (child) components directly to their parent component’s properties, allowing automatic value inheritance and dynamic updates within component hierarchies.
Components as blocks: Set block icon, category, preview image
The “Components as blocks: Set block icon, category, preview image” feature allows Bricks components to be registered as Gutenberg blocks in the WordPress editor. It provides controls to customize each component’s block representation, including:
- Block category: Assign components to specific Gutenberg block categories (e.g., Bricks components or custom categories) for organized block insertion.
- Block icon: Set a custom icon for the component block in the block inserter, improving visual identification.
- Preview image: Upload or select an image to display as a preview thumbnail in the block editor, enhancing usability and design workflow.
Search Criteria
The new “Search Criteria” feature in Bricks 2.2 provides granular control over search behavior for both native WordPress searches (via Search element and Search Result template) and Filter – Search elements in query filters.
Users can specify which fields to search—such as post fields (title, content, excerpt), term fields (name, slug, description), user fields (username, email, etc.), and custom meta fields—replacing the default WordPress “s” parameter logic.
Optional weight scoring allows ranking results based on field importance, with higher weights prioritizing matches in those fields.
Configurations are set in the Search Result template for native searches or directly in Filter – Search element settings for filtered queries.
Learn more: http://academy.bricksbuilder.io/article/search-criteria/
New Query Type: Array
The new “Array” query type enables querying custom PHP arrays or JSON data directly, allowing dynamic content loops from user-defined data sources without relying on WordPress database queries. It supports pagination, conditional filtering, and integration with dynamic data providers for flexible, custom data handling in elements like Posts or Carousel.
Learn more: https://academy.bricksbuilder.io/article/query-loop/#array
Color, Class & Variable preview on hover (opt-in via Bricks setting)
This productivity boost lets you preview colors, classes, and variables in real-time when you hover over them in the control panel while editing an element.
This opt-in feature can be enabled for all three properties individually under:Bricks > Settings > Builder > Control Panel
Builder: Instant navigation (experimental)
Instant navigation lets you switch between pages in the builder without full reloads or loading screens, making page-to-page editing noticeably faster.
This feature is opt-in and currently marked as experimental, as it may not be compatible with all setups. You can enable it under Bricks > Settings > Builder.
Bricks Templates
“Wireframes” and “Design sets” features have exited the experimental stage and are now stable for production use.
Design sets Liv, Sizzle, Reality, and Digital have been updated with improvements.
The “Community templates” option has been retired. We’ll eventually launch a proper “Template Marketplace” for third-party template contributions (free & paid).
More Highlights
- Spacing control: Remember linked state (enable via Bricks > Settings > Builder)
- Nav menu & nestable: Custom Mobile Menu Breakpoint
- Contextual spacing: Add setting to “Remove default padding”
- Add to cart element: Provide controls to style Group Products
- WooCommerce: New template for “My Account – Payment Methods”
- New filter hooks to use Pagination element for different query object type
- New dynamic data tags:
