Shortcut for Select Button in Media Library

[hirschferkel]

Hi there,

there should be a shortcut to confirm the selected image in Media Library? It is possible to choose an image with Return Shortcut but there is no combination (and documentation) to just confirm the selection with keypad and insert it to the page …

Dealing with lots of images is currently really cucumbersome, as one has to click the button manually each time again and again.
​https://pasteboard.co/sX5B35Ns3tM7.jpg

[antpb]

Noting this was discussed in the Media Component meeting and we agree this currently is a sore spot. We are thinking cmd/ctrl + enter is the right combo to do this. Adding to 6.6 to see if we can find a quick and solid solution.

[hirschferkel]

Great to read!

[hirschferkel]

@antpb is it possible to apply this patch already in the current WordPress release?

[joedolson]

Seems to work well; did a brief screen reader test in NVDA/Firefox and NVDA/Chrome to verify it works with a screen reader, and the shortcut fires there.

I did notice that the keyboard shortcut doesn't work in the classic editor - it closes the modal, but doesn't insert the image.

[skobe]

Replying to hirschferkel:

Great to read!

Great to read indeed! Thanks for pushing this!

[antpb]

fixes Classic Editor media select views

[antpb]

Thanks for the testing on this @joedolson nice catch. I've uploaded a new patch that addresses the issue with the Classic Editor views. Everything should insert correctly now!

[joedolson]

Tested and confirmed working on classic editor now & also still working with a screen reader running. Updated patch just removes some white space at the end of a line.

[joedolson]

Strip excess whitespace

[rcreators]

Tested with the Latest WordPress. Works Great. Using CTRL + Enter let me select multiple media. Not sure how but SHIFT + Enter also works like selecting an entire row which is not mentioned in the uploaded patch.

[rcreators]

@joedolson I tested this patch again and i think its creating another issue. The CTRl + ENTER works great to add image to the page. But now i cannot select multiple images with the keyboard which i was able to do without applying this patch.

The default behaviour of selecting image was:
1) Enter: Select Particular Image
2) Ctrl + Enter: Select multiple images
3) Shift + Enter: Select multiple images in a sequence

Now as patch changing the second behaviour, i cannot select multiple image with ctrl + Enter and it will create confusion for regular users who are using this method.

[joedolson]

@rcreators Where are you able to select multiple images? What happens when you try to insert those images? What browser are you using and what is the path to get to the inserter?

I can't replicate the issue you're describing - I am not able to select multiple images with or without the patch. But I don't have enough information to be able to do a comparable test.

[oglekler]

We have 2 days before Beta 1, so I am moving it into the next milestone for further work.

[rcreators]

Hello @joedolson Here is link of video what i am saying.

​https://go.screenpal.com/watch/cZ1eiBVNQRW

To understand issue, follow this steps.

1) Latest WordPress with classic editor
2) Go to edit page and add media
3) On media dialogue try to select multiple images with ctrl + enter - It works
4) Apply your patch - try to select multiple images with ctrl + enter - doesn't work.

Please try and let me know if needed more details.

[joedolson]

Thanks, @rcreators! So, the important piece of information is that it's a classic-editor specific issue. Knowing that, I was able to reproduce this.

It doesn't have any impact on the block editor, because the block editor doesn't have the ability to insert multiple images at once. I don't know how widely used this feature might be, but it's safe to say that anybody who has a need to insert multiple images that aren't in a gallery will still be using the classic editor to do that, and we probably need to continue to support it - otherwise it's a breaking change that could have a significant impact on some workflows.

In the block editor, it's fine. We could isolate this enhancement to only apply in the block editor - that way we don't introduce a conflict in the classic editor. I think it's OK if we aren't introducing enhancements into the classic editor; anybody who's using it is presumably not expecting changes.

@antpb - thoughts?

[rcreators]

Hello @joedolson, yes. This is classic editor issue. If you add some code to neglect this functionality for classic editor that works. But I recommend we find another key combination as it's good to have similar key combination for both editor. Mostly people who are using classic editor will use Gutenberg in future. Having using same key combination for classic and Gutenberg will help them to work smoothly in future.

[plaidharper]

Test Report

My understanding of this ticket is that ctrl/cmd + enter is used to insert already selected images into a post/page and not used to do the actual selecting. Below is my test.

Environment

Server: Apache (Linux)
WordPress: 6.7-alpha-58576-src
Browser: Chrome Version 127.0.6533.89 & Safari Version 17.6 (19618.3.11.11.5)
OS: 14.6
Theme: Twenty Twenty-Four
Plugins: None activated & Classic Editor activated

Steps to Reproduce

1) Add multiple images to the Media Library
2) Navigate to Pages > Add New
3) Add an image block, select Media Library, select an image, hit ctrl + enter, take note whether the key combination selects/deselects or inserts into the page
4) Add a gallery block, select Media Library, select multiple images, hit ctrl + enter, take note whether the key combination selects/deselects or inserts into the page
5) Add a cover block, select Media Library, select an image , hit ctrl + enter, take note whether the key combination selects/deselects or inserts into the page
6) Activate Classic Editor plugin
7) Navigate to Setting > Writing
8) Set Default editor for all users to Classic Editor
9) Navigate to Pages > Add New
10) Click Add Media Button, select an image, hit ctrl + enter,take note whether the key combination selects/deselects or inserts into the page
11) Repeat step 9 but select multiple images
12) Click Add Media Button, click Create gallery in the left hand menu, select multiple images, hit ctrl + enter, take note whether the key combination selects/deselects or inserts into the page
13) Click Add Media Button, click Feature image in the left hand menu, select an image, hit ctrl + enter, take note whether the key combination selects/deselects or inserts into the page
14) Apply https://core.trac.wordpress.org/attachment/ticket/60369/60369.3.patch
15) Run npm run build:dev
16) Navigate to Setting > Writing
17) Set Default editor for all users to Block Editor
18) Repeat steps 1 thru 13

Results

1) Before applying patch ctrl + enter does not insert selected images into the page
2) After applying patch, ctrl + enter does insert selected images into the page ✅

[antpb]

In 59035:

Media: Add Ctrl/Command + Enter shortcut to insert selected Media Library items.

Adds a Ctrl/Command + Enter keyboard shortcut to insert the currently selected single media or multiple media items when selecting in the Media Library modal.

Props poena, hirschferkel, antpb, joedolson, skobe, rcreators, plaidharper.
Fixes #60369.

[antpb]

In 59037:

Coding Standards: Avoid using confusing ! condition in Media Library selection check.

Checks that value is now equal or less than or equal to 0 which has the same result as the previous confusing ! usage.

Props kadamwhite, drjosh07.
See #60369.