Version: 2.4-beta3
Setting: Bricks → Settings → Builder → CSS Sync (Bi-directional sync
between Custom CSS and style controls) = enabled
Description
With CSS Sync enabled, styling an Image element writes an unscoped img
selector into the element’s Custom CSS. The rule then applies to all
images on the page, not just the element being styled.
Steps to reproduce
- Enable CSS Sync in Bricks settings
- Add two Image elements to a page (e.g. in different sections)
- Select one of them and set Style → Layout → Object Fit to
cover
(Aspect Ratio, Object Position or CSS Filters trigger it too) - Save, then inspect the generated Custom CSS of that element
Actual
#brxe-oexjgf:not(.tag), img { object-fit: cover }
The bare img after the comma is an independent selector. Both images
on the page get object-fit: cover.
Expected
#brxe-oexjgf:not(.tag), #brxe-oexjgf img { object-fit: cover }
Only the styled element is affected — which is exactly what the regular
frontend CSS generator produces for the same control:
.brxe-wpzgft .brxe-oexjgf.brxe-image:not(.tag),
.brxe-wpzgft .brxe-oexjgf.brxe-image img { object-fit: cover }
Both rules are present in the page source simultaneously, so the
generator and the sync disagree.
Likely cause
includes/elements/image.php:56 defines the shared selector:
$img_css_selector = '&:not(.tag), img';
Used by four controls (lines 61, 153, 167, 180). The second part
has no explicit &. The regular CSS generator prefixes the root to
every comma-separated part regardless; CSS Sync only substitutes
where & appears literally, leaving img unscoped.
If that reading is right, any control whose selector contains a
comma-separated part without & is affected — not just Image.
Notes
- Disabling CSS Sync prevents regeneration; existing broken
_cssCustom
must be removed manually. - Removing the Aspect Ratio control alone does not help, since Object Fit
shares the same selector.