Changelog

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.

The CSS suggestion box now appears reliably while you type, working consistently in longer imported styles, nested sections, pseudo selectors, and regular day-to-day editing. This eliminates the unpredictable behavior where autocomplete would suddenly stop working mid-session, forcing you to restart your editing flow.

Unrecognized selectors from imported CSS are now assigned more predictably to target elements. Imported styles apply to the expected elements more consistently, reducing manual cleanup after bringing external CSS into your Bricks project.

CSS autocomplete now works reliably inside nested media queries and nested rule blocks. Advanced CSS editing with complex nesting structures is smoother, with property suggestions appearing correctly regardless of nesting depth.

CSS autocomplete hint styling and completion behavior are now stable when Advanced Themer is active. Improvements include safer hint scoping to prevent style conflicts and improved cursor placement after property completion, eliminating the jarring cursor jumps that occurred when both plugins were running simultaneously.