Changelog Latest

The CSS Panel now appears automatically when you enable it. Previously, enabling the CSS Panel (via Quick Setup or its settings toggle) added it but left it hidden, so you had to show it by hand. It now opens by default when enabled; if you hide it, that choice is remembered.

Closing the Element Shortcuts panel with its ✕ now hides it (and remembers that) instead of removing it — bring it back any time from the Panels toolbar button. Previously the ✕ removed the panel and you re-added it from settings.

A behind-the-scenes fix to the shared panel system so docked panels register reliably even when added very early during editor startup. No change to how the plugin looks or works for you — your existing setup keeps working exactly as before.

A behind-the-scenes robustness improvement to how docked panels (such as the CSS Panel and Element Shortcuts) register themselves with the shared panel system, so they load reliably no matter the order scripts happen to run in. No change to how the plugin looks or works for you — your existing setup keeps working exactly as before.

Dock panels on the left and right of the canvas, not just top and bottom. Panels such as the CSS Panel and Element Shortcuts can now dock to the left or right edge of the preview as a vertical strip — the canvas shrinks to fit between your docks. Choose which edges accept panels in Settings → General Interface → Enable Panel Docks (Top and Bottom are on by default; Left and Right are off until you turn them on).

A "Panels" button to show and hide your docked panels. A new panel icon in the toolbar (it replaces the old "Show/Hide CSS Panel" button) opens a list of every docked panel, each with a Show switch — so you can hide and re-show any panel without removing it. Your choices are remembered across reloads.

Hide the Bricks panels with a keyboard shortcut. Press Alt+Shift+E to hide (or show) the Structure panel and the settings panel together for an unobstructed view of the canvas.

Element Shortcuts panel redesign. Shortcuts now flow together in one grid instead of being split into "Basic"/"Layout" category groups (components still get their own group); the popover is a consistent width; the default icon size is now XL; button tooltips appear below their buttons so a top dock can’t clip them; and panel scrollbars are slimmer.

The CSS Panel is managed alongside your other panels. It now shows and hides through the new Panels button together with every other docked panel.

"Structure Item group actions" setting. The grouped Structure-item menu (Element Shortcuts, Change Type and BEM together) is now always on, so the toggle was removed.

Element Shortcuts "Columns" setting. The shortcuts popover now sizes its grid automatically, so the manual column count is gone.

"Toggle CSS Panel" keyboard shortcut. It’s replaced by the Panels button, and Alt+Shift+E now toggles the Bricks panels instead (see New).

Connected AI assistants and MCP clients can now discover and use Bricks Productivity directly. The plugin publishes a set of "abilities" through WordPress’s Abilities framework, so an AI tool you’ve connected to your site can read your Bricks design system (CSS variables, global classes, colour palettes, and typography), create and update Bricks pages for you, install the bundled code snippets, and pull a health/diagnostics snapshot — without you copying anything across by hand. Each ability respects your WordPress permissions (creating or updating pages and reading diagnostics stay admin-only). If your site doesn’t have the Abilities framework installed, nothing changes.

The CSS Panel now autocompletes container style queries (@container style(...)). As you write a style query, the panel suggests the custom-property names and values that are actually in scope — pulled from the element you’re styling, its parent containers and child elements, and your active Theme Style’s custom CSS. It helps while you type the property name (left of the colon) and its value (right of the colon), and offers those same in-scope names and values when you declare a custom property directly. Works in both the docked and pop-out CSS panels.

The CSS linter no longer shows a false error on a boolean container style query. Writing @container style(--theme) { … } — which checks whether a custom property is set, with no value — is valid CSS, but the linter was flagging it as "Colon is expected". It’s now recognised as valid, while genuine mistakes are still caught.

"Grid Auto Fit" and "Grid Auto Fill" patterns no longer overflow narrow containers. The generated grid now caps each column’s minimum at the container width and stretches items to equal height, so the layout stays inside its container on small screens instead of spilling over the edge.

Behind-the-scenes security hardening. Some input handling was tightened to match WordPress coding standards. No user-facing changes.

The CSS panel no longer gets clipped when Advanced Themer’s responsive bar is on. With Advanced Themer active, its responsive toolbar pushed the CSS panel partly below the canvas (most noticeable when the panel was collapsed). The panel now accounts for that bar, and re-adjusts instantly when you toggle the bar on or off.

Removing a class you added through the CSS panel pills now actually clears it. A class added via the pills could stay visually applied after you removed it (whether you removed it from the pills or from Bricks’ own UI), even though it was already gone from the settings. It’s now removed from the live preview properly.

Component Properties: the delete (trash) icon is back to being the last icon on each property row. The Copy button had been sitting after it; the trash now stays at the end and no longer jumps position when clicked.

The class pill menu’s "Remove" is now a single click. Removing a class from an element no longer needs a confirm step (it’s reversible — the class still exists elsewhere) and it now sits at the bottom of the menu. "Trash", which deletes the class globally, still asks for confirmation.

Collapsing the CSS panel no longer hides it below the canvas. On taller screens or layouts, collapsing the CSS panel could slide it — sometimes including its header — below the visible canvas. Collapsing now shrinks the panel to just its header bar and keeps it anchored at the bottom of the canvas. (If you ever hit a display glitch like this, you can run ABP.enableDebug() in the browser console, collapse the panel, and send the logged details to support.)

Quieter browser console. The plugin no longer prints health-check / simulation notes to the console on sites that have WordPress debug mode on, and the Bricks background-shader Code Snippet is silent by default. Diagnostics are opt-in now — turn them on only when needed with ABP.enableDebug() (or window.BRXP_SHADER_DEBUG = true for the shader snippet).

The pop-out CSS panel now has the same toolbar tools as the docked one. When you detach the CSS panel into its own window, it now includes Move ID Styles, Convert UI to CSS, the Patterns picker, and Clean Comments — Move and Convert sit next to the selector pills, just like in the docked panel.

CSS error-checking stopped crying wolf over min(), max() and clamp(). Valid CSS like grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)) — or even a plain width: min(400px, 100%) — was being underlined as an "invalid value". Those math functions are now recognised, while genuinely broken values still get flagged.

The pop-out panel’s "Clean Comments" now works. In the detached window it was removing the wrong comments and not saving the result; it now strips the generator comments correctly and keeps your change.

Advanced Themer Framework variables now appear in the CSS panel. If you use Advanced Themer’s Framework feature (or a similar add-on that writes its variables onto the page’s <html> tag instead of a stylesheet), those variables now show up in the CSS panel’s variable suggestions — and update live as they change.

The ::before / ::after shortcuts now sit behind your content by default. Expanding ::b or ::a with Tab now includes z-index: -100, so a decorative pseudo-element lands behind the element’s content instead of on top of it.

Cleaner "Grid Auto Fit" / "Grid Auto Fill" patterns. The built-in |g-a-fit-… and |g-a-fill-… CSS patterns now expand to a simpler repeat(auto-fit, minmax(<size>, 1fr)) and include a gap.

"Move ID Styles" and "Convert UI to CSS" buttons are easier to see. Both buttons were transparent and blended into the toolbar; they now have a proper background.

One-click Quick Setup. A new Quick Setup button next to Export opens a popup with two actions: Enable Default Set turns on every feature and applies the recommended CSS-panel config (and sets up Bricks Wireframes if it isn’t already); Reset puts all feature on/off switches back to their defaults.

Edit the core layout variables in Design Variables. The Layout tab now exposes the underlying Bricks Wireframes spacing and width variables — container gap, content gap, grid gap, section spacing (horizontal/vertical), and container width — in a Bricks Wireframes group at the top.

Use scoped variables in both directions. The CSS panel now surfaces locally-scoped variables both ways — use a parent element’s scoped variable as a value (marked ↑), or set a child element’s override knob right here to change its scoped variable from above (marked ↓).

color-mix() made easy. Type color-mix as a value and press Tab — the CSS panel fills in color-mix(in oklch, red 50%, transparent) with the colour pre-selected so you can type your own straight away.

Unlimited staggered animations. The stagger utility classes can now cascade any number of children by viewport-entry order (using the FadeIn-fix snippet’s entry index) instead of stopping at the first 10. The ready-to-use rule ships commented-out in the class — flip it on when you need it.

Variablize no longer clashes inside ::before / ::after. Variablizing a property in a pseudo-element block now creates a distinct variable instead of colliding with the element’s own variable of the same name.

Layout helper no longer gets a stray suggestion popup. When the Flex or Grid helper is open, the CSS property/value/variable suggestions no longer pop up on top of it.

Right-click Comment / Uncomment no longer goes missing. A timing issue could hide the Comment/Uncomment option from the editor’s right-click menu; it now appears reliably whenever you have a selection.

Locked classes are now fully locked. Format CSS, Expand/Collapse All, and double-click-to-rename were still reachable on a locked class — they’re now disabled along with the rest of editing.

Attribute Bar allows # inside quoted values. The Attribute Bar no longer rejects a # inside a quoted attribute value — e.g. data-target="#modal" or href="#section" — as a duplicate element ID. Any value inside quotes is now allowed.

Component Properties — delete is always the last icon. The trash icon on a property group is now reliably the final action and no longer jumps position when you click it.

Install a single Custom Font. In Font Pairing, the Create Custom Fonts button now enables as soon as either the heading or the body is a Google font, so you can install just one.

Smarter auto-semicolon. The CSS panel now also finishes a line about a second after you stop typing, on top of the existing Enter / leave-line / blur triggers.

Uncomment works on plain comment blocks. The right-click Uncomment now also reveals code inside a normal /* … */ comment block, not just comments created by the Comment command.

Send Code Snippets straight to Fluent Snippets. If you use the Fluent Snippets plugin, each snippet in the Code Snippets tab now has a one-click Create Snippet button that adds it to Fluent in a new BRXProd group, saved as a Draft for you to review and switch on.

Import whole snippet bundles at once. Some Code Snippets entries are now Fluent bundles — a group of related snippets you can add together with Import Snippets — and a new Fluent filter joins the JS / PHP / CSS / HTML filters. Re-importing is safe: snippets already on your site are skipped, not duplicated.

Shaders.com Background Suite. A ready-made bundle of six snippets that add animated shaders.com WebGL backgrounds to Bricks — the runtime, a builder Pause/Play toggle, presets, faster-loading preload hints, and setup helpers — importable in one click (requires Fluent Snippets).

Plugin updates failed with a "Download failed" error. A security-hardening change was blocking the legitimate redirect to the plugin’s download file, so updates couldn’t finish. Updates work again now. Because the affected version is the one already installed, you’ll need to update this release once manually (or install the new ZIP) before automatic updates resume.

One-click Style Guide page — generate a page showcasing your Typography, Colors, Buttons, Spacing & Radii and Shadows, built from your current design tokens. Re-run it later as Update and only those sections refresh in place; your reordering and anything you added are kept.

Font Pairing → Google Fonts API choice (V2 by default, V1 as a fallback) and an optional per-font character-subset selector when installing fonts.

Bricks Wireframe Initialise now installs the Theme Style too — the Themes dropdown is no longer empty after a fresh setup.

Auto BEM no longer leaves the top-level block’s class behind when you rename a freshly-inserted template.

Rails Helper drag keeps the other handle’s position instead of resetting it.

Smarter CSS Panel auto-semicolon — it completes a line on Enter, when you move off the line, when you click away, and instantly when you pick a single-value value (e.g. display: flex).

Updated Grid Auto Fit / Auto Fill snippets (overflow-safe, with a built-in gap), plus Layout Rails and corner-utility polish.

New corner shape utilities — inverted "scoop" and outset "flare" radius classes, with a Corners help tab.

New Wireframes layout tools — a Layout Rails overlay with drag-to-place, plus a Layout tab in Design Variables.

New "Color Palettes" settings tab to choose which colours appear in the plugin’s colour pickers.

The CSS Panel variable typeahead now also suggests inherited variables from parent elements.

One-click "Initialise" for the Bricks Wireframe framework — installs and processes the base framework without importing a template.

The Settings panel no longer jumps back to the Features tab when you toggle a feature on or off.

Various bug fixes.

A simpler, less cluttered Settings panel and general UI improvements.

Some rarely-used CSS Panel sub-toggles were merged into grouped switches and reset to ON. Turn a group off if you want everything in it disabled — no settings are lost.

New "Outline Buttons" style for the plugin’s action buttons in Bricks.

139 new CSS property shortcuts in the CSS Panel — type the abbreviation + TAB to expand.

AI Debug now also logs image generation requests.

Various bug fixes, including the HTML Tag selector and OpenAI image generation.

Better OpenAI image-model handling and general UI improvements.

CSS Panel comment handling is now solid — Comment/Uncomment round-trips inline comments perfectly, the linter ignores commented-out blocks, and auto-semicolon and other editor features no longer fire while your cursor is inside a comment.

CSS Panel size, visibility, and collapsed state now persist across page reloads.

Removed a stray gap between the Duplicate and Save buttons in the per-group action row.

Component Property Sets — save any component property group to a reusable library (rename, reorder, import/export, six ready-made defaults) and apply saved Sets to other components in one click.

Delete a whole property group in one click, with a two-step "click again to confirm" safety net.

Right-click Comment / Uncomment Selection in the CSS Panel editors.

Auto-link a nested child component’s properties to its parent in one click.

Various Component Property Sets fixes — saving no longer fails silently, the export count stays accurate after deleting a row, and the toolbar shows correctly on brand-new components and instance selections.

Refreshed Properties panel toolbar, consistent paste icons across the plugin, and inline-comment annotations when renaming groups or properties.

CSS Pills now have customisable Normal / Hover / Active colours (background and text, with light/dark values) under Settings → Bricks UI Colors → CSS Pills.

Click any Layout Width Label to copy a ready-to-edit @container query, smart-pasted into the CSS Panel.

Various CSS Panel fixes — the linter no longer false-flags nested @media / @container / @supports / @layer, BEM auto-select and Element-class Copy now work, and the detached panel’s borders and header alignment are corrected.

UI cleanup pass aligning plugin chrome with Bricks’ native look, a refreshed default colour palette, smoother Rails band collapsing, and clearer "Layout Width Labels" naming.

CSS Panel grid-column typeahead now suggests Layout Rails named lines and common spans (after you’ve Processed the Wireframes framework).

Selecting an element with only an ID no longer leaves the CSS editor stuck read-only after a locked class was selected.

Layout Rails parent class renamed from brxp-layout-rails to brxp-rails. Re-run Process, then reassign the class on any element that used the old name.

BRXProd Layout Rails — a five-rail grid system (Content / Wide / Breakout / Layout / Full) with one-class opt-in and gutter utilities, installed automatically on Process.

New documentation for Layout Rails, Component Properties Tools, and Structure Panel Wheel Navigation.

brxp-rail-full and the rails parent now reach the viewport edges on Sections. Re-run Process after upgrade.

Corrected the Bricks Enhancements docs card title.

Element-insert shortcuts no longer fire right after you click inside a Bricks settings panel, and the Element Shortcuts popover now has a hover buffer so it doesn’t dismiss the moment your cursor leaves it.

Structure Panel navigation moved to Shift+wheel (avoids a Chrome/Windows menu conflict), now cleans up the whole expanded chain on exit, works over the preview canvas, and lets element shortcuts fire right after navigating.

Bricks Wireframe Tools is now correctly labelled Free.

Cards, borders, and dividers stand out more clearly in every plugin modal.

Structure Panel wheel navigation — Alt+scroll to step the active element through the tree, with optional auto-expand.

Free / Pro tier badges on every Feature Card.

Component Properties Tools — collapsible groups with Expand / Collapse All.

Code Snippets tab gains filter, search, sort, a collapsible intro, BRXProd Live integration (toggle snippets live on your site), and a new per-instance unique-class snippet.

Component Properties rename reliability and duplicate-labelling fixed, Bricks Modifications correctly labelled Free, and the Header & Footer Heights snippet plus BRXProd Live detection fixed on InstaWP / bare-git installs.

"Bricks Features" card renamed to "Bricks Enhancements", and settings cards stand out more from the modal background.

Documentation button added to the Bricks toolbar.

New toggles to hide the WordPress and Code Manager toolbar buttons.

"Move to Globals" mode when extracting classes — merges owning rules into one nested global class and removes them from your source CSS.

Toasts no longer hide behind modal backdrops, Extract Vars now saves exclusion patterns even when you create nothing, and sub-feature switches align correctly.

Renamed the extract context-menu item to "Extract to global classes".

Internal release-tooling only — no user-facing changes; your existing setup keeps working exactly as before.

Structure Panel action menu now appears reliably on items added after the panel renders, even with Advanced Themer active.

UI polish on switch alignment and card heights, the Structure Panel card renamed and split into Style/Features, Bricks Wireframe Tools controls moved into a "Manage Wireframe Tools" modal, and new/imported Theme Styles now appear in the CSS Panel surface dropdown without a reload.

Item-level Expand/Contract is now premium-only. Your settings are preserved if you upgrade later.

Clear Transients button in Settings → Cache & Reset to wipe the plugin’s server-side caches.

Theme CSS no longer locks when a locked Global Class is selected, Extract to Classes and Variables keep separate skip lists, and class typeahead works on child themes and inside nested CSS.

Cache & Reset buttons left-align consistently.