Skip to content

Spacing Units: Tweak step values #37620

@stacimc

Description

@stacimc

Description

In #36186 it was noticed that some of the spacing units, in particular em and rem, are configured with a very small step value. This means that when you hold the 'up' or 'down' key to change spacing, em moves very slowly compared to px for example.

Here's a visual using the height of the Spacer block:

px-vs-em-step.mov

It's perhaps more noticeable on mobile, because the UnitControl has its own increment/decrement buttons:
Screen Shot 2021-12-23 at 10 38 31 AM

The step value comes from the configuration here and was introduced in #32692.

Step-by-step reproduction instructions

  1. In the block editor, insert a block that supports some spacing value. Cover is a good example, with its minHeight attribute.
  2. Adjust the value of the minHeight in the Inspector Controls, by clicking into the input and holding the up or down arrow key. On mobile use the up/down buttons.
  3. Try this with several different units, and notice that the em and rem increment is noticeably smaller/slower.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions