Browser: Chrome 151
OS: Windows 11
Hi,
I have encountered an annoying UI bug inside the Builder regarding the Slider (Nestable) element.
Environment:
-
WordPress: 7.0.4
-
PHP: 8.5.x
-
Bricks Version: Reproduced on 2.3.10, 2.3.11, and the latest 2.4 Beta (1 & 2).
Symptoms:
-
The issue strictly occurs only in the Builder. The Front-end renders perfectly fine.
-
When assigning a
Background Image(via the Style tab) to individual slides and settingItems to showto a value greater than 1 (e.g., 3), scrolling to the next slides causes them to lose their background images entirely. -
Inspecting the DOM in DevTools reveals that the
background-image: url(...)CSS rule is completely missing from the builder’s injected stylesheet for those specific slides once they are scrolled into view or cloned by Splide.
Steps to Reproduce:
-
Create a new Blank Page for testing and click Edit with Bricks.
-
Add a Slider (Nestable) element.
-
Under Content settings, set Items to show to
3and Items to scroll to1. -
Add 4 slides and set a distinct Background Image for each slide via the Style tab.
-
In the Builder, everything looks fine initially
-
Click the slider navigation arrows/dots in the builder to scroll to the next set of items.
-
Bug: The upcoming slides (and looped slides) lose their background images and appear blank.
Screenshots:
[1]
[2]
[3]
[4]
[5]
Technical Observation: Comparing the DevTools output, a visible working slide successfully retains its background URL (sceenshoot [4]), whereas the blanked-out slides are completely missing the background-image rule in the computed styles (sceenshoot [5]). This seems to be an issue with how the Builder’s Vue state injects dynamic CSS for Splide’s cloned elements (splide__slide--clone) during interactions.
Thanks
