A huge release in itself with some very cool new features & improvements. The main emphasis though was to build upon & extend the in-builder improvements we started in 1.7. Resulting in a faster, smoother, and more resource-efficient in-builder editing experience. This should provide a good foundation to purposefully extend the builder going forward without negatively impacting the editing experience.
We completely rewrote the way global classes are generated inside the builder. Tested on installations with 1500+ global classes & hundreds of elements on a page. There was no more lag while editing classes. If you still experience any issues in this regard, please email us directly so we can investigate your specific setup.
The in-builder render logic has been upgraded too. Re-rendering elements and loops in the builder now also comes with a subtle loading animation to help indicate when new HTML is being fetched.
Mouseover an element on the canvas now shows the element name.
Element highlights are more minimal and use the same blue color instead of the differently colored highlights.
You can customize this highlight color to your liking by changing the CSS variable --builder-color-highlight in your Bricks settings custom CSS like this: :root { --builder-color-highlight: red; }
The elements panel remembers the expanded/collapsed state of every element group to help speed up the adding element process (cleared on page reload).
You can inspect & copy the element id to your clipboard with one click from the context menu & the element classes interface.
We updated VueJS to the latest version (3.2.47), plus most of the other in-builder libraries. The Google fonts library is updated as well (and the JSON file that’s being used in the builder is 80% smaller).
Adobe fonts
Our latest integration brings Adobe fonts to Bricks. You just need to provide your Adobe Fonts web project ID under Bricks > Settings > API keys, and then select your Adobe fonts in the builder. Use the “Sync fonts” button to pull your fonts into your Bricks installation at any time with one click.
How to use Adobe fonts in Bricks: https://academy.bricksbuilder.io/article/adobe-fonts/
New typography setting: font-variation-settings
You can now control your variable Adobe fonts & variable Custom fonts via the new font-variation-settings which is available in any typography control: https://academy.bricksbuilder.io/article/adobe-fonts/#font-variation-settings.
The Google fonts API Bricks currently uses only seems to support the wght axis for variable fonts. We plan on upgrading to Google’s v2 API soon. So that all variable axes are supported for Google fonts as well.
Popup events & functions
There are two new popup helper functions that allow you to open & close popups programmatically on your page, plus event listener to consume & respond programmatically to any popup being opened or closed: https://academy.bricksbuilder.io/article/popup-builder/#events-functions
Besides, a new popup setting to enable the “Scroll (body)” popup can now be placed anywhere inside a loop (via the Template element). Bricks renders all popups after the footer. So there should be no more z-index issues.
Interactions can now also be set on the Loop item itself.
Form validations
Form fields set to required are now also validated in the backend. Trying to bypass the required HTML attribute by removing it in the source code no longer works.
You can also create your very own custom form validations using the new bricks/form/validate filter: https://academy.bricksbuilder.io/article/form-element/#form-validation
This allows you to add your own honeypot spam checker or any other third-party form validation plugin to integrate with form submissions in Bricks.
Smooth scroll
We removed Bricks’ default JS-powered smooth scroll solution. Which not only conflicted with some plugins but wasn’t great for accessibility either.
Bricks now provides a CSS-only smooth scroll solution that you can enable under Bricks > Settings > General like this:
Better nav menu accessibility
The nav menu has received quite a few a11y improvements. All of which you can find in the changelog item here https://bricksbuilder.io/changelog/?dev=true#7092
Full changelog
- Integration: Adobe Font/TypekitNew
- New Bricks settings: Smooth scroll (CSS)New
- List Element: Add “Icon” SettingNew
- Popup: Enable scroll (body)New
- Template import: Create non-existing pseudo-elements & pseudo-classesNew
- Popups: New open/close popup JavaScript helper functionsNew
- Control spacing: Link opposite sides (vertical and horizontal margin/padding)New
- Video element: More Icon settingsNew
- Dynamic data: parse _cssId (frontend only)New
- Heading: Set default HTML tag in theme stylesNew
- Query Loop: “Child of” support multiple IDs (comma-separated)New
- Copy element ID to clipboard (from element panel & context menu)New
- Form element: Validate required fields in the backend tooNew
- New filter: bricks/form/validate (validate form submission)New
- Custom Fonts at the top of the font-family dropdown listImprove
- Color Palette: Improve delete color actionImprove
- Updated Google fonts library (plus reduce Google font JSON file in builder by 80%)Improve
- Builder: Provide pageSettings & templateSettings on window.bricksDataImprove
- Nav Menu: Various accessibility improvementsImprove
- Query Loop: Tax Query “include_children” options control instead of checkboxImprove
- Query Loop: Order by ‘Random’ creates duplicates (new loop setting: “Random seed TTL”)Improve
- Scroll Interactions: Support % and ‘vh’ unitsImprove
- Video element: Updated control descriptions (related video, theme styles)Improve
- WooCommerce Mini Cart: New “Close” icon (cart details)Improve
- Use dynamic data filter “text” to render email in link without mailto:Improve
- Builder lag when editing classes (on complex pages)Improve
- Query Loop: “Disable query merge” for Term queriesImprove
- Template element in header: Missing styles (loading method: inline styles)Fix
- Text gradient plus CSS selector: Wrong selector (in builder)Fix
- Reset element ID styles resets class too (when class is selected)Fix
- Saving global class changes without element changes creates empty revisionFix
- Specificity: p:last-of-type+h(x)Fix
- Basic text adds “p” tagsFix
- Custom Breakpoint containing “desktop”: Styles missing on the frontendFix
- Template/Shortcode Element: Renders template with status draft/trashedFix
- DD “url_parameter:error” can’t be retrieved as a URL parameterFix
- Specificity: Theme Style Link StylingFix
- Image element: Photoswipe lightbox JS error query loop + paginationFix
- Nav Mobile Menu: Missing close animation because of missing “visibility” transition value + z-index issuesFix
- Dynamic data inside gradient not parsedFix
- Query Loop: Querying posts from specific category + offset pulls the current page into the loopFix
- Populate content: Empty term archive shows populate content dataFix
- Loop + Nestable Elements: Only first nestable element visible on canvasFix
- Background Video: Scale setting overrides iframe transformFix
- Disable query merge not working in the archive with pagination (> page 2 )Fix
- Heading element: Can’t reset “HTML Tag” settingFix
- Nestable Tabs: Remove default styles from “Content” block element insideFix
- Undo/Redo not working in header/footer templatesFix
- Interaction conditions comparison incorrect as the data is typeof stringFix
- ACF file type ‘file’ returns the post title if the value is emptyFix
- Custom control value: Replace all “%s” occurrences in CSS rule valueFix
- Contenteditable elements inside nested query loop: Console error if the result is emptyFix
- Object cache causes WPML unable to get the correct popup templateFix
- WP Gridbuilder: Facets on WooCommerce archiveFix
- Input, Select, Textarea: Remove default display styleFix
- WooCommerce: Archive template won’t use Bricks template if 1st post in product category result is set to ‘Render with WordPress’Fix
- Missing media query if border-style not setFix
- Theme Styles: “Site Background” applies to html & body tag (boxed layout)Fix
- Video Element: Dynamic data overlay image inside query loop doesn’t showFix
- WooCommerce Cart: Changing the shipping method changes the increments of the quantity inputsFix
- Fix border controls CSS in RTLFix
- Fatal error: Uncaught Error: [] operator not supported for strings (if same attribute has been set already)Fix
- Logo: Provide dynamic data for image sourceFix
- Global Element in loop: Styles (due to missing global element class)Fix
- Builder Access: Edit contentFix