WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.51k stars 4.2k forks source link

UI Components, settle on 40px and 32px "small" sizes. #46734

Open jasmussen opened 1 year ago

jasmussen commented 1 year ago

UI components across the editor (input fields, buttons, etc.) are currently a range of sizes, between 32px, 36px, and 40px:

Screenshot 2022-12-22 at 11 21 06 Screenshot 2022-12-22 at 11 20 59
The inserter button is 32x32, the other buttons are 36x36 Buttons here are 36px, including the toggles
Screenshot 2022-12-22 at 11 24 03 Screenshot 2022-12-22 at 11 21 12
Toggle buttons in the block toolbar are 32x32 Inspector controls are standardizing on 40px

There's an opportunity here to standardize and make consistent the controls, so there's less guesswork as to which dimensions controls should have. We could do this:

Here's a grid of metrics to illustrate how this could work:

grid

Both 32 and 40px are base8 friendly, which would simplify the grid system. And with a single default (40px for controls, 32 for toggles inside), there would be no guesswork as to which size to use. The 32px button size would be the exception to use, as noted, in the top toolbar for buttons.

mirka commented 1 year ago

I'm very happy to see this! We'll start working out the technical logistics in #46741.