Media Library Imrpovements: UI, Non-Closing Options, and Button Select State Issues in Image Editing

[nithi22]

When editing an image in the media library, multiple issues occur simultaneously. Firstly, the UI for the image rotation option is poorly designed, making it difficult to use. Secondly, the options do not close when clicking outside the designated area, leading to a cluttered interface. Lastly, the button select state does not work correctly when clicking outside,

Environment

• WordPress: 6.3-beta3-56155
• PHP: 8.0.8
• Server: Apache/2.4.46 (Unix) OpenSSL/1.0.2u PHP/8.0.8 mod_wsgi/3.5 Python/2.7.18 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.11 Perl/v5.30.1
• Database: mysqli (Server: 5.7.34 / Client: mysqlnd 8.0.8)
• Browser: Firefox 114.0 (macOS)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins:

Steps to Reproduce:

1. Access the media library.
2. Select an image for editing.
3. Click on the rotation option.
4. Click on the button to activate its selected state.

Expected Behavior:

1. The rotation option should be displayed in a user-friendly and intuitive UI.
2. The rotation options should be presented clearly and in an organized manner.
3. The button should enter a selected state when clicked.
4. The button should maintain its selected state even when clicking outside.

Actual Behavior:

1. The UI for the rotation option is poorly designed.
2. When clicking outside the options, they do not close, leading to a cluttered and confusing interface.
3. Clicking outside the designated area unexpectedly affects the selected state of the button, causing it to change or revert to its default state.

[joedolson]

Hi, @nithi22 - thanks for your commments!

If you can provide any suggested changes for the design, that would be appreciated. The description "is poorly designed" isn't really actionable. Providing some concrete ideas about what is making this a problem for you would be helpful.

I agree that the rotation menu items should close when clicking outside the menu; that seems very reasonable.

[azaozz]

Replying to joedolson:

The description "is poorly designed" isn't really actionable. Providing some concrete ideas about what is making this a problem for you would be helpful.

Yep, "poorly designed" may mean many different things to different people :)

Also thinking it may be a bit too late for any substantial changes to be made for 6.3. The RC is in few days. Perhaps this can be improved for 6.4?

[deepakvijayan]

@joedolson @azaozz

I understand what he is getting at.

For starters, say when using the 'Image Rotation' feature. It should enable an 'active' state for the 'Image Rotation' button as visual feedback for the user. Similar practices should be followed for other controls as well.

Also, the submenu/options for said 'Image Rotation' buttons could be styled better. Right now it feels something was broken somewhere.

I've attached an image to reference how it could be improved.

[joedolson]

This patch updates the design of the image rotation, but does not implement the close when clicking outside suggestion. I suggest committing this change and reopening to try and get that in later; the design changes are helpful, particularly the addition of affordance to improve the image rotation menu.

[joedolson]

Design update

[joedolson]

I chose not to use the primary button design for an active state, since it already has a strong alternate meaning in the WordPress ecosystem.

[antpb]

refreshed patch

[antpb]

@joedolson I'm not sure why the patch doesn't apply clean but I uploaded a new refreshed one that I've confirmed to apply. The patch looks and works good in my review. 👍

just make sure my new patch doesn't have anything I missed :)

[joedolson]

I'm not sure why the patch didn't apply cleanly, but it includes some CSS that belongs to #58692. As a result, your review of this patch applies to both those issues, I guess. That's my mistake; the patch I uploaded doesn't match the patch I have locally, so I assume I revised the patch but uploaded an earlier version.

Uploading the correct version of the patch, but I don't think it makes any concrete difference to your review.

[joedolson]

Corrected file

[joedolson]

In 56239:

Media: Improve layout of image rotation options panel.

Add visual affordance to expanded/collapsed states and move panel under the control rather than placing it next to the toggle, to prevent overflow with the save menu.

Props nithi22, deepakvijayan, antpb, joedolson.
Fixes #58756.

[joedolson]

In 56240:

Revert package-lock.json changes committed by mistake in [56239]

Props joedolson.
See #58756.

[joedolson]

Reopening and moving to 6.4 to address closing menu when focusing elsewhere.

[marybaum]

@joedolson I think this is in your wheelhouse, so we won't interfere from a random scrub. Look forward to seeing this land!

[joedolson]

Follow up to close menu when focus elsewhere

[joedolson]

To test:

1) Go to edit an image.
2) Open the image rotation menu.
3) Either tab outside of the menu or click elsewhere on the page. Observe that the menu closes when focus leaves the menu.

[Dharm1025]

Thanks for the testing instructions @joedolson

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58756/58756.3.diff
(Note: I am getting errors in applying the patch, but since there aren't many changes, I applied it manually and tested it.)

Environment

• OS: macOS Ventura 13.4.1 (c)
• Web Server: nginx/1.25.0
• PHP: 7.4.33
• WordPress: 6.4-alpha-56267-src
• Browser: Chrome Version 116.0.5845.187 (Official Build) (arm64)
• Theme: Twenty Twenty-Three
• Active Plugins: -

Test Results

✅ Works as expected with a patch.

I have tested the patch as per testing instructions and it works as expected.

[joedolson]

Thanks for testing, @Dharm1025!

[faisal03]

Test Report

Tested this in SAFARI and found the patch https://core.trac.wordpress.org/attachment/ticket/58756/58756.3.diff is working as expected.

Environment

• OS: macOS 14.0 (23A339)
• Web Server: nginx/1.25.0
• PHP: 7.4
• WordPress: 6.4-alpha-56267-src
• Browser: Safari Version 17.0 (19616.1.27.111.16)
• Theme: Twenty Twenty-Three
• Active Plugins: -

Image

[joedolson]

Thank you, @faisal03!

[joedolson]

In 56652:

Media: Close image rotation menu when not focused.

Implement a focus monitor so that if user focus moves away from the image rotation menu, it closes and doesn't block the image editing canvas. Follow up to [56239], [55919].

Props nithi22, deepakvijayan, dharm1025, faisal03.
Fixes #58756.

[joedolson]

In 56653:

Coding Standards: Remove unused variable el in monitorPopup.

Remove an unused variable to resolves coding standards failure. Follow up to [56651].

Props joedolson.
See #58756.