Add ability to delete multiple menu items

[wphound]

When working with a menu in the Admin, if you need to delete a lot of entries it's really slow because you have to expand each entry, then click delete, then wait for the refresh to do it all over again. If we had an X next to the down arrow for each menu item, it would be much faster/easier to delete them.

Thanks!

[Kuzmanov]

It would be really great if we finally get something like that in the core. If you're having dozen of menus it's really annoying and time consuming to toggle and click remove on every single item.

Few weeks ago I've created a plugin for this purpose, you can take a look at ​https://wordpress.org/plugins/strasho/

[celloexpressions]

Menu Customizer (being proposed for core merge in 4.3) does this - the add-item panel also reveals a bulk-delete mode (see ​http://wordpress.org/plugins/menu-customizer).

[aeboi80]

Still not seeing any progression on this. Has any more thought been given to this in the past 20 months for core?

[welcher]

@aeboi80 a great place to start would be to create a patch to get things moving. Would you like to get the ball rolling by submitting one?

[welcher]

Initial Patch

[welcher]

As the customizer provides a solution for this already, I've created a patch that added a similar solution for the menus page. I'd love someone with more experience with core CSS to have a look to make sure I haven't missed anything - I believe there may be some no-js rules that might need to be applied. This may also benefit from some Qunit tests.

[welcher]

Screenshot of new button

[welcher]

Alternate approach using a checkbox and dedicated button

[welcher]

Alternate approach using a checkbox and dedicated button

[welcher]

Adding an alternate approach using checkboxes and a dedicated button. When clicked, the click events are fire on the inner remove buttons for the selected items.

I didn't add a confirmation dialogue as the user will has to click the Save Menu button to complete the edits.

[melchoyce]

⬆ Based on some ​Slack discussion, I've mocked up an idea that draws inspiration from the Customizer and would let you both reorder and delete menu items faster. (I've borrowed the label directly from the Customizer, but it might not be the best one to use.)

[welcher]

@melchoyce thanks for having a look at this, looks much nicer than what I had mocked up!

My only comment about removing the checkbox is that they were added to allow selection of multiple items for ( in this case ) deletion but there are other use-cases for having the ability to select one or more items. Another use-case would be #43383 where the user wants to insert a new item at a particular point in the menu.

All that being said, I'm not married to using a checkbox. It's the ability to select one or more item that is I like. We can work out a nicer looking implementation if this is the approach we end up with.

The only other comment I have is that in the new mock it looks like we've lost the arrow to expand the menu item options.

[melchoyce]

Replying to welcher:

My only comment about removing the checkbox is that they were added to allow selection of multiple items for ( in this case ) deletion but there are other use-cases for having the ability to select one or more items.

I considered doing a "bulk select" mode akin to media, but ended up liking the parity that introducing "reorder" brought between menus in the Customizer and wp-admin.

Another use-case would be #43383 where the user wants to insert a new item at a particular point in the menu.

All that being said, I'm not married to using a checkbox. It's the ability to select one or more item that is I like. We can work out a nicer looking implementation if this is the approach we end up with.

Can you walk me through how checkboxes would solve #43383?

The only other comment I have is that in the new mock it looks like we've lost the arrow to expand the menu item options.

Yup, like in the Customizer, the expanding arrows would disappear while you're in "reorder" mode. Attaching a gif to show how it currently works in the Customizer.

[welcher]

Another use-case would be #43383 where the user wants to insert a new item at a particular point in the menu.

All that being said, I'm not married to using a checkbox. It's the ability to select one or more item that is I like. We can work out a nicer looking implementation if this is the approach we end up with.

Can you walk me through how checkboxes would solve #43383?

A checkbox would allow the user to indicate which item the new one being added is inserted after. This could be done in other ways as well ( adding a selected class on-click for example ), as I said I'm not pushing for a checkbox specifically. Checkboxes just allow for easy single and multiple selections. In the case of #43383, only single is needed but this ticket and perhaps others could benefit from having multiple items selected for things like a bulk sort.

The only other comment I have is that in the new mock it looks like we've lost the arrow to expand the menu item options.

Yup, like in the Customizer, the expanding arrows would disappear while you're in "reorder" mode. Attaching a gif to show how it currently works in the Customizer.

My apologies, I missed the Reorder button in the first screenshot. I'm not sure I'm sold on the idea of now having to click a button to get into what is currently the default state for editing menus. I fully realize that this is how the customizer manages menus and getting those experiences in parity may be a good idea. I'm just not sure it makes sense for this experience.

[melchoyce]

A checkbox would allow the user to indicate which item the new one being added is inserted after. This could be done in other ways as well ( adding a selected class on-click for example ), as I said I'm not pushing for a checkbox specifically.

Have you seen this done well by other applications? I'm having trouble picturing the flow.

I'm not sure I'm sold on the idea of now having to click a button to get into what is currently the default state for editing menus.

It would be additive. Like the Customizer, you'd still be able to drag and drop to reorder, and expand a menu item to remove it from your menu.

[melchoyce]

#43794 was marked as a duplicate.

[mizejewski]

I like the red x on each item to allow quick deletion (even though you can't check several to do at once) as mocked up by @melchoyce. However, is that option hidden until the user clicks the Reorder button? I'm not sure I would think to do that if I wanted to delete things and not reorder.

[nic.bertino]

This ticket is tougher than it appears! Based on the rest of the mocks, the best I could come up with is a multi-select mode not relying on checkboxes but visual information and interaction patterns that should be fairly common.

I imagine being able to select multiple items by Ctrl/Cmd clicking, and selecting a range with a shift click. This would enter the items into multi-select mode, in which they can be moved en masse or deleted:

[Link to Mockup while I sort out TRAC]​https://nicbertino.com/wp-content/uploads/2018/04/Multi-select-Concept.png

There would most likely need to be a way to manually enter this mode, which could be done with a link that's close to the UI items. This way, mobile users aren't left behind. Not sure the feasibility technically on this, but it was the best I could dream up.

[melchoyce]

FWIW, Delete 2.png was one of my previous ideas, using the Bulk Select pattern from Media.

[acirujano]

Hi from the Contributor Day in WordCamp Madrid! I think this last solution is the best because it is very intuitive and follows WordPress multiselect patterns and users are very used to it.
Thanks to Sonja!

[swissspidy]

#45775 was marked as a duplicate.

[JoshuaWold]

#43669 was marked as a duplicate.

[swissspidy]

#31906 was marked as a duplicate.

[swissspidy]

#47764 was marked as a duplicate.

[welcher]

#48359 was marked as a duplicate.

[fahimmurshed]

According to this #47764 tickets, there are any updates?

I request you to please take care of this feature.

[garrett-eclipse]

Replying to melchoyce:

FWIW, Delete 2.png was one of my previous ideas, using the Bulk Select pattern from Media.

I love it @melchoyce, we (@paaljoachim and I) discussed during a scrub and feel this is a good direction so moving for dev request.

One thing we would change though is instead of blue/primary button have the remove be a red/destructive one as this will remove menu items without an easy undo and if you have alot of them that's not much fun.

[maxpertici]

Hello,

I am proposing a new patch (21603.3.diff) for this ticket.
I took the patch 21603.2.diff approach and made new changes to support the various buttons to enable/disable selection and deletion of selected items.

I used input type="button" for accessibility reasons and the delete button is similar to the appearance of the delete menu button. I hope it's ok.

I post a gif of the behavior.

[maxpertici]

Behaviour 21603.3.diff

[audrasjb]

Very interesting @maxpertici, thank you!

Moving for 5.8 consideration. This would be a very nice enhancement for the next major.

Adding accessibility focus, as I thing we'll need to add a few wpa11y.speak notices.
Also adding needs-testing workflow keyword.

[joedolson]

Some accessibility issues:

• For keyboard navigation flow, it would make more sense if the bulk select appeared before the menu, and navigation moved forward to select items.
• There's a loss of focus when bulk select is enabled, because the button is removed on selection. Can this use a checkbox instead, so that there's no focus loss, but the control has state?
• The bulk select checkboxes are unlabeled. Change the span wrapping the menu item title to a <label> and add appropriate for/id atributes
• Add a wp.a11y.speak message to confirm information about the items deleted.

I'm thinking about better error-prevention, too. Since making this reversible is probably a lot to tackle, it might be good to add a visible list of items to be deleted under the 'Remove selected items' link that's associated via aria-describedby. I don't think it needs to be detailed; just a comma separated list of item titles, perhaps, but it could give an easier way to scan and verify that you haven't accidentally selected something you didn't really want to remove.

I'd definitely like to see this happen.

[maxpertici]

Behaviour 21603.4.diff

[maxpertici]

Hi @joedolson, Thanks for the review.
I tried to follow your recommendations (21603.4.diff). I changed the button to checkbox and prepare two states with a label update.
I have worked on the list of items awaiting deletion but I have not yet done the wp.a11y.speak part. I need to get your feedback first to see if I'm on the right track. Thanks again.

[maxpertici]

Hi,
So, I made a new patch (21603.5.diff) : I added wp.speack. But I'm not really sure about my method or the words used. (Tested with Voice Over). Thanks.

[joedolson]

This works pretty well! A few more comments:

1) Using a checkbox that is masked to look like a button can be confusing. For most users, it'll be fine, but if you're sighted & using a keyboard, it looks like a toggle button - but when you hit 'Enter' to toggle the button, it'll submit the form. I think you should leave the checkbox visible, so the usage is clear. This would also be more similar to the interfaced for bulk select used in post tables.

2) The list of selected items works, and reads out. I think, to eliminate ambiguity, it might be good if it also include the menu type. E.g. 'Test 3, Page. Test 4, Custom Link'. For complex menus, this might be helpful. But it's not absolutely critical - definitely open to other opinions.

3) After deleting items, the announcement of items deleted is read, so that's great. But the the 'List of items to be deleted' is read again, which is confusing.

4) For internationalization, arrange the test sent to wp.a11y.speak as Deleted: "item 1", "item2". This helps make the strings not dependent on tenses and cases of the items deleted. E.g. 'Hello World! have been deleted' doesn't make a lot of sense.

5) Suggest also using 'Deleted menu item' instead of 'Deleted', just to give an extra confirmation that the item itself wasn't deleted.

6) There are some stray spaces in the strings. E.g., 'List of menu items selected for deletion :' (extra space before colon)

That's a lot of feedback, I know, but this is looking pretty good, functionality-wise. I'm adding 'needs-design-feedback' to get some design feedback on the list of menu items selected for deletion. I'm confident that can get some styling to make it work better, but not from me. :)

Tested with NVDA/Chrome.

[joedolson]

List of items for deletion in 21603.5.diff

[maxpertici]

Hi,
I made some modifications, they are available in patch 21603.6.diff.
1: The checkboxes are now visible, so I also removed the label change.
2: I added the types of items on the list but I am not sure that this corresponds to the request.
3: fixed (I think )
4: to check also
5: if I understood correctly that referred to 4, at least that's what I did.
6: fixed

I also very much hope to see this ticket succeed :)
Thank you for you precious help

[audrasjb]

Hello there,

I agree with @joedolson that this is a nice enhancement, the feature looks great now, I really want this to ship in 5.8 too :)

I think the last patch is good to go, and this can be committed now (today is the last call for 5.8 features). What do you say @joedolson?

[joedolson]

Yes, I think this is looking good. We've still got time for polishing, so I'll get the code reviewed & make a couple minor adjustments, then commit. Getting this committed should help surface anything unexpected and broaden testing.

I'm going to switch it so that the indication of the menu item type doesn't use the same punctuation as the menu item name; right now, they're equal. Instead of:

Home, Custom Link, Sample Page, Page, Test Post, Post

It'll be

Home (Custom Link), Sample Page (Page), Test Post (Post)

I think that will distinguish the differences better.

[chaion07]

Thank you @wphound for reporting the issue. We reviewed this ticket during a [recent design triage]​https://wordpress.slack.com/archives/C02S78ZAL/p1621958688146000 and based on the feedback we are removing the label as we think this one is good to go. The enhancement by @joedolson also looks good as the team considers that the proposed solution should work well. Thank you!

[joedolson]

In 51006:

Menus: Add bulk delete for menu items.

Adds an option to bulk delete menu items from the core Navigation Menus screen, offering a considerable usability benefit when making significant changes to navigation menus.

Uses the bulk select pattern found in post and media lists for consistency with other core management screens, rather than the rapid delete pattern found in menus in the customizer.

Props wphound, welcher, melchoyce, maxpertici, audrasjb
Fixes #21603.

[joedolson]

In 51009:

Coding Standards: Apply some minor coding standards fixes.

Follow up to [51006].

See #21603.

[SergeyBiryukov]

In 51010:

Coding Standards: Further update the code for bulk menu items deletion to better follow WordPress coding standards.

Follow-up to [51006], [51009].

See #21603.

[paaljoachim]

Bulk select -> Remove.

[paaljoachim]

Bulk select -> Remove Selected Items

[paaljoachim]

Testing using vagrant.

​http://trunk.wordpress.test/
5.8-alpha

It is working nicely.

Down the line Bulk select might also be extended. Then again down the line we also have the New Navigation Editor that will show up.

[SergeyBiryukov]

#53350 was marked as a duplicate.

[Boniu91]

Hey @audrasjb, would you mind sharing:

1. The steps to test
2. Are there any testing dependencies, such as a plugin or script?

It would be great to have them here, so we can go over the feature on test scrubs. Thank you!

[audrasjb]

In 54316:

Menus: Remove bulk action checkboxes when menu is empty.

This changeset removes the bulk action checkboxes when there is no menu item to select.

Follow-up to [51006], [51539].

Props oglekler, krishaweb, costdev, Boniu91, hugodevos, audrasjb.
Fixes #54799.
See #21603, #53654.