Changelog Latest

The preview canvas could shrink and leave empty space to the right and bottom whenever Bricks Builder’s built-in "scale to fit" kicked in (for example, viewing a fixed-width breakpoint on a smaller screen) while a panel — like the CSS Panel — was docked around it. The canvas now scales to fill the available space correctly whether or not you have panels docked.

Tooltips on small icons and badges (like the Structure Panel’s new "R" Rename badge) could pop up right on top of the icon instead of floating clearly above it. Tooltips throughout the plugin now keep proper clearance from what they’re pointing at.

The "Rename" button on Structure Panel items is now a small "R" badge instead of a wordy text button, so it no longer crowds the row — hover it for a tooltip, or find "Rename" as the first item in the row’s Actions Menu whenever it’s available.

Using AI Suggest in Font Pairing (or navigating back/forward through your suggestion history) updated the live font preview correctly, but the Family, Weight, and Style dropdowns stayed stuck showing the previous font — they now update correctly every time.

The "AI Provider" and "Preset" fields in Font Pairing were searchable text boxes instead of simple dropdowns. They’re now plain dropdowns, matching the rest of the modal.

Several places still referred to "Content Debug" or "Debug Tools" from before this feature was renamed to "Content Helpers" — the toolbar button’s tooltip and popover, the results panel title, the Quick Setup Wizard, a note in Settings, and the built-in documentation now all consistently say "Content Helpers".

Element Shortcuts’ "Enable on Panel" option now defaults to off, and docks to the bottom (instead of the top) the first time you turn it on.

The CSS Troubleshooter now defaults to off, and its toggle moved from "Bricks Enhancements" to "Content Helpers" in Settings, since it’s a page-inspection tool rather than a builder UI tweak.

The small caret menu on CSS Panel pills (for renaming, locking, or deleting a class) is now about 1.5x bigger, making it easier to click.

A new "Template Element – Query Property" PHP snippet (find it in the Code Snippets tab) lets a Bricks Template element supply a query that a loop nested inside that template can reuse instead of configuring its own — handy for facet-filtered listings where a loop lives inside a shared template and needs the same filtered results. Enable "Provide a query" on the Template element and build your query, then tick the new "Use Template Query" option on the loop element inside it.

The CSS Panel’s color helper (the small swatch that pops up next to a color value so you can pick a new one) now correctly works with oklch() colors. It previously only recognized and edited oklab() colors, so clicking near an oklch() value wouldn’t bring up the swatch, and picking a new color always wrote it back as oklab(). Both directions now correctly use oklch(), matching a change in the underlying color-picker library.

The "Bricks Templates" dockable panel now shows a pinned Bricks group at the top, linking straight to the Templates list and Settings screens in WP Admin — no need to leave the builder to jump to either.

A new "Auto-save Bricks editor on Settings save" option (find it under General Settings → Features, on by default) means saving the Settings modal while the Bricks builder is open now also clicks Bricks’ own Save button for you — handy if you often forget to save your page separately. Turn it off if you sometimes have unrelated unsaved page edits you’re not ready to publish yet.

When manually selecting a font like Poppins or Open Sans in Font Pairing, the Weight and Style dropdowns only ever showed a single "400" weight option and no Italic — even though those fonts have many weights and italic styles available. The dropdowns have been rebuilt so all available weights and styles show correctly.

Our dockable panels (Bricks Templates, Favorite Links, the CSS Panel, etc.) were breaking Bricks Builder’s own Style Manager "Preview" — the small live preview shown inside the Style Manager popup would render at a tiny, squashed height. Docked panels now stay out of the way while Style Manager Preview is open.

Following the fix above, opening and then closing Style Manager while you had a custom preview width set (via Preview Resize) would reset the canvas back to full width instead of restoring the width you’d chosen, and the on-canvas width labels would keep showing the wrong size. Your custom width now survives opening and closing Style Manager untouched.

The "B" (Block) and "E" (Element) badges in the BEM Audit modal used your theme’s accent color, which could make them hard to read depending on your color scheme. They now use fixed, always-legible colors.

The expand/collapse arrow on a Structure Panel row could turn the wrong color — for example, black on an accent-colored selected row — because it was picking up the row’s own auto-contrast text color instead of staying its normal color. It now always displays correctly regardless of row color.

Styling a Bricks Component’s root/top-level element by its "ID" in our CSS Panel silently had no effect on your site, even though the exact same edit worked fine through Bricks’ own native Style Manager. This is now fixed — the CSS Panel correctly targets the same style rule Bricks itself uses for a Component’s root element, in both the regular and detached CSS Panel. The badge shown while editing it now also reads "Component Class" instead of "Editing Class", so it’s clear this is a special, shared style rather than an ordinary reusable class.

A guided Quick Setup Wizard replaces the old one-click "Enable Default Set" button. It walks you through six simple yes/no questions — CSS Framework, AI Tools, BEM, Fonts, Animations, and a final "enable everything else" step — and answering automatically advances you to the next question. Every answer is fully explicit: answering "No" always turns a feature off, not just "leaves it alone." If you’re on the Free tier, the AI Tools and Fonts questions are skipped entirely since those are Pro features.

A standalone Keyboard Shortcuts panel is now available via Alt+Shift+K from anywhere in the builder, so you can review or edit your shortcuts without opening the full Settings modal. Changes save immediately.

A new "Favorite Links Panel" Code Snippet (find it under Settings → Code Snippets) adds a dockable panel of your own bookmarked links, grouped however you like — handy for quick access to Bricks resources, ecosystem tools, or design-inspiration sites you visit often.

Locked Pro features in Settings now show a proper upgrade notice — the feature’s name, a description of what it does, and a "View Plans on BRXProd.com" button — instead of leaving the full settings panel visible (but non-functional) underneath a locked switch.

The CSS Panel’s color helper (the little color swatch that pops up next to a color value so you can pick a new one) was closing itself the moment you switched between HEX/HSL/OKLAB color formats, instead of just updating the display. Switching formats now keeps the picker open so you can keep adjusting the color.

The CSS Panel’s color helper also wasn’t appearing at all for oklab(...) color values — it only recognised older color formats like hex and rgb. It now recognises oklab() too.

The Structure Panel’s HTML tag selector (the small dropdown that lets you change an element’s tag, e.g. div to section) had a contrast problem where the currently-selected tag’s text was hard to read against its highlighted background.

A few popup windows — the Docs/Code Manager launcher, the connectivity-warning popup, and the "Paste All" prompt — had header bars colored with your chosen accent color, which sometimes made the header text hard to read. They now use Bricks Builder’s own dark panel color instead, for consistent readability regardless of your theme.

The Settings modal is reorganised again: the old "Experimental" tab is gone, with Bricks Modifications and Convert UI to CSS folded into the main Settings tab (now called Main). Tabs are grouped with free features first, then Pro features, each alphabetized, with icons on a couple of settings-only tabs.

The General Settings tab is now split into two clearly-labeled columns — Theming and Features — instead of one long stacked list.

The Bricks Modifications and Convert UI to CSS panes have clearer explanations of what they actually do.

Several places across the plugin had low-contrast or hard-to-read text depending on your chosen theme color — fixed throughout the Structure Panel, Element Shortcuts, and a few spots in the Documentation page.

Documentation updated throughout to match the current Settings layout and this release’s new features.

Translations refreshed for German, Spanish, French, and Italian.

A new CSS Troubleshooter tool helps you track down broken CSS. Open it from a new toolbar icon (enable it under Settings → Bricks Enhancements) to see every stylesheet loaded on your page — for either the Main Window or the Preview — in cascade order, pretty-printed and colour-highlighted, with WordPress core styles, external stylesheets, and editor chrome filtered out by default so your own CSS is front and centre. It flags exactly where a stylesheet is broken badly enough that the browser silently drops everything after that point (the classic cause: a forgotten /* comment closer), separately from ordinary linting issues, and lets you click any issue to jump straight to it. If you have an AI provider connected, you can ask it a question like "why isn’t .my-class blue?" and it will look at both your CSS and your page’s structure to work out which rule is actually winning and why.

A new Bricks Templates Panel code snippet (find it under Settings → Code Snippets) adds a dockable panel listing all of your local Bricks Templates, grouped by type (Header, Footer, Single, Section, Popup, Archive, and more). Click any template to open it for editing in a new tab.

The CSS Panel’s ID and Class colour-tinting (orange for IDs, green for classes) wasn’t visually showing up for existing users — old saved colours are now automatically corrected to the new defaults.

The "Add Pattern" button in BEM Tools was stretching to the full width of its panel instead of sizing to its content.

The CSS linter was incorrectly flagging a missing semicolon on the very last property in a CSS block — that’s actually valid CSS, and no longer gets flagged.

A rare console error could prevent the Preview iframe from picking up your chosen theme colours if it loaded before the iframe was fully ready.

Structure Panel items for components and slots no longer have their colours overridden — they keep Bricks’ own styling as intended.

The Settings modal’s feature tabs (Production, AI Tools, Experimental) now use a vertical layout with pill-style tabs showing a Free/Pro badge, and the selected tab’s settings appear in a clearly separated panel.

The Settings modal was reorganised: the "Features" tab is now called Settings, "General Interface" is now General Settings, and the old standalone Style and CSS Typeaheads tabs have been folded into General Settings and the Bricks Enhancements section respectively — fewer top-level tabs to hunt through.

Switching tabs anywhere in the Settings modal now animates consistently — a few spots previously switched instantly while the rest faded smoothly.

The "CSS Variable lookup exclusions" field (previously "Exclude CSS Variable Patterns") now uses a proper tag-style input instead of a raw comma-separated text box, making it easier to see and edit your excluded patterns.

The Code Snippets tab now keeps its filter bar in view while you scroll through the snippet cards, and the introductory text has moved to an info box at the bottom so it doesn’t take up space at the top.

The BEM Audit and Attribute Bar modals have been resized to better fit their content (BEM Audit is more compact; Attribute Bar has more room).

New installs now ship with a more complete set of features enabled out of the box, including the new CSS Troubleshooter, side panel docks, and Bricks animation overrides.

A new Style tab in Productivity Settings brings all the editor-interface colours into one place. Choose a colour scheme (Auto, Light or Dark), a theme accent, and a Compact density for the plugin’s UI, and set the colours used for element IDs, classes and attributes everywhere they appear (CSS-panel pills, editor gutters, the Attribute Bar) along with the plugin’s buttons, drag handles and labels — text contrast is worked out for you. An "Outline buttons" option draws the plugin’s action buttons as outlined chips instead of filled.

Editing CSS in the detached CSS Panel now updates the preview straight away. Previously, if you popped the CSS Panel out into its own window and selected an element by clicking it in the preview, your changes were saved but the preview didn’t repaint until you edited again. Element and class edits now apply instantly and stay after you dock the panel back.

The Overflow debug helper no longer shows false "+300px" overflow labels on hidden or off-canvas elements.

The whole editor interface has had a visual refresh onto a single, consistent design system. The settings modal, every popup and helper dialog, and all the colour pickers now share the same look, spacing and transitions, and follow the colour scheme and accent you choose in the new Style tab.

The "Toggle Bricks Panels" keyboard shortcut has moved from Alt+Shift+P to Alt+Shift+Z. On Windows, Alt+Shift+P could accidentally trigger a Chrome tab group; the new combination avoids Chrome’s built-in shortcuts. If you were using the old default, you’ll be switched to the new one automatically.

The plugin no longer ships the older WPEasy admin-framework stylesheets — the editor interface is now built entirely on the new design system. This is behind-the-scenes; your settings and workflows are unchanged.