WordPress.org

Make WordPress Core

Opened 6 years ago

Last modified 5 weeks ago

#21603 new enhancement

Add ability to delete multiple menu items

Reported by: wphound Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.4.1
Component: Menus Keywords: ui-feedback has-screenshots
Focuses: 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 (7)

21603.diff (3.4 KB) - added by welcher 11 months ago.
Initial Patch
remove menu item button.png (24.4 KB) - added by welcher 11 months ago.
Screenshot of new button
21603.2.diff (4.0 KB) - added by welcher 11 months ago.
Alternate approach using a checkbox and dedicated button
alternate approach 21603.png (158.2 KB) - added by welcher 11 months ago.
Alternate approach using a checkbox and dedicated button
Bulk Delete.png (264.0 KB) - added by melchoyce 5 weeks ago.
menu-reorder.gif (107.7 KB) - added by melchoyce 5 weeks ago.
Bulk Delete 2.png (270.2 KB) - added by melchoyce 5 weeks ago.

Download all attachments as: .zip

Change History (28)

#1 @DrewAPicture
5 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
3 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.


3 years ago

#4 @celloexpressions
3 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
17 months 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
17 months 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
11 months ago

Initial Patch

#7 @welcher
11 months 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
11 months ago

Screenshot of new button

#8 @welcher
11 months ago

  • Keywords has-screenshots added

@welcher
11 months ago

Alternate approach using a checkbox and dedicated button

@welcher
11 months ago

Alternate approach using a checkbox and dedicated button

#9 @welcher
11 months 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.


5 weeks ago

@melchoyce
5 weeks ago

#11 @melchoyce
5 weeks 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 5 weeks ago by melchoyce (previous) (diff)

#12 follow-up: @welcher
5 weeks 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
5 weeks 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
5 weeks 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
5 weeks 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
5 weeks ago

#43794 was marked as a duplicate.

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


5 weeks ago

#18 @mizejewski
5 weeks 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
5 weeks 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:

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

Last edited 5 weeks ago by nic.bertino (previous) (diff)

#20 @melchoyce
5 weeks ago

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

#21 @acirujano
5 weeks 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!

Note: See TracTickets for help on using tickets.