Make WordPress Core

Opened 12 months ago

Last modified 10 months ago

#41611 new enhancement

Customizer: Make "Add a Widget" button easier to find

Reported by: melchoyce Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: ui Cc:


While testing out the image widget, I found that many of the folks I was testing with struggled to find the "Add a Widget" button.

We should consider different ways of making the "add a widget" button easier to find, including moving placement, changing to primary, or increasing size (this is my “gut” pick).

Attachments (1)

add-widget-button.png (88.9 KB) - added by melchoyce 11 months ago.

Download all attachments as: .zip

Change History (12)

#1 @westonruter
12 months ago

What about moving it to the top of the sidebar? Or also what about adding two of them, at the top and bottom, when scrollbars would cause the button to scroll out of view?

#2 @melchoyce
11 months ago

Yeah, moving to the top would help, but I'd worry that moving to the top would imply that the widgets are being added to the top of the list. Same with having two buttons, one at each side — that might further reinforce that the top button adds to the top of the list and the bottom button adds to the bottom of the list.

This is just conjecture though ¯\_(ツ)_/¯

#3 @westonruter
11 months ago

Drag & drop of available widgets could help with positioning too, somehow: #39910.

#4 @alexvorn2
11 months ago

maybe to change the color of the button to blue.

#5 @melchoyce
11 months ago

Let's test out two ideas:

  • Moving the button to top of the list.
  • Making the button a little bit larger.

Attaching quick mockups.

Button padding is 5px 10px 4px.

#6 @JoshuaWold
11 months ago

Short of changing the widget to a primary color (blue background, white text), nothing else is coming to mind to increase visibility right now. I like what you've done in the last attachment to increase the size a bit. Probably still liking the button below vs above.

#7 @melchoyce
11 months ago

I think I'd like to avoid having two primary buttons in such close proximity, so I'm leaning against turning the button blue.

#8 follow-up: @westonruter
11 months ago

@melchoyce what if the reorder and “Add a Widget” row were docked to the bottom of the scrollable panel so that it is always in view?

#9 in reply to: ↑ 8 @melchoyce
10 months ago

Replying to westonruter:

@melchoyce what if the reorder and “Add a Widget” row were docked to the bottom of the scrollable panel so that it is always in view?

This could work in cases where there are more widgets onscreen than the height of your browser, but I don't think it would work otherwise. I definitely want to try making the button bigger; maybe we could also try testing out a version where the button docks if you add more widgets than your viewport can display.

#10 @westonruter
10 months ago

  • Milestone changed from Awaiting Review to Future Release

#11 @melchoyce
10 months ago

Created a PR to make the buttons bigger and bolder: https://github.com/xwp/wordpress-develop/pull/275

Note: See TracTickets for help on using tickets.