This version comes with 150+ changes. A lot of new features, improvements, and bug fixes with a focus on providing a more powerful & streamlined workflow & interface.
Layout Elements: Section, Container, Block, Div
Prior to 1.5, there was only the Container element to lay out & group all your content.
The new Section, Block, and Div elements are there to help you create your layouts even faster & more streamlined.
Understanding the Layout: https://academy.bricksbuilder.io/article/layout (MUST READ!)
- Section – https://academy.bricksbuilder.io/article/section-element
- Container – https://academy.bricksbuilder.io/article/container-element
- Block – https://academy.bricksbuilder.io/article/block-element
- Div – https://academy.bricksbuilder.io/article/div-element
Nestable elements (+ API)
A nestable element lets you access and customize all inner elements. In 1.5, we introduce the following three nestable elements:
- Accordion – Nestable
- Slider – Nestable
- Tabs – Nestable
The old “flat” Accordion, Slider, and Tabs elements are still available for the foreseeable future.
Use the Nestable Elements API to create your own custom nestable elements programmatically.
Nestable elements documentation: https://academy.bricksbuilder.io/article/nestable-elements/
Media Query Loops
You can now also loop over attachments by selecting “Media” as the Post type.
This opens up new ways to create image galleries, for example. Or any other mime type for that matter. More information can be found in the Academy: https://academy.bricksbuilder.io/article/query-loop/#media-query.
Add element ID & class as needed (experimental)
There is a new experimental Bricks setting under “Bricks > Setting > Performance” called “Add Element ID & class as needed”, which we’d like you to test & provide feedback on so we can provide it as a default sooner rather than later.
At the moment, Bricks adds a unique element id & class to every element (e.g. brxe-4h8dh2). If an element doesn’t have any individual styles those attributes aren’t needed.
When you enable this new experimental setting, Bricks as this element id & class only as needed.
As there are so many ways to apply a style, we first introduce this setting as an experiment. With plans to make this the default once no bugs are reported with this setting enabled.
Other noticeable changes
- The inline style asset
frontend.min.cssreduced from 229 KB down to 95 KB (58% smaller). .brx-containeris now.brxe-container. If you have written any custom CSS make sure to run the Converter (Bricks > Settings > General > Converter) to automatically update the CSS class name syntax..root&.stretchcontainer classes have been removed from the Container element.- Filter
bricks/element/render_attributesparameters changed. - Deprecated: “Root container” theme style settings.
Full changelog
- Nestable Elements (Accordions, Slider, Tabs)New
- Infinite ScrollingNew
- Dynamic Data In External LinksNew
- Set Colors in Palette via CSS Variables (RAW input)New
- Re-order colors in palette via draggingNew
- Add context menu to Structure panelNew
- New Bricks Setting: “Disable Global Classes (Interface)” & Make Global Classes UI stickyNew
- Add Element “keywords” to improve elements panel search resultsNew
- Builder: Element Render via WP REST APINew
- Show element classes in panel + arrow & enter class selectionNew
- Query Loop: Integration for Meta Box Relationships & JetEngine RelationsNew
- Post Sharing: Add VKontakte & TelegramNew
- New filter: bricks/element/render (define Conditional Display Logic programmatically)New
- New filter: bricks/element/set_root_attributesNew
- Link: New Dynamic Data link filter {my_tag:tel}New
- Sticky Header: New “Transition” SettingsNew
- New Setting: Disable element spacing on canvas (margin & padding)New
- New keyboard shortcut: Toggle “Search settings” inputNew
- Expand layout group in Structure panel when dragging element into itNew
- Product Filter & Query LoopNew
- Post Sharing links: Add setting for “rel” attributeNew
- New layout elements: Section, Block, DivNew
- Bricks Settings: Show save/reset messageNew
- New ‘_hidden’ settings to provide classes for nestable element without exposing them to the builder interfaceNew
- New setting: Lazy load offset (default: 300px)New
- New setting: Builder language direction (LTR/RTL)New
- Sticky structure panel headerNew
- New filter: “bricks/element/form/datepicker_options” & update flatpickr.js from 4.5.2 to 4.6.13New
- Remote Templates: Import global classes as wellNew
- Accordion: New “Transition (ms)” settingNew
- New Bricks setting: “clone” & “delete” element actions in Structure panelNew
- Dynamic Data: Add “Site URL” optionNew
- New Brick setting: Structure panel collapsed on page loadNew
- New keyboard shortcut: Hold SHIFT to directly edit newly added elementNew
- Set default color palette (when editing palette)New
- New keyboard shortcut: Toggle element classes via “CMD/CTRL + ENTER”New
- New filter: bricks/is_layout_elementNew
- Nestable elements API: New Vue component New
- New filter: bricks/content/attributesNew
- New filters: bricks/header/attributes & bricks/footer/attributesNew
- Pin Global ElementsNew
- Color control: Show color value tooltip on hoverNew
- New Experimental Performance Setting: “Add element ID & class as needed”New
- Query Loop: Support for Media (post type “attachment”)New
- Theme Styles: Add min/max-width settings for all layout elements (Section, Container, Block & Div)New
- New filter: bricks/body/attributesNew
- New Bricks setting: Builder > Element actionsNew
- Cache Bricks QueryImprove
- Builder: Move element actions, resizer, and spacing components outside element nodeImprove
- Load Bricks lightbox HTML only as neededImprove
- Paste element: Add element below currently selected elementImprove
- Theme Styles: Remove ‘Background Video’ SettingImprove
- Color palette: copy works with HTTPS only (not with HTTP)Improve
- Hide “Unsplash” button if API Key not setImprove
- Link control: Allow to ‘exclude’ any link sub control (rel, title, etc.)Improve
- Container: Always show column-gap & row-gap settingsImprove
- Allow CSS “Filter” on every elementImprove
- ACF Repeater inside of an ACF Group fieldImprove
- Nest a posts query inside of a terms queryImprove
- Search element: No placeholder settings when “Icon” selectedImprove
- Generate unique element ID when duplicating an element (if element with ID already exists on page)Improve
- Builder: “Save” message not centered on canvasImprove
- Improve: Icon font file loadingImprove
- Update filter: “bricks/element/render_attributes” callback argumentsImprove
- Canvas: Insert Layout Popup Position overflows viewport bottomImprove
- Code Execution: Changes not saved without “Run code”Improve
- Header template inline CSS was generated twiceImprove
- Pseudo class + class name “.” (dot) was removedImprove
- Script elements not initialised properly inside query loopImprove
- Custom Fonts: font-face loadingImprove
- Post Content element: Support plugins that rely on “in_the_loop” check (e.g. BuddyBoss)Improve
- Builder Access: Improved rightsImprove
- Remove XFN link tag from “head”Improve
- Canvas spacing: Increase z-index & better negative margin previewImprove
- Link control: Allow to ‘exclude’ any link sub control (rel, title, etc.)Improve
- Dynamic Data dropdown: cannot use the Improve
- Sticky Header: “scrolling” missing after page reloadImprove
- Allow CSS Filter on every elementImprove
- Structure Panel: Renaming elements copy & paste behaviourImprove
- Heading Element: Remove default colorImprove
- Structure Panel: Select next/previous sibling or parent element after deleting elementImprove
- Nestable elements: Adding new “Item” label naming conventionImprove
- Builder lag when having a large number of locked classesImprove
- Builder: Empty element ID set to #falseFix
- Nav menu: Uncaught Type ErrorFix
- Fix Background Video: z-indexFix
- Form element: File Upload border stylingFix
- SVG element: Attribute removal (ID, etc.)Fix
- Element Animation: Element shows before CSS kicks in (+ Update animate.css to 4.1.1)Fix
- PHP error: Set container link to dynamic data but without setting the tagFix
- Code Element: Execute code when cursor inside input fieldFix
- Rich Text: Font-weight issue (due to normalize.css defaults)Fix
- Builder: Element Actions overlay each otherFix
- WooCommerce: Product Price Styling IssuesFix
- ACF Repeater in Query Loop: Empty resultsFix
- Code Element/Custom CSS: Wrong cursor positionFix
- Form element: Field + Button side by side breaks layoutFix
- Code Element: Scrollbar & Page Settings issuesFix
- WooCommerce Checkout/Cart: Shipping Options AlignmentFix
- Pagination: Missing styles (External CSS files)Fix
- Control Number: Floating numbers appended zeros (e.g. line-height)Fix
- List Element: Title missing alignment optionsFix
- Builder: Insert Layout Modal: Position not responsiveFix
- Icon Box element: Select different SVG doesn’t render in builderFix
- Search page improvementFix
- Locked class: Icon control not editableFix
- Products: Custom taxonomy archive not workingFix
- Control Editor (TinyMCE): Collapses on blurFix
- Remove $post_id from Frontend::render_dataFix
- WooFunnels checkout issuesFix
- Global Element: Renders default data in builderFix
- “_hover” in class name is converted to “:hover”Fix
- Image element with wrapper: CSS Transition not appliedFix
- Post content element: Cannot retrieve Posts Page content (blog)Fix
- Rich Text: Link issuesFix
- Generate unique element ID when duplicating an elementFix
- Product Short Description: Styles missingFix
- Bricks SEO IssuesFix
- Builder: Fix Autosave “Preview” Button OverflowFix
- PHP Fatal error: Uncaught TypeError: array_mapFix
- Query Loop: Meta Box Relationship field $post_id not setFix
- line-height: 0 not applied on frontendFix
- Dynamic data: Accented characters not acceptedFix
- Logo element: “External URL” setting not renderedFix
- Query Loop: Using background image shows feature image of current page, and not the queried postFix
- Archive with Query Loop of Post Content (data source: Bricks)Fix
- User & Term Query Loop: Meta Query DD value not parsedFix
- Insert Layout: JS TypeErrorFix
- Nest a Meta Box group query loop inside of a Meta Box Relationships query loopFix
- Post Content element: Data source “Bricks” global classes CSS missing (in builder)Fix
- Multiple Query Loop of a template: Only first loop is styled correctly (External Files)Fix
- ACF choice type fields not respecting the return formatFix
- Slider: “Style > Overlay” no longer workingFix
- Color Palette: Opacity don’t show on frontend when editing an existing color (still #hex)Fix
- Template element: Styles don’t show on canvasFix
- Theme Style: Fix Link selectors for .brxe-post-contentFix
- Icon Element with Link: All styles apply to iconFix
- Entry animation on certain elements hides them on the canvasFix
- Builder: Context menu issuesFix
- Basic Text with link: Not updating on canvasFix
- Custom CSS: Backslash gets removed when styled on .css_class_name::beforeFix
- Theme Styles: Accordion Icons don’t show (in builder)Fix
- Image: Inherits width & height from wrapperFix
- Add global class via keyboard: Adds already applied classes multiple timesFix
- Imported Theme Style not savedFix
- Icon Element: Icon rendered twice on canvas (after setting “Link”)Fix
- Dynamic Data: ACF Group fields & Meta Box Group not working if inside an Options pageFix
- Input fields cut off first characterFix
- Locked Class Active: Canvas spacing (margin/padding) still visible & draggableFix
- Query Loop: :hover (and pseudo classes) without selectorFix
- Control number: Decimal value + unit (unit not removed from number on enter)Fix
- DD: {post_terms_my_taxonomy_slug} do not support Woo product attributes (taxonomies) like color, size, …Fix
- Google Fonts error in builder while Basic Auth is enabledFix
- Fix Autosave Preview Button OverflowFix
- Canvas: Text toolbar overflow positionFix
- Rich Text: Link popup window issuesFix
- Query Loop: Styling doesn’t work with Custom IDFix