Skip to content

UI: Inconsistent button sizing #701

@yogeshbhutkar

Description

@yogeshbhutkar

Description

At the moment, there are multiple instances where buttons of varying sizes are used across the UI. For example, in the screenshot below, the buttons appear with inconsistent heights: some render at 40px, while others render at 36px. There are also cases where buttons such as “Generate Meta Description” do not occupy the full available width, unlike other similar buttons.

Image

Proposal:

Button sizes have already been standardized upstream in the component implementation, with 40px intended as the default size and 32px reserved for smaller exceptions such as toolbar buttons. The 36px size has effectively been retired as part of this direction. (Ref: WordPress/gutenberg#46734)

This behavior is currently enabled through the __next40pxDefaultSize prop (Ref: WordPress/gutenberg#46741), which is expected to become the default in the future. While many areas of the codebase already opt into this prop, several usages are still missing it, resulting in minor but noticeable visual inconsistencies.

To better align existing usages with the upstream component standard and maintain UI consistency, this could be enforced through an ESLint rule (Ref). Ensuring that default button implementations consistently opt in to __next40pxDefaultSize would make button sizing more predictable and keep the UI visually consistent.

Step-by-step reproduction instructions

  1. Create a new post and open it in the editor.
  2. In the editor sidebar, compare the button sizes used in different sections.
  3. Verify that buttons such as “Generate meta description” and “Apply Editorial Updates” render with inconsistent heights.

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 the AI plugin.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    In progress

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions