Changelog
Code2Bricks Changelog
See what's new, what's fixed, and how we're making the Code2bricks better.
Core Framework Compatibility, Zoom-Aware Resizing & Enhanced Security
This release resolves critical compatibility issues with Core Framework, ensuring both plugins work seamlessly side by side without interfering with each other’s drag behaviors or UI elements. Canvas resizing now works accurately on zoomed-out previews and intelligently disables on non-desktop breakpoints to prevent conflicts with Bricks’ responsive behavior. We’ve also added automatic UI hiding in preview mode, introduced gutter-based panel resizing for a more intuitive editing experience, and implemented encrypted storage for license data to enhance security.
Code2Bricks UI Hides Automatically in Preview Mode
When you click the Preview button in the Bricks toolbar, all Code2Bricks panels and resize handles are now hidden automatically. The extra padding reserved for the editor panel is also removed so you see a clean full preview. Exiting preview brings everything back, letting you seamlessly switch between editing and preview modes.
Editor Panel Resizing Now Uses Gutters
The HTML, CSS, and JavaScript editor panels now resize using visible drag gutters between them. Dragging a gutter redistributes space between its two neighboring panels. When you hide an editor, the remaining panels automatically fill the available width with no empty gaps. Your panel sizes are remembered between sessions for a consistent workspace layout.
License Data Now Encrypted in the Database
Your license key and activation data are now encrypted before being stored in the WordPress database. Previously, this data was saved as plain text. If you are upgrading from a previous version, your existing license is automatically migrated to the encrypted format with no action needed on your part, providing enhanced protection for your sensitive licensing information.
Canvas Resize Handles Now Work With Core Framework Active
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.
Canvas Resizing Works Correctly on Zoomed-Out Previews
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.
Resize Handles Disabled on Non-Desktop Breakpoints
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.
Block Elements No Longer Convert to Div During HTML Sync
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.
Core Framework BEM Button No Longer Overlaps in Structure Panel
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.
Bulletproof CSS Autocomplete, Context-Aware Suggestions & Polished Menu UX
This release fundamentally improves CSS autocomplete reliability, eliminating the frustrating stop-and-start behavior where suggestions would work in one context but disappear in another. The suggestion engine is now context-aware, showing relevant property values based on what you’re editing. Visual consistency and menu interaction have been refined throughout, making the CSS editing experience feel smoother and more predictable across all scenarios.
Smarter Value Suggestions For Each Property
Suggestions are now context-aware when you enter property values. After choosing a property like display, the suggestion list automatically focuses on values that make sense for that specific property. This intelligent filtering makes CSS writing faster and more intuitive by surfacing only relevant options instead of overwhelming you with every possible value.
Cleaner Suggestion Menu Behavior and Visual Consistency
The suggestion menu now behaves more consistently with clearer visual states while navigating through options. Hover and active states are easier to distinguish, and overall interaction in the CSS editor feels smoother and more predictable. The refined visual polish removes distractions and keeps you focused on writing styles.
CSS Suggestions Now Show Consistently While Editing
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.
Precision HTML Sync, Smoother Editing & Multi-Root JS Clarity
This release refines HTML tag detection to mirror your actual Bricks output more accurately, making the editing experience feel more predictable and natural. We’ve improved how Enter key indentation works in nested markup, enhanced semantic element handling during structural edits, and clarified how JavaScript imports behave when working with multiple root elements. Additional fixes ensure CSS autocomplete works reliably in nested contexts and imported styles land on the right elements.
More Accurate HTML Tag Detection
The HTML editor now mirrors your real Bricks output with greater fidelity, including better handling for container markers and rendered tag types. What you edit in the HTML panel now matches what you see on the canvas more consistently, reducing surprises when switching between code and visual views.
Smoother HTML Editing Experience
Pressing Enter in the HTML editor now behaves more naturally with cleaner indentation in nested markup. Cursor placement remains stable while editing element attributes, eliminating the frustrating jumps that previously occurred mid-edit. The result is a typing experience that feels responsive and predictable.
Smarter HTML Sync for Semantic Edits
Better handling when you change element meaning, in HTML when you change an element to a different type while editing HTML (for example, turning a wrapper element into a text element), Code2Bricks now updates that change more reliably so the result in Bricks matches what you wrote.
Better Multi-Root JavaScript Import Behavior
When importing multiple root elements with JavaScript, Code2Bricks now stores the script in a dedicated global JavaScript code element instead of fragmenting it across individual elements. This approach provides clearer behavior and makes imported scripts easier to locate and maintain in your project.
Quick Import CSS Fallback Assignment
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 Inside Nested Rules
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.
Quick Import, Native Comment Toggle & Bulletproof CSS/JS Sync
This release introduces Quick Import for converting full HTML/CSS/JS snippets directly into native Bricks elements in one action, plus a native CSS comment toggle shortcut that works exactly as you’d expect. We’ve made imported CSS and JavaScript significantly more reliable with better handling for compound selectors, media queries, and persistent element linking. Import formatting is cleaner, the UI is more stable, and we’ve resolved Advanced Themer css hint box styling conflict and compatibility issues that were affecting autocomplete behavior.
Quick Import (HTML + CSS + JavaScript)
Import a complete HTML/CSS/JS snippet and convert it directly into native Bricks elements in one action. Quick Import accepts full-page input, automatically splits code into the appropriate editors, and inserts content based on your current selection in Bricks. No more manual copy-paste across multiple editors—bring your entire component stack in at once.
Native CSS Comment Toggle Shortcut
Toggle CSS comments instantly with Ctrl+/ (Windows) or Cmd+/ (Mac) for selected code blocks in the CSS editor. This uses CodeMirror’s native commenting behavior for reliable wrap/unwrap functionality, making it effortless to temporarily disable styles during debugging or testing.
Better Compatibility With Advanced Themer
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.
Unified Selectors, CSS Variables & Rock-Solid Editor Stability
This release debuts a Unified Selector Modal that parses classes, IDs, and data attributes from a single input field, plus CSS Variable Autocomplete that surfaces your Bricks design tokens directly in the editor. We’ve fundamentally improved editor focus stability to eliminate the frustrating issue where rich-text elements would steal your cursor mid-typing. Additional fixes ensure keyboard shortcuts work reliably across all contexts, from save commands to selector modals.
Unified Selector Modal
Add classes, IDs, and data attributes simultaneously from a single intelligent input field. Type mixed selectors like .my-class another-class #my-id data-theme="light" and watch the modal automatically parse each type. Classes can be placed as “Element Class” or “Global Class,” while IDs and data attributes apply directly to the element. Launch instantly with Ctrl+Shift+Enter (Windows) or Cmd+Shift+Enter (Mac) when any element is selected, no more switching between multiple dialogs.
CSS Variable Autocomplete
The CSS editor now provides intelligent autocomplete for all your Bricks CSS variables. Simply type -- or begin writing inside var() and the editor surfaces matching variables from your Bricks Settings. Variables appear prioritized in suggestions, making it effortless to apply your design system consistently without memorizing variable names or switching contexts.
Editor Focus Stability
Eliminated the disruptive focus-stealing behavior that occurred when Bricks rich-text elements were selected. Previously, the HTML, CSS, or JS editors would lose focus unpredictably while typing, forcing you to reposition your cursor constantly. The editors now maintain rock-solid focus throughout your editing session, even when rich-text elements are active in the structure panel, no more mid-sentence interruptions.
HTML Attribute Validation
The HTML sync engine now intelligently validates attributes as you type. Incomplete syntax like class="my- is detected and sync pauses until quotes are properly closed, preventing malformed or partial attributes from being applied to your Bricks elements. This ensures your HTML remains valid and your elements render correctly, even during rapid editing.
Keyboard Save Shortcut
Pressing Ctrl+S (Windows) or Cmd+S (Mac) in any Code2Bricks editor now triggers Bricks’ native save function instead of opening the browser’s “Save Page” dialog. Your changes are committed exactly as if you clicked the Bricks Save button, making the keyboard shortcut behave the way developers naturally expect.
Selector Modal Shortcut From Canvas
The keyboard shortcut to open the selector modal now responds reliably whether you selected the element from the structure panel or clicked it directly on the canvas. Previously, the shortcut only worked for structure panel selections, creating an inconsistent experience. Now Ctrl+Shift+Enter / Cmd+Shift+Enter works universally across all selection methods.
Clean Panel Title Display
The panel title now displays only essential information—the element name and ID—removing the redundant “X children [container]” suffix that previously cluttered the interface. This creates a cleaner, more focused workspace that surfaces the information you actually need at a glance.
Responsive Preview Resizer & Smart CSS Workflow
This update introduces a Responsive Preview Resizer with drag handles, paired with a new Smart Media Query shortcut that auto-fills breakpoints based on your current preview width. We’ve also enhanced the BEM Generator with granular options to exclude specific elements or children from class generation. Additionally, critical fixes now ensure the HTML editor updates immediately when deleting child elements and that new elements are always inserted at the correct position in the structure.
Responsive Preview Resizer
Resize the Bricks builder iframe horizontally using drag handles on the left and right sides. The current preview width is displayed in real-time.
Smart Media Query Insertion
@media (width <= 900px) {
}
CSS Editor Tab Shortcuts
media+ TAB → Media query with current preview widthr+ TAB →%root%placeholder--variable+ TAB →var(--variable)
BEM Generator - Granular Exclude Controls
The BEM Generator now has two exclude options for better control:
- Exclude Self Only (user icon) – Excludes only the current element from BEM class generation, while children still receive their BEM classes
- Exclude All (eye icon) – Excludes the current element AND all its children from BEM class generation
This allows more precise control when you want to skip certain elements without affecting their children's class naming.
HTML Editor Sync After Element Deletion
Fixed an issue where the HTML editor would not update correctly when deleting child elements in the Bricks structure panel. When children were deleted and Bricks auto-selected the parent container, the HTML editor would show stale content (the last deleted element) instead of the updated parent. The fix tracks children count changes and forces a refresh when children are added or removed, even if the same element remains selected.
New Elements Inserted at Correct Position
Fixed an issue where new elements created via the HTML editor (when no element is selected) were inserted at the top of the page instead of at the bottom. The fix ensures that when inserting new HTML content at the page root level, elements are correctly appended after all existing page elements. This also applies to JavaScript Code elements, which are now correctly inserted as the next sibling after the selected element.
Initial Production Release
We are officially out of beta! Code2Bricks v1.0.0 introduces a robust, bidirectional bridge between raw code and Bricks Builder, allowing developers to build faster with full structural and styling control.
Bidirectional HTML Synchronization
Edit your Bricks element structure directly via HTML. Supports full CRUD operations (Create, Read, Update, and Delete) and reordering. Changes in the code editor reflect in the builder instantly, and visual changes in Bricks sync back to your code.
Multi-Context CSS Editor
A specialized editor for managing CSS across different contexts: Element Root, Global Classes, and Element-level classes. Includes Bricks-native %root% placeholder support, CSS autocomplete for logical properties, and real-time live preview.
Native JavaScript Integration
Write JavaScript directly for any element. Code is stored in native Bricks “Code” elements for persistence and security, allowing your scripts to run on the frontend even if the plugin is deactivated.
BEM Class Generator
A productivity utility to quickly generate and apply BEM (Block, Element, Modifier) naming conventions across your element hierarchy, supporting both Global and Element-level class placement.
Structure Panel Labels
See meaningful names (ID, class, or tag) instead of generic “Div” in the structure panel.
Button Rendering
Buttons now use clean text-basic elements, avoiding Bricks’ default button styling.
Dynamic Data & Asset Preservation
Improved handling of Bricks dynamic data tags (e.g., Initial release v1.0.0) and complex assets like icons and images, ensuring they remain unparsed and fully editable within the HTML code view.
High-Performance Sync Engine
Optimized via the SyncBus event system and ElementWatcher polling. These core systems detect builder changes every 300ms with a “fast-path” logic for text-only updates, ensuring zero lag on large pages.
Class Removal Sync
HTML editor now updates correctly when removing classes via CSS chip.
Self-Closing Tags
Image and other void elements no longer trigger false “incomplete” errors.
Build Faster with Code Where You Need It.
Code2Bricks integrates HTML, CSS, and JavaScript editors directly into Bricks Builder. Work visually when it makes sense, drop into code when it's faster. One workflow, zero context switching.
