Media Library Gallery "Remove" button styling

[maccyd]

When the media library is in gallery mode and on the "Edit Gallery" tab, the "Remove" button doesn't resemble a remove button. It resembles an unchecked check box.

To replicate:

Navigate to a page
Insert a Gallery block
Click "Media Library"
Select some images and click "Create New Gallery"
Select the "Edit Gallery" tab

The UI appears as though the expectation is to select images for removal, not that they will be immediately removed.

[maccyd]

Screenshot

[hbhalodia]

Hi @maccyd, Can you please make sure any 3rd party plugins and only core theme is enabled? I am unable to reproduce the issue, It has a X icon on the edit gallery to remove the same. As shown in below screenshot.

Can you also provide the enviornment info?

Thank You,

[maccyd]

For Sure

Browser
Chrome Version 142.0.7444.162 (Official Build) (arm64) on macOS Ventura 13.5

Local docker images
devwithlando/pantheon-appserver:8.1-4
bitnami/nginx:1.25.5-debian-12-r7
devwithlando/pantheon-index:3.6-3
mariadb:10.3.31
redis:6
wodby/varnish:6.0
nginx:1.27.3

WordPress 6.9-RC1
php 8.1.31

Also tested on
WordPress Playground on v 6.9 RC1 (no plugins)
​https://playground.wordpress.net/?php=8.3&wp=beta&networking=no&language=&multisite=no&random=y4q1rn88xn

Replying to hbhalodia:

Hi @maccyd, Can you please make sure any 3rd party plugins and only core theme is enabled? I am unable to reproduce the issue, It has a X icon on the edit gallery to remove the same. As shown in below screenshot.

Can you also provide the enviornment info?

Thank You,

[hbhalodia]

Hi @maccyd, Thanks for the input. I am able to reproduce this on the plyaground link you provided and as well as on the latest trunk.

I will check the issue and come up with the fix for the same.

Thank You,

[hbhalodia]

Hi @afercia @joedolson, There is a probable regression from the changeset - https://core.trac.wordpress.org/changeset/60806 and specifically from file - https://core.trac.wordpress.org/changeset/60806#file25, This have updated the button structure to use the media-modal-icon in a span tag, child of button. We may need to update/add the CSS code in media-views.css to add the correct position of sprite image and target the media-modal-icon instead of attachment-close button.

.wp-core-ui .attachment-close {
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        height: 22px;
        width: 22px;
        padding: 0;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
        transition: none;
}

.wp-core-ui .attachment-close .media-modal-icon {
        display: inline-block;
        background-position: -96px 4px;
        height: 22px;
        width: 22px;
}

.wp-core-ui .attachment-close:hover .media-modal-icon,
.wp-core-ui .attachment-close:focus .media-modal-icon {
        background-position: -36px 4px;
},

Removed, background-position property from .attachment-close and update it to media-modal-icon class with default and hover properties.

I am attaching a patch file for the same, which I tested and working as expected without any regressions.

Can you please check as well?

[hbhalodia]

Patch for issue 64269

1. Fixes the regression issue added by changeset - https://core.trac.wordpress.org/changeset/60806#file25, which moves the media-modal-icon class to a new span, child of button element.
2. Fixed by adding the CSS which updates the sprites images position to correctly add the icons.

Trac ticket: https://core.trac.wordpress.org/ticket/64269

[joedolson]

This should be resolved for 6.9; it is a regression, and definitely decreases the usability of the UI as it is.

[joedolson]

The PR looks good; marking for commit.

[joedolson]

In 61316:

Media: Fix 'remove' icon in Edit Gallery mode.

The structure change in [60806] effected the CSS for this icon. Adjust the CSS to target the new child container of the button.

Props maccyd, hbhalodia, joedolson.
Fixes #64269.

[joedolson]

Reopening for backport to 6.9 branch.

[audrasjb]

The patch fixes the issue on my side and looks good to ship with RC4.
Marking as dev-reviewed.

[joedolson]

In 61318:

Media: Fix 'remove' icon in Edit Gallery mode.

The structure change in [60806] effected the CSS for this icon. Adjust the CSS to target the new child container of the button.

Reviewed by audrasjb.
Nerges [61316] to the 6.9 branch.

Props maccyd, hbhalodia, joedolson.
Fixes #64269.