Skip to content

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

Open
@DhruvBasan

Description

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:
image

Screenshot 2:
image

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:
image

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    • Status

      Ready for Grooming

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions