Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Standardize form elements padding #57394

Open
afercia opened this issue Dec 27, 2023 · 3 comments
Open

Standardize form elements padding #57394

afercia opened this issue Dec 27, 2023 · 3 comments
Labels
Needs Design Needs design efforts. [Package] Components /packages/components [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement.

Comments

@afercia
Copy link
Contributor

afercia commented Dec 27, 2023

Description

Splitting this out from #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:

Screenshot 2023-12-27 at 10 09 29

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. labels Dec 27, 2023
@afercia
Copy link
Contributor Author

afercia commented Dec 27, 2023

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.

@afercia
Copy link
Contributor Author

afercia commented May 10, 2024

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

Screenshot 2024-05-10 at 15 06 20

@t-hamano
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Needs design efforts. [Package] Components /packages/components [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

2 participants