May 24, 2022
1.4
Release 1.4
This update is by far the biggest we ever released (300+ changes). Marking a new chapter of even better performance, tying up a lot of loose ends, and paving the way for many upcoming new & more advanced features.
Builder Rewrite
One of the reasons this release took longer than usual was the major rewrite of the builder. Which now runs on a completely custom and optimized-for-Bricks state management solution.
This decision came to be as it was clear that Vuex, the state management solution we used up until now, won’t receive any major updates. Not to accumulated any outdated technology, we decided to roll-out our own solution.
We’ve also written our own Bricks-native Drag & Drop (& Sortable) solution, for which we relied on SortableJS before.
Builder interactions should feel much more snappy & accurate. Moving away from relying on third-party solutions as much as possible not only future-proofs us, it enables tailor-made & optimized in-builder experiences. Like being able to drag new elements directly into the Structure panel, custom auto-scroll while dragging, and much more nerdy stuff.
Optimized HTML Output
We completely removed all element wrappers, and shortened element ID & class name prefixes from
bricks-element- to
brxe-.
A list of other ID/class name changes:
- #bricks-header > #brx-header
- #bricks-content > #brx-content
- #bricks-footer > #brx-footer
- .bricks-container > .brx-container
- Removed: .bricks-site-wrapper
- Removed: .bricks-element
Inside the builder, there are no more extra divs like .bricks-container-inner or .bricks-element-inner.
This new structure & naming convention results in even smaller, faster loading pages, and easier to write custom CSS.
Optimized DOM Structure
WooCommerce – Cart & Checkout Builder
You can now visually create your WooCommerce
cart &
checkout pages with Bricks. We’ve created a new “WooCommerce” topic in the Bricks Academy that walks you through our WooCommerce Builder:
academy.bricksbuilder.io
Auto-Sync Global Data Between Tabs
In Bricks 1.4 changes to any of the following global data is automatically synced across all open builder tabs on your computer:
- Global elements
- Global classes
- Global classes locked
- Pseudo classes
- Pseudo elements
- Theme styles
- Color palettes
- Pinned elements
Only Save Actual Changes (Improved Team Editing)
Prior to 1.4 every time you hit save all builder data was saved, regardless if you changed it or not. When working in a team on a site, this often resulted in undesired data loss.
TIP: If you make & save a change in the builder, but it’s not persistent, you can do a forced-save of all data by using the new “
CMD/CRTL + SHIFT + S” keyboard shortcut. Also, please let us know about any such issue in the
forum.
More Powerful Dynamic Data
- JetEngine: Custom Fields support
- ACF Repeater & Groups; Meta Box Group; JetEngine Repeater
- ACF Relationships (in Bricks Query Loop)
- Dynamic Data: Run PHP functions: {echo:function_name()}
Remove JQuery (From The Frontend)
Bricks no longer loads any jQuery on the frontend. We have written plain JavaScript solutions for any frontend-facing Bricks code that relied on jQuery.
To benefit from this improvement make sure your site has no other jQuery dependencies.
You can, of course, still use jQuery. A lot of plugins actually require it.
If you use jQuery in any of your own custom JavaScript code you can load jQuery (it’s still registered) by adding the following code to the functions.php file of your Bricks child theme:
function load_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_jquery' );
Update, Then Do This
Regenerate CSS Files:
As with any update, make sure to “Regenerate CSS files” in case you are using the “External Files” CSS loading method (Bricks > Settings > Performance).
Custom Elements:
If you have written your own custom Bricks elements make sure to add the new
render_attribute( '_root' ) to your element’s outermost HTML tag.
This adds all relevant HTML attributes like the element ID, classes, etc. to your custom element.
We’ve updated the Bricks child theme with example code for the latest element syntax. You can find a concrete code example also in the Academy:
academy.bricksbuilder.io
Using Custom CSS? Run The “Converter”
If you have written any custom CSS you can run the new
Converter to automatically update any obsolete Bricks element ID & class name occurrences for you. So you don’t have to do this manually
As it’s an experimental feature that performs changes in your database, please create a full-site backup before running the new Converter.
Other Noteworthy Changes
- Default container width only set on root container. To set a specific width for an inner container set “Flex shrink” to “0”.
- Shape Divider: Only available for Container element (due to removing the element wrappers)
- CSS filters apply to container itself: You now might need to manually create an inner container that contains your CSS filter, so it doesn’t affect the other container elements.
- Removed button line-height default (allows for better multi-line buttons)
Full Changelog:
- Remove jQueryNEW
- WooCommerce : Cart & Checkout Pages (Phase #2)NEW
- Link Type: Media (Attachment)NEW
- ACF Repeater & Groups; Meta Box Group; JetEngine RepeaterNEW
- ACF Relationships (in Bricks Query Loop)NEW
- Class Lock for CSS-Class-Based StylingNEW
- Remove Element Wrapper (Builder & Frontend)NEW
- Drag/Add Elements directly into Structure PanelNEW
- Wrap Any Element in ContainerNEW
- Structure Panel: Custom CSS IndicatorNEW
- Unlink Global ElementsNEW
- Editor: Add subscript & superscript HTML tagsNEW
- Builder: History PanelNEW
- Shorter element IDs & element class namesNEW
- Global CSS Classes: Import/ExportNEW
- Global Data Auto-Sync of all open builder tabsNEW
- Add New Container Layouts VisuallyNEW
- Structure Panel: Add Level IndicatorNEW
- Allow to nest TemplatesNEW
- Copy element styles & paste to global classNEW
- Canvas: Incremental Element Spacing & Container Resizing (in Steps of 5)NEW
- Element Spacing: Visually adjust any unit on canvasNEW
- Dynamic Data: Add Provider “JetEngine”NEW
- Dynamic Data: Run PHP functionsNEW
- Template: “Populate content” New option to populate with “CPT Archive”NEW
- Product Up-Sells element: Extend with Product Cross-SellsNEW
- Dynamic Data: human readable time difference filterNEW
- Counter element: New setting “Count From”NEW
- Query: Add “Ignore sticky posts” settingNEW
- “Disable lazy load” setting: Carousel, Slider, TestimonialsNEW
- Query: Add custom “No results message” settingNEW
- Nav Menu Element: Sub menu item borderNEW
- New Filter: Disable Google FontsNEW
- Divider: Add Direction “Vertical”NEW
- Products Filter element: New setting “Only parent terms”NEW
- Nav Menu: Background on sub menu “ul” wrapperNEW
- Dynamic Data: New filter “newTab” to open link in a new tabNEW
- Renamed “Social Icons” to “Icon List” & Improve CSS selectors (to make entire icon clickable)NEW
- Carousel: Add setting “Stop autoplay on last slide”NEW
- Slider: Show multiple slides at onceNEW
- Image element: Add HTML tag settingNEW
- New Template & Theme Style Condition: Apply to child termsNEW
- Bricks-Native Drag & Drop, and Sorting (Repeater)NEW
- Editing Text on Canvas on second/double clickNEW
- DnD: Highlight container while dragging an element over itNEW
- Builder: Dependency-free custom Draggable & SortableNEW
- Only Save Changed Data (Enabled Team Editing)NEW
- New Keyboard Shortcut: “Duplicate” (CMD / CTRL + Shift + D)NEW
- New Keyboard Shortcut: “Wrap in Container” (CMD / CTRL + Shift + P)NEW
- New filter: bricks/elements/{element_name}/control_groupsNEW
- Icon Box: Add ‘Spacing’ and Content ‘Align’ settingNEW
- Theme Style: Typography > HTML font-sizeNEW
- New Setting: Disable Google FontsNEW
- New Template & Theme Style Condition: Apply to child pagesNEW
- Copy Styles: Copy CSS classes tooIMPROVE
- Theme Styles: Container width only applies to root & direct child container of stretched containerIMPROVE
- Export Template: Include Global CSS Classes DataIMPROVE
- Builder Access: Remove pseudo-classes UI for “Edit content”IMPROVE
- TinyMCE: Text editor resizes when switching between Visual & Text modeIMPROVE
- Improve Quick Edit linksIMPROVE
- Builder: Remove inner wrappersIMPROVE
- Updated: FontAwesome 6 & swiperJS 8IMPROVE
- Image Gallery & Posts element: Add “srcset” attributeIMPROVE
- Custom Fonts: Load “woff2” font file firstIMPROVE
- Community Templates: Disable autoloading option (performance)IMPROVE
- Remove default WordPress color presets on Bricks pagesIMPROVE
- Improve Selection Contrast in Code EditorIMPROVE
- Improve performance on element registrationIMPROVE
- Image element: Open Link to Attachment Page/Media File in same tab by defaultIMPROVE
- A11y: Tabbing should target menu items subsequently (Fly-out Menus)IMPROVE
- Revisions: Don’t apply Bricks revisions limit to pages/posts that aren’t rendered with BricksIMPROVE
- Image element: Render img tag onlyIMPROVE
- Elements panel: Auto-focus on search fieldIMPROVE
- Insert new element into parent containerIMPROVE
- Remove #brx-wrap HTML tagIMPROVE
- Global Class Lock: Can’t select or view locked classIMPROVE
- Builder: Higher contrast text selectionIMPROVE
- Shortcode element: Render Dynamic Data before do_shortcodeIMPROVE
- Various Accessibility ImprovementsIMPROVE
- Hide “Bricks” menu in WP admin if logged-in user has no builder accessIMPROVE
- Form Element Styling issuesIMPROVE
- Global Classes: Lag in class dropdown when using hundreds of classesIMPROVE
- Panel Controls on lower breakpoints visible although they don’t meet conditionsIMPROVE
- Button: Remove Default Line Height & Use Padding InsteadIMPROVE
- Icon List: Remove superfluous styles (font-size, font-weight, etc.)IMPROVE
- Slider/Carousel Spacing: Remove units (swiperJS always uses px)IMPROVE
- ControlNumber: Resize unit CSS variable or function is usedIMPROVE
- Code Control: Add mode: ‘javascript’IMPROVE
- Improve: Undo/redo history in builderIMPROVE
- Images were sometimes loaded twice (due to imagesLoadedJS proxy image creation)IMPROVE
- Template inserted as shortcode: Missing Styles (“External Files”)FIX
- Template: Page Settings > Custom CSS: Missing styles (“Inline Styles”)FIX
- Theme Styles: Icon Box Alignment & Icon SizeFIX
- Pseudo Classes: Styles not added to other elementsFIX
- Global CSS Class: “flex-stretch” doesn’t stretchFIX
- SVG Element Width (in %)FIX
- Remove Bricks templates from wp-sitemap.xmlFIX
- Testimonials Element: SVG arrow icons aren’t renderedFIX
- Conflict with Users list custom columns in wp-adminFIX
- Post title: Renders archive title (in loop)FIX
- Query Loop: “Include posts” resets the queryFIX
- Query Loop: Same background image for all posts/terms showsFIX
- Query Loop: Broken Taxonomy & Meta Repeater Control UI (in builder panel)FIX
- Heading “Reset” via formatting toolbar adds “p” tagsFIX
- Builder: “Scroll to element” with preview scale creates grey area at the bottomFIX
- Saving element as “Global element” loses the custom labelFIX
- “Paste element” with non-container selected not workingFIX
- Copy & Paste Element: Custom CSS “root” issueFIX
- Basic Text element: HTML tag doesn’t update in builderFIX
- Related Posts: “Content width” sets height; and column width depends on post titleFIX
- max-width unit (default 100%) can’t be changed to px (default unit)FIX
- Form Element: Remove inline style from file upload result divFIX
- Form Element: File upload in form shows 10 uploads instead of 1FIX
- PHP notice: When inserting Community TemplateFIX
- PHP error: When using woo_product_excerptFIX
- Dynamic Data: Allow output of iframe in textareaFIX
- Templates: Escape characters in Code elementFIX
- Insert Template: Single quote gets escapedFIX
- Dynamic Data “post_content”: SVGs are escapedFIX
- Rich text with image in Template: img tag gets escapedFIX
- Pricing Table: Dynamic Data Dropdown Styling IssueFIX
- Product Archive: If set as the search template it should accept filter with ?s=FIX
- Conditions: Pages translated with Polylang do not showFIX
- Nav Menu Element: CSS transition don’t apply to menu itemsFIX
- Background video: Chrome not playing .mp4 filesFIX
- Number Control: Unit only added after blur or enterFIX
- Basic Text element: 0 = empty contentFIX
- Color Palette: Using “External Files” in a fresh installation color vars are not loadedFIX
- Icon Box: Deprecated controls generate old CSSFIX
- JS-based elements inside Query Loop not workingFIX
- Author Avatar & Featured Image Image SizeFIX
- Header/Footer Templates: “Inner Container” PaddingFIX
- Mobile Menu: After opening a submenu, it is not possible to close itFIX
- Structure Panel (RTL): Container toggle not workingFIX
- Custom elements: Styles & scripts not loaded if element not added to canvasFIX
- WooCommerce: Breadcrumbs wrong pathFIX
- WooCommerce Price Filter: Styling issues (Safari & Firefox)FIX
- WooCommerce: Variable product not showing stock of the variationFIX
- Fix Multiple CSS DeclarationsFIX
- ControlEditor Panel stays expandedFIX
- Theme Styles: Link Color precedes color set on element ID (on canvas)FIX
- ControlDimensions: Linked units on smaller breakpoints don’t sync correctlyFIX
- Form Element: Every field contains the “file upload” separatorFIX
- Linking value of 0 doesn’t auto-link the other valuesFIX
- Button inside linked Container breaks HTMLFIX
- Image Element: Fix Object-fit & stretchFIX
- Social Icons: Alignment issuesFIX
- Image Gallery: SVG + Masonry Layout PHP Warning and NoticesFIX
- Query Loop .root on every container breaks layout on canvasFIX
- Fix scroll-to-element on canvas (triggered by Structure Panel)FIX
- Save Container as Section Template: Container is emptyFIX
- CSS ID & Classes should use left-to-right (LTR) direction regardless of selected languageFIX
- Dynamic Data: Loading ACF fields from PHP not workingFIX
- Page Settings: Fix custom CSS & JSFIX
- Slider & Carousel: Items to Show / Scroll on breakpointsFIX
- WooCommerce: Image Gallery ElementFIX
- Mobile Menu: Hamburger Close Button inherits “Scrolling Text Color”FIX
- Shortcode element with global classes: CSS missing on frontend (External files)FIX
- Form Element: File Upload LabelFIX
- WP Admin Bar + Sticky Header (on mobile)FIX
- Carousel: Show Feature Image in “Content > Overlay”FIX
- Loop Pagination on Page (with default page template)FIX
- Audio Element: Play button icon after audio endsFIX
- Builder: Fix Horizontal OverflowFIX
- Slider: Pause on hover stops foreverFIX
- {woo_product_sku} not retrieving the variation SKU only the main SKUFIX
- Form success message: Fields or Dynamic Ddata not replacedFIX
- Element-specific Theme Styles not applied when previewing a Query LoopFIX
- Form: Email Content set to HTML: “br” tag added for each new lineFIX
- Chained Pseudo Elements/Classes not working on frontendFIX
- Slider Element: Slide background-image position not appliedFIX
- Don’t apply .root container padding to .stretch containerFIX
- Author Archive: Image/Image Gallery not showing correctly (Dynamic Data)FIX
- Heading with Separator isn’t self-alignableFIX
- Heading: Add Separator ‘None’ optionFIX
- Improve Dynamic Data logic: Avoid replacing code insideFIX
