Media Library toolbar: spinner position on small screens

[afercia]

After 31996 the spinner position is now generally improved across the admin. There are still places where it can be further improved though, especially for small screens.

Please see the screenshot below, on the left how the spinner is currently being displayed. Since it's hidden with visibility: hidden it does reserve space and thus there's a big space between form elements.

Considering also translations, the form fields length is unpredictable, they could be displayed in three rows or four rows or just tow, depending on the viewport width and basically there's no easy CSS solution if we still want to display the spinner "inline".

One possible solution could be the one on the right in the screenshot: under a certain viewport width, just give the spinner an absolute position in order to have it centered in a semi-transparent overlay. This would work regardless of the form fields length, number of lines, etc.

I'm not a designer :) but I'd like to bring this to the UI/design team attention.

[karmatosed]

I would +1 to giving a transparent overlay and being the left option. To me having a consistent play for the eye makes a lot of sense to users. I am also all for unifying any interaction or feedback like this.

[kushang78]

Added patch for this ticket.

[kushang78]

The loader is now in center with white Background overlay under ‘’media-782'’.

So, Please check the attached diff file and Share your feedback on it.

Thanks!

[joedolson]

Update patch to properly show/hide the overlay; rename property to tertiary instead of third for consistency

[joedolson]

Screenshot after patch

[joedolson]

Before patch

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

[joedolson]

In 57605:

Media: Update progress spinner position on small screens.

Move the media library progress spinner to overlay the filter controls while active. Improves design and prevents unpredictable layout.

Props afercia, kushang78, joedolson, karmatosed.
Fixes #33049.

in r57605

[ramonopoly]

Could folks help me confirm if https://core.trac.wordpress.org/changeset/57605 affects the ability of the media library to add new images in narrow viewport widths in the editor?

I think the new overlay is making the button unclickable. Furthermore, the button is not disabled via any attribute but by an overlay div (.media-bg-overlay), therefore I'd argue it probably constitutes an accessibility problem as well.

See .media-bg-overlay here:

​https://github.com/WordPress/wordpress-develop/commit/1a4692f54d1863386549dfc0a3ffd7a40076c1cc#diff-c657d8edf83f580c59e61e205f967175fbf6e687c188e87e98221b47286c7074R2832

Reported here ​https://github.com/WordPress/gutenberg/issues/60152 in case the fix lies with Guteberg, but I think it should be fixed in Core?

Thanks!

[wildworks]

Could folks help me confirm if https://core.trac.wordpress.org/changeset/57605 affects the ability of the media library to add new images in narrow viewport widths in the editor?

Maybe it's a typo in the CSS value? I don't think that display:hidden is correct CSS.

​https://github.com/WordPress/wordpress-develop/blob/f9b59e940dcb34a9b8cd6faacc5c35a2846dbbd2/src/wp-includes/css/media-views.css#L2837

display: hidden is invalid CSS

It's causing the following bug:

​https://github.com/WordPress/gutenberg/issues/60152

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

[ramonopoly]

Maybe it's a typo in the CSS value? I don't think that display:hidden is correct CSS.

I just saw this too! Thanks @wildworks

I updated a Core patch to correct

​https://github.com/WordPress/wordpress-develop/pull/6313

Ah, that's why I wasn't able to insert images on my phone! 💡

[swissspidy]

In 57881:

Media: Fix CSS issue preventing inserting images on smaller viewports.

Addresses a regression introduced in [57605] where the “Select” button in the media modal was not clickable anymore due to an overlaid element.

Props ramonopoly, swissspidy, freewebmentor.
Fixes #33049.

Committed in https://core.trac.wordpress.org/changeset/57881

Thanks for taking care of that @swissspidy

[joedolson]

Reopening for merge to 6.5 branch; reviewed and ready for merge.

[joedolson]

In 57884:

Media: Fix CSS issue preventing inserting images on smaller viewports.

Addresses a regression introduced in [57605] where the “Select” button in the media modal was not clickable anymore due to an overlaid element.

Props ramonopoly, swissspidy, freewebmentor.
Reviewed by joedolson.
Merges [57881] to the 6.5 branch.
Fixes #33049.