Components (experimental)
Components, probably the biggest missing building blocks in Bricks, are now available as an experimental feature in Bricks 1.12.
Components allow you create reusable and customizable elements for a scalable, consistent, and easy to maintain workflow. Make sure to watch the official Components video below, for a first dive into the world of components in Bricks …
Documentation:
Components
Query Loop: Include/Exclude support dynamic data
Bricks now supports dynamic data tags in the “Include” and “Exclude” query loop controls.
This lets you include/exclude posts dynamically through dynamic data field values, such as those retrieved from
ACF or Meta Box relationship fields, while also combining all other query parameters like meta queries or taxonomy queries.
Documentation & examples:
Query Loop
You can also query
ACF Gallery fields by setting the post type to “Media” and selecting the ACF gallery DD tag under “Include”.
ACF Gallery example:
Query Loop
Optimized CSS file loading order to prevent CLS & FOUC
We received various reports about CLS (Cumulative layout shifts) and FOUC (Flash of unstyled content) issues. The root cause being that certain CSS files were loaded/enqueued too late. This has now been resolved in Bricks 1.12. If you still experience any CLS/FOUC issues when using Bricks 1.12+, please let us know.
Cascade layer for Bricks default styles
If you ever ran into a CSS specificity issue with the default Bricks styles, this new, experimental feature, is for you. As Bricks 1.12 introduces a possible solution to this longstanding issue through
CSS cascade layers (@layer), which as of December 2024 reach an impressive 96% browser support and “Widely available” Baseline.
For more details about this new feature, how to enable it, and how it works, please head over to
Cascade layer
Show outer Post Content elements
When editing a page with Bricks that is rendered through a template (e.g. template condition: post type = page) the elements surrounding the “Post content” element were not visible in the builder.
Instead of viewing the entire page as it looks on the frontend only the “Post content” area of the page template was visible. Making it extremely hard to style such pages in the builder.
In Bricks 1.12 you can now see all outer Post content elements in the builder
NOTE: Available for all templates of type “Single”
Context menu: Copy and paste attributes & classes
The context menu contains two more copy & paste action icons for that let you copy & paste all attributes & classes defined on an element. The respective icons only appear if the element contains any attributes and/or classes.
Query Filters: Support term & user queries
Prior to Bricks 1.12 query filters only supported “Post” queries. You can now also filter queries of type “Term” and “User”.
There are also two new user-specific dynamic data tags:
- wp_user_role: Returns current user context primary role. Use :value to return the role slug.
- wp_user_registered_date: Returns current user context registered date
Global Class Import Manager
When importing classes through the global class manager, through importing a template file, inserting a remote template or copy/pasting elements, Bricks now displays the Global Class Import Manager when new classes or class conflicts with imported classes are detected.
Conflicts are highlighted in red with options to override, discard, or rename the class. You can now also categorize those classes during import.
2 class import conflicts detected
To resolve the conflict for a specific class, hover over or click it, then select the “arrow” icon to override the local class, or the “trash” icon to discard the conflicting class from the import.
If there’s a naming conflict, meaning a class with the same name already exists on your site, you can resolve the conflict by renaming the imported class.
To resolve class conflicts in bulk, select the class conflicts you want to resolve, and use the override/discard icons at the top of the column.
Once all conflicts are resolved you can finish importing the classes by clicking the green IMPORT CLASSES button at the top-right of the global class manager. You can also skip the entire class import by clicking the SKIP CLASS IMPORT button next to it.
Documentation:
Global class import manager
You can configure/disable the global class import manager under Bricks > Settings > Builder
Other noteworthy changes
- Accordion & Tabs (flat & nested): New default open item setting
- Form: Show/hide password field toggle icon
- Form: New setting “Disable form validation” (input, blur)
- Global Classes Manager: New filters for Used/Unused on this site
- Query Loop: New Infinite Scroll Delay setting
- Image Gallery: New “Lightbox ID” setting (to connect with single images)
- Duplicate post: Bricks setting and filter bricks/use_duplicate_content to disable this feature
