Can not see uploaded image in page-builder Preview when infinite-loop is enabled

[DhruvBasan]

Preconditions (*)

Tested on this versions:
1. Magento 2.4.5-p1
2. Magento 2.4.6-p1
3. Magento 2.4.6-p2(Page-builder v-2.2.4)
4. magento develop branch with page-builder develop branch

Description

There is an issue encountered with blocks when we add two or more slides to a slider on the page builder, and the infinite loop is enabled from the slider settings. After attempting to upload an image in one of the slides, the uploaded image is not visible in the page builder preview

Steps to reproduce (*)

1: Access the Magento admin panel and navigate to 'Content' -> 'Blocks' and Add a new Block.
2: After in Edit that block in pagebuilder and add a row
3: Drag the slider content-type onto the row and Create two additional slides usinfg Add(+)
4:Click on the edit on slider content type and set infinite loop to yes
5: Now Attempt to upload an image(There are two ways to upload image in slide) directly by clicking on 'Upload Image' or by using the 'Slide Settings' to upload a background image. After uploading and saving the slide settings, the uploaded image is not visible in the Page Builder preview. In the attached screenshot 1, I uploaded an image in Slide 1, but it is not displayed in the Page Builder preview, as shown in screenshot 2.

Screenshot 1:

Screenshot 2:

Expected result (*)

we can see the uploaded image in pagebuilder preview when infinite loop is enabled

Actual result (*)

we can not see the uploaded image in pagebuilder preview when infinite loop is enabled

Additional information (*)

After debugging the issue, I discovered that when the infinite loop is enabled, a clone of the slider is created. Upon inspecting the class 'pagebuilder-slide-wrapper,' I noticed that the CSS for 'pagebuilder slide wrapper,' specifically in the ID 'html-body [data-pb-style],' is being overridden. The 'background-image' property is set to 'none,' causing our image 'URL' to be overridden as well. Consequently, the uploaded image is not visible in the Page Builder preview when the infinite loop is enabled. I have attached a screenshot (screenshot3) displaying the CSS of the 'pagebuilder slide wrapper' for reference

Screenshot 3:

[m2-assistant]

Hi @DhruvBasan. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[m2-assistant]

Hi @DhruvBasan! 👋
Thank you for collaboration. Only members of Community Contributors Team are allowed to be assigned to the issue. Please use @magento add to contributors team command to join Contributors team.

[engcom-November]

Hello @DhruvBasan ,

Thank you for your report and Collaboration.

We attempted to reproduce the issue in version 2.4 develop but were unable to do so. Attached the screenshots for the references please review once.

Steps to Reproduce:

• Log in to the Magento admin.
• Navigate to the admin panel content - blocks.
• Click on "Add New Block."
• Click "Edit with pagebuilder
• Drag and drop the Row
• Drag and drop the slider and add two more sliders by clicking on the add icon "+"
• Click on the Edit Icon and Enable the Infinite loop
• And Upload the image by clicking on the settings icon
• Click on the Save

We followed these steps and did not encounter any issue here and we are able to view the image in slider as shown in the screenshots above. Could you please recheck the issue in the latest version? Alternatively, let us know if we missed any steps while reproducing the issue.

Therefore, we are marking this ticket as "Needs Update."
Thank you!