WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 7 months ago

Last modified 6 months ago

#21603 closed enhancement (fixed)

Add ability to delete multiple menu items

Reported by: wphound Owned by: audrasjb
Milestone: 5.8 Priority: normal
Severity: normal Version: 3.4.1
Component: Menus Keywords: has-screenshots has-patch needs-testing commit needs-codex
Focuses: ui, accessibility, javascript, administration Cc:

Description

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!

Attachments (16)

21603.diff (3.4 KB) - added by welcher 4 years ago.
Initial Patch
remove menu item button.png (24.4 KB) - added by welcher 4 years ago.
Screenshot of new button
21603.2.diff (4.0 KB) - added by welcher 4 years ago.
Alternate approach using a checkbox and dedicated button
alternate approach 21603.png (158.2 KB) - added by welcher 4 years ago.
Alternate approach using a checkbox and dedicated button
Bulk Delete.png (264.0 KB) - added by melchoyce 4 years ago.
menu-reorder.gif (107.7 KB) - added by melchoyce 4 years ago.
Bulk Delete 2.png (270.2 KB) - added by melchoyce 4 years ago.
21603.3.diff (7.6 KB) - added by maxpertici 8 months ago.
2021-03-30 21.55.41.gif (2.8 MB) - added by maxpertici 8 months ago.
Behaviour 21603.3.diff
21603.4.diff (13.7 KB) - added by maxpertici 7 months ago.
21603.4-behavior.gif (5.6 MB) - added by maxpertici 7 months ago.
Behaviour 21603.4.diff
21603.5.diff (11.5 KB) - added by maxpertici 7 months ago.
21603-list-of-items-for-deletion.png (7.9 KB) - added by joedolson 7 months ago.
List of items for deletion in 21603.5.diff
21603.6.diff (12.4 KB) - added by maxpertici 7 months ago.
Bulk-select-Remove-menu-items.mp4 (236.6 KB) - added by paaljoachim 7 months ago.
Bulk select -> Remove.
Bulk-select-Remove-menu-items.gif (225.3 KB) - added by paaljoachim 7 months ago.
Bulk select -> Remove Selected Items

Change History (74)

#1 @DrewAPicture
8 years ago

  • Cc xoodrew@… added
  • Summary changed from Add a delete button to individual menu items to Add ability to delete multiple menu items

#2 @Kuzmanov
7 years ago

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/

This ticket was mentioned in Slack in #core by kuzman0v. View the logs.


7 years ago

#4 @celloexpressions
7 years ago

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).

#5 @aeboi80
5 years ago

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

#6 @welcher
5 years ago

  • Focuses administration added
  • Keywords needs-patch added

@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
4 years ago

Initial Patch

#7 @welcher
4 years ago

  • Keywords has-patch ui-feedback needs-unit-tests added; needs-patch removed

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
4 years ago

Screenshot of new button

#8 @welcher
4 years ago

  • Keywords has-screenshots added

@welcher
4 years ago

Alternate approach using a checkbox and dedicated button

@welcher
4 years ago

Alternate approach using a checkbox and dedicated button

#9 @welcher
4 years ago

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.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

@melchoyce
4 years ago

#11 @melchoyce
4 years ago

⬆ 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.)

Last edited 4 years ago by melchoyce (previous) (diff)

#12 follow-up: @welcher
4 years ago

  • Keywords has-patch needs-unit-tests removed

@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.

#13 in reply to: ↑ 12 ; follow-up: @melchoyce
4 years ago

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.

#14 in reply to: ↑ 13 @welcher
4 years ago

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.

#15 @melchoyce
4 years ago

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.

#16 @melchoyce
4 years ago

#43794 was marked as a duplicate.

This ticket was mentioned in Slack in #design by michelemiz. View the logs.


4 years ago

#18 @mizejewski
4 years ago

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.

#19 @nic.bertino
4 years ago

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:

https://nicbertino.com/wp-content/uploads/2018/04/Multi-select-Concept.png

[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.

Version 1, edited 4 years ago by nic.bertino (previous) (next) (diff)

#20 follow-up: @melchoyce
4 years ago

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

#21 @acirujano
4 years ago

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!

#22 @swissspidy
3 years ago

#45775 was marked as a duplicate.

#23 @JoshuaWold
3 years ago

#43669 was marked as a duplicate.

#24 @swissspidy
2 years ago

#31906 was marked as a duplicate.

#25 @swissspidy
2 years ago

#47764 was marked as a duplicate.

#26 @welcher
2 years ago

#48359 was marked as a duplicate.

#27 @fahimmurshed
22 months ago

  • Keywords needs-design-feedback added

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

I request you to please take care of this feature.

This ticket was mentioned in Slack in #design by paaljoachim. View the logs.


14 months ago

#29 in reply to: ↑ 20 @garrett-eclipse
14 months ago

  • Focuses ui javascript added
  • Keywords needs-patch added; ui-feedback needs-design-feedback removed
  • Milestone changed from Awaiting Review to Future Release

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.

#30 @maxpertici
8 months ago

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
8 months ago

@maxpertici
8 months ago

Behaviour 21603.3.diff

#31 @maxpertici
8 months ago

  • Keywords has-patch added; needs-patch removed

#32 @audrasjb
8 months ago

  • Focuses accessibility added
  • Keywords needs-testing added
  • Milestone changed from Future Release to 5.8

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.

#33 @audrasjb
8 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


7 months ago

#35 @joedolson
7 months ago

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
7 months ago

@maxpertici
7 months ago

Behaviour 21603.4.diff

#36 @maxpertici
7 months ago

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


7 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


7 months ago

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


7 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


7 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


7 months ago

@maxpertici
7 months ago

#42 @maxpertici
7 months ago

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.

#43 @joedolson
7 months ago

  • Keywords needs-design-feedback added

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
7 months ago

List of items for deletion in 21603.5.diff

This ticket was mentioned in Slack in #accessibility by chaion07. View the logs.


7 months ago

This ticket was mentioned in Slack in #design by chaion07. View the logs.


7 months ago

#46 @maxpertici
7 months ago

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

@maxpertici
7 months ago

#47 @audrasjb
7 months ago

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?

#48 @joedolson
7 months ago

  • Keywords commit added

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.

This ticket was mentioned in Slack in #design by chaion07. View the logs.


7 months ago

#50 @chaion07
7 months ago

  • Keywords needs-design-feedback removed

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!

#51 @joedolson
7 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#52 @joedolson
7 months ago

In 51009:

Coding Standards: Apply some minor coding standards fixes.

Follow up to [51006].

See #21603.

#53 @SergeyBiryukov
7 months ago

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
7 months ago

Bulk select -> Remove.

@paaljoachim
7 months ago

Bulk select -> Remove Selected Items

#54 @paaljoachim
7 months ago

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.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


7 months ago

#56 @milana_cap
6 months ago

  • Keywords needs-codex added

#57 @SergeyBiryukov
6 months ago

#53350 was marked as a duplicate.

#58 @Boniu91
6 months ago

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!

Note: See TracTickets for help on using tickets.