Changelog

Deleting an element in the Structure panel now lights the save icon and is saved with the page. Previously, with Code2Bricks active, the deletion was in certain condition dropped from the list of unsaved changes as the selection moved, so saving did not include it and the element came back after a refresh. Other changes made at the same moment as a selection change, including Alt+scroll in the Structure panel, are kept as well.

HTML you type in the HTML editor now always syncs to Bricks on its own. Previously, some edits were treated as “no change” and skipped, for example changing a class from card-a to card-b further down the HTML, and only Ctrl+Shift+S pushed them through. Edits made right after another sync, edits you leave the editor with, and edits still pending when you select another element are now all sent, and saving the page syncs any pending HTML first so the save includes it.

Quick Import, CSS Insert and Convert now keep selectors with commas inside :is(), :not(), :has() and :where() intact. Previously, a rule like .envelope--stowed :is(.envelope__back, .envelope__front) { display: none; } was cut at every comma, which left broken selectors in the CSS editor and could turn a hidden state into a plain rule that hid the element all the time.

Inserting CSS into the Style panel with Quick Import or CSS Insert no longer breaks values. Previously, padding: calc(var(--frame) + clamp(18px, 7cqi, 48px)) was split at every space into invalid sides, and aspect-ratio: 1 was shown and written back as 1px. Values with calc(), clamp(), min() and max() now stay whole, and values that cannot be split safely — such as border-radius: var(--radius) holding four radii, stay in the CSS editor. Moving CSS into the Style panel also no longer changes which rule wins, the CSS left in the editor keeps its order and comments, and CSS Insert no longer deletes an existing padding: 0 when it only updates one side.

@property, @font-face and @import rules are now kept on import. Previously they were dropped, which broke components that animate registered custom properties. A @media (prefers-reduced-motion) override of :root tokens now also stays after the base tokens, so it still takes effect.

Rules inside @supports and then @media now keep both conditions. Previously the inner media query was lost, so the rule applied at every width. Braces and semicolons inside strings or comments no longer end a rule early, and Convert no longer treats a media query inside @supports, or a @container query, as a Bricks breakpoint.

Saving media query variables now requires an administrator, because a changed value updates CSS on every page, template and global class. Values must also be a plain media condition: braces, semicolons, comments and closing style tags are refused with a message. Previously, any user who could edit posts could save a value that was written into CSS across the whole site.

Quick Import now reads pasted HTML without loading it into the builder page. Previously, an image error handler inside pasted code could run in the builder while the code was being imported.

Turning off CSS Variable Manager in Settings → Tools no longer hides the CSS editor hint box. That toggle only skips names registered in the Variable Manager. Bricks, AT, and CORE tokens, local variables, and property / value suggestions still appear. Previously, turning the manager off could hide the whole hint list, and clicking a hint often took several clicks. A single click now inserts the property, value, or variable.

Adding or selecting an element-level class now clears the leftover global so Style-panel edits land on the root, not that global. Previously, Bricks could leave the first global class active, and Style-panel edits would write there by mistake. Returning to a remembered Root or element-level class does the same.

Re-importing a snippet whose global or element classes already exist no longer appends a second copy of the CSS. Previously, the same class rules and keyframes were duplicated on every import. Unchanged declarations stay, changed values update, and new properties are added. HTML still creates a new structure on import.

Renaming an element class or global class no longer rewrites unrelated CSS in the live canvas. Previously, a rename could change selectors inside Snippet Manager CSS, page custom CSS, and other rules in the preview only — so a snippet like .trust { background: purple } could keep applying after the class on the element became .test, until a full refresh. External rules now keep their original selectors and correctly stop matching when the class name on the element changes.

Duplicating (or otherwise changing structure in Bricks) no longer silently deletes nested children — especially SVG and text grandchildren — with no undo. Previously, stale HTML in the editor could be treated as the source of truth and remove elements that still existed in Bricks. Sync now only deletes elements that were part of the editor’s last known tree; anything that appeared in Bricks while the editor was out of date is left alone and refreshed instead.

SVG elements added or pasted in the HTML editor now correctly appear in both the Bricks structure panel and the canvas. Previously, new SVGs were created in the data but never rendered, the canvas stayed unchanged. This affected all SVG insertions through the HTML editor, including pasting SVG code inside existing containers.

SVG elements nested inside other elements, such as icons inside buttons or cards, are no longer silently removed when the HTML editor syncs. Previously, a sync cycle could strip SVGs from the element tree, causing them to disappear from the structure panel and canvas.

Resolved multiple issues with SVG elements in the HTML editor. SVG code pasted or typed in the editor now syncs correctly to Bricks. SVG elements display their CSS classes and custom attributes in the editor. New SVGs without a tracking reference are created as proper Bricks elements instead of being silently skipped. Classes are always managed through Bricks settings and never embedded in the SVG code string. Adding classes to SVGs no longer triggers a false “Sync error” toast. SVG code changes now clear the Bricks signature so the code is re-signed on save, and SVG elements receive class and attribute updates in the canvas preview during sync.

Data attribute changes made via the HTML editor now correctly persist when saving, including on header and footer templates. Previously, changes appeared in the builder but reverted on save because the sync engine was suppressing Bricks’ native mechanism for tracking unsaved changes. The sync engine now lets Bricks’ own change tracking handle dirty state, exactly as it does when editing through Bricks’ own attribute inputs.

The selector bar now remembers your last active class per element and restores it instantly when switching between elements, with no visual flickering. Element classes no longer interfere with Bricks’ own class panel state.

The Add Selector modal now accepts any valid HTML attribute — aria-label, role, tabindex, and so on — not just data-* attributes. Previously, non-data attributes would return “No valid selectors found.”

The autocomplete dropdown now consistently uses Code2Bricks styling with a minimum width, so items are never clipped or overridden by third-party plugin styles.

Attributes like aria-controls, action, or data-icon that happen to contain the letters “on” in their name are no longer broken during HTML sync. Previously, writing <button aria-controls="menu"> could produce malformed output. This is now handled correctly for all standard and custom attribute names.

Writing <div data-bricks="block"> in the HTML editor now correctly creates a Bricks Block element, just as <div data-bricks="container"> creates a Container. Previously, block divs were treated as generic divs and the distinction was lost on sync.

The Format button no longer inserts a space after the colon in pseudo-class selectors. li:first-child, a:hover, and :nth-child(1) now stay intact after formatting, while property declarations like color: red are still formatted correctly as expected.

Pasting HTML that contains inline styles or script tags into Quick Import now correctly extracts the CSS into the CSS editor and the JavaScript into the JS editor, even when the pasted content is a partial snippet rather than a full HTML page.

The CSS editor no longer shows stale content from the previously selected element when you click a different element on the canvas. Selecting an element on the canvas or in the structure panel both correctly update the editor. When you select an element, the CSS editor now defaults to the first class instead of the element root — reducing clicks for the most common workflow. The Code2Bricks selector bar and Bricks’ active class panel now stay perfectly in sync: switching classes, removing classes, and auto-fallback after removal all work correctly in both directions. Previously, Code2Bricks could interfere with Bricks’ native class selection, making it impossible to choose a different active class in the Bricks visual panel, this is now fully resolved.

Resolved several issues where CSS edits could silently fail to persist. Edits on non-desktop breakpoints no longer write to the wrong key. Global class CSS saves that were silently skipped due to reference comparison now work correctly. Throttled saves are retried instead of dropped. When switching elements quickly, unsaved CSS is now flushed before the next element loads, and a post-save verification step confirms the edits stuck.

Global classes created by the BEM generator now correctly save their CSS. Previously, a data format mismatch caused CSS to be silently lost on serialization, and an early-return in the save path meant edits only persisted on a full page save, both issues are now resolved.

Color variables created via Advanced Themer’s color palettes now appear correctly in CSS autocomplete suggestions. Previously, variables injected via inline styles on :root were not detected, and some palette-derived variables were filtered out incorrectly. Both sources are now scanned

Several sync issues have been resolved to make HTML editing more predictable and reliable. Elements added or modified in Bricks are no longer incorrectly morphed when Code2Bricks syncs. Morphing now only happens when your edit genuinely changes the element type. Code elements containing raw PHP or HTML now sync correctly without their content being misinterpreted as markup. Block elements stay as blocks instead of being converted to divs. Image alt text with spaces or special characters now syncs properly, and removing the alt attribute correctly clears it in Bricks. Attribute values containing quotes, ampersands, or angle brackets are now properly escaped to keep your HTML valid and prevent parsing errors.

SVG elements inserted via Bricks, whether from file upload, dynamic data, or icon-set source, no longer have their source type overwritten to “code” during sync. This preserves the original SVG configuration and prevents unexpected behavior. SVG attributes like xmlns, viewBox, fill, and stroke are no longer duplicated. They stay correctly stored in the SVG code without creating redundant attribute entries that could cause rendering issues.

Renaming a class in the HTML editor now correctly preserves whether it was a global class or element-level class. When you rename a global class, the rename updates the existing class everywhere it’s used across your site instead of creating a new class and leaving the old one orphaned.

The responsive preview resize handles no longer stop working when the Core Framework plugin is active. Previously, Core Framework’s drag behavior would intercept mouse events and prevent the resize handles from responding. Both plugins now work side by side without interfering with each other’s functionality.

When you set a preview width larger than your screen (for example 1440px), Bricks scales the canvas down to fit. The resize handles now account for this scaling, so dragging them changes the canvas width accurately regardless of zoom level. The handles also stay correctly positioned at the edges of the canvas at all times, eliminating the misalignment that occurred on scaled-down views.

The canvas resize handles are now automatically disabled when you switch to tablet, mobile landscape, or mobile portrait breakpoints. This prevents conflicts with Bricks’ own responsive behavior on those breakpoints. The handles show a visual indicator (changed cursor and reduced opacity) so you can tell they are inactive. Switching back to desktop re-enables them immediately.

Editing HTML in Code2Bricks no longer silently changes Bricks “block” elements into “div” elements. Both element types produce identical HTML output, so the sync engine previously treated them as different and would swap one for the other. Element types now stay exactly as you set them in Bricks unless you make a change that genuinely requires a different element type.

If you use Core Framework alongside Code2Bricks, both BEM class generator buttons in the structure panel are now visible and accessible. Previously, Core Framework’s button would overlap on top of the Code2Bricks button, making both difficult to use. The buttons now coexist without visual conflicts.