Browser: Chrome Version 148.0.7778.97 (Official Build) (64-bit)
OS: Windows 11
Hi,
I’ve developed a custom plugin that integrates Carbon Fields with Bricks Builder by implementing my own Dynamic Data Tag providers (for default, image, and gallery fields) and a custom Query Loop provider for Carbon Fields repeaters — all registered through the official Bricks filter hooks (bricks/dynamic_data/register_providers, bricks/setup/control_options, bricks/query/run, bricks/query/loop_object).
Everything works perfectly on the frontend: Dynamic Data Tags resolve correctly, the custom Query Loop iterates through all repeater entries, and images render as expected — whether used in Image Elements or as CSS background images.
However, I’ve discovered a Builder-only rendering issue specifically affecting background-image with dynamic data on the first iteration of my custom query loop.
Summary:
When using a custom query loop provider (registered via bricks/query/run filter) nested inside a Terms Query Loop, dynamic data bound to a Background Image (background-image CSS property) does not render in the Builder for the first loop iteration. All subsequent iterations render correctly.
The frontend renders correctly for all iterations — this is a Builder preview-only issue.
Using an Image Element (<img> tag) with the same dynamic data tag works correctly in both Builder and frontend.
Steps to Reproduce:
-
Register a custom query loop type via
bricks/setup/control_optionsandbricks/query/runfilters (e.g., a Carbon Fields repeater on term meta). -
Create a Terms Query Loop (e.g., Product Categories).
-
Inside the Terms loop, add a Slider (Nestable) with Query Loop set to the custom query type.
-
Inside the Slider’s Slide element, set a Background Image using a dynamic data tag that resolves to an image ID from the custom query (e.g.,
{crb_product_cat_gallery__image}). -
Open the page in the Bricks Builder.
Expected Result:
All slides in the Slider should display their background images in the Builder preview, matching the frontend output.
Actual Result:
-
First slide of each category: Background image is blank/missing in the Builder.
-
Subsequent slides: Background images render correctly in the Builder.
-
Frontend: All slides render correctly (all background images visible).
-
Image Element (same dynamic tag): Works correctly in both Builder and frontend.
Analysis
The issue is caused by the difference in how Bricks renders core query types vs custom query providers in Query::render() (query.php):
Core types (post, term, user) have dedicated rendering paths that fully establish WordPress global context before the render callback:
// Post loop — the_post() sets up global $post, featured image, etc.
$query_result->the_post();
$this->loop_object = get_post();
Custom providers (ACF, Meta Box, Carbon Fields, etc.) use a generic path that relies solely on the bricks/query/loop_object filter:
// Custom loop — no WP global context, only filter-based
$this->loop_object = apply_filters('bricks/query/loop_object', $loop_object, ...);
For the first iteration of custom providers, parse_dynamic_data() appears to resolve CSS background-image properties before the loop object context is fully available. This doesn’t affect <img> elements (Image Element) because they resolve their src attribute through a different code path.
This does not affect:
-
Core query types (post, term, user) — they use
the_post()/ direct assignment with full WP context -
Image Elements (
<img>tags) -
Frontend rendering
Workaround:
Use an Image Element instead of background-image for dynamic images inside custom query loops. Builder/Frontend rendering is unaffected regardless of approach.
Thanks
