Make WordPress Core

Opened 7 years ago

Closed 3 years ago

#41611 closed enhancement (fixed)

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

Reported by: melchoyce's profile melchoyce Owned by:
Milestone: 5.8 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 7 years ago.

Download all attachments as: .zip

Change History (13)

#1 @westonruter
7 years 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
7 years 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
7 years ago

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

#4 @alexvorn2
7 years ago

maybe to change the color of the button to blue.

#5 @melchoyce
7 years 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
7 years 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
7 years 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
7 years 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
7 years 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
7 years ago

  • Milestone changed from Awaiting Review to Future Release

#11 @melchoyce
7 years ago

Created a PR to make the buttons bigger and bolder:

#12 @celloexpressions
3 years ago

  • Milestone changed from Future Release to 5.8
  • Resolution set to fixed
  • Status changed from new to closed

Widget areas in 5.8 are now block canvases with several different add-widget/block buttons available. While there is still potentially room for improvement, this now matches the post (block) editor and should be further refined with a unified approach for all block editors.

Closing as fixed by [50996].

Note: See TracTickets for help on using tickets.