WordPress
Standardize form elements padding
Description
Splitting this out from https://github.com/WordPress/gutenberg/pull/57310
There's some pretty large inconsistency in the padding of the various input fields, select, etc. across the editor user interface. Specifically, the left and right padding seem largely inconsistent. Sometimes, the padding is different even for input fields that are adjacent in the same component, for example the 'Create pattern' modal dialog.
Ideally, also the height of the input fields should be the same everywhere but I do realize that in some cases there's the need to use smaller input fields, e.g. in the settings panel. However, it would be great to standardize the padding. I'd tend to think standardizing would help make the editor be perceived like a more polished and refined user interface.
Some examples in the screenshots below:
Step-by-step reproduction instructions
- Observe the inconsistent padding of the various input fields, select, etc. across hte UI.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
Note: for 'padding' I mean the actual visually perceived spacing. In some cases, this spacing is not determined by the actual CSS padding value, as for the 'Categories' input field in the 'Create pattern' modal dialog, which is the `components form token field' component.
One more place where padding inconsistency (and also sizes inconsistencies) is very evident is by comparing some block placeholders. For example:
- The RSS block placeholder uses an InputControl component.
- The other placeholders in the screenshot below (Embed and YouTube blocks) use a standard
<input />element, styled differently. - Also, the size of inputs and buttons are different.
It would be great to consider to prioritize this for WordPress 6.6 Cc @WordPress/gutenberg-design
One more place where padding inconsistency (and also sizes inconsistencies) is very evident is by comparing some block placeholders. For example:
This is tracked by #41961. I would like to progress the task so that we can ship to WP6.6.
