Gutenberg: Consolidating Gradient Controls

[pablohoneyhoney]

As we evolve the sidebar to the new UI language, here a smaller step to consolidate some UI controls within gradient that seem a bit disconnected, unpolished, and congested.

Current

New

• Removing labels as the functions are in context of Color / Gradient.
• Gradient types becoming its own label and dropdown, to allow scalability to angular, diamond on top of linear and radial.
• Aligning styles.

Here some permutations

The one that seems working better and more balanced

[pablohoneyhoney]

Here another iteration in case we do need to keep labels.

[mapk]

Thanks for including a version with labels, @pablohoneyhoney.

1. The dropdown you've got is so much cleaner and communicates the gradient type just fine.
2. I really like the "Angle" label aligning to the edge of the angle degree input field. This adds the needed balance.
3. Of the 3 angle dial controls, I prefer the black dot. It ties in nicely with the other fields.
4. My only hesitation here is the capitalization of the labels. All caps can cause readability issues for some. Worth getting more feedback on that.

[ItsJonQ]

@pablohoneyhoney This is lovely! I started working on this 😊

First step is refactoring the AnglePickerControl a bit with the new styles. The JS works quite well, so I didn't need to do much there. I've also replaced the regular input with our new G2ified NumberControl, which supports features like drag-to-update and Shift key jumping.

I pushed things here for now:
https://github.com/WordPress/gutenberg/tree/update/gradient-controls

(Still WIP of course)

Next is to update the <SelectControl /> with G2 styles.

And lastly... putting it all together :D

[ItsJonQ]

Updates!

Working on a new <SelectControl />. Style wise, it looks exactly like our new InputControl, which has the new G2 styles ✨ . It also has the same props, like size="small", and other features (e.g. floating labels). Last detail... The down arrow is using the chevronDown from @wordpress/icons, rather than the default HTML arrow. This gives us more UI control to ensure consistency across platforms.

GIF Demo:

[jasmussen]

This is looking really fine. I'll try and work on some consistency with buttons in the sidebar today, which should help us get closer.

[jasmussen]

I was needing a gradient yesterday, and wanted one that was really sharp, as in not really a gradient at all, just two solid colors in a diagonal. But the draggable controls can't overlap:

Can we allow this? It seems like a fair use case. Or even if I wanted to flip the gradient entirely, move the orange color all the way to the right past the red color?

[pablohoneyhoney]

Looking good!

Worth looking at proportions (perhaps taller dragging area so it becomes hierarchically more prominent with a bigger area of interaction) and more distance between the slider and the controls below.