WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.2k forks source link

Expand on click feature adds expand SVG to page after closing lightbox #65352

Open TNHSAesop opened 2 months ago

TNHSAesop commented 2 months ago

Description

The expand on click lightbox feature is causing an SVG icon to appear on the page next to the image after closing the lightbox. I would expect no unexpected elements to start showing after closing.

image

HTML of the element that appears:

<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" data-wp-style--right="context.imageButtonRight" data-wp-style--top="context.imageButtonTop" style="right: 16px; top: 16px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
                <path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
            </svg>
        </button>

Step-by-step reproduction instructions

For this issue I am using a classic theme (Beaver Builder Theme) and have upload a theme.json file to my child theme to enable lightbox on all image blocks.

theme.json code

{
    "version": 2,
    "settings": {
        "blocks": {
            "core/image": {
                "lightbox": {
                    "enabled": true
                }
            }
        }
    }
}

the lightbox appears for all the image blocks as intended but when i click on an image, the lightbox is displayed, but once the lightbox is closed the stray html element appears on the page.

Screenshots, screen recording, code snippet

No response

Environment info

Environment details below

image

Using Beaver Builder Theme

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

ntsekouras commented 2 days ago

Can you expand a bit more on your use case? I couldn't reproduce this in trunk. The close svg is positioned inside the figure with absolute position. By seeing your screenshot it seems something might be different with other styles applied (like no position relative for the figure etc..).

Maybe a short video would be more helpful.