Font size picker: custom font size step value for em and rem units is only 0.01

[afercia]

Description

The font size picker has some simple logic in place that is used to determine when a custom font size unit is 'relative' as in: 'em', 'rem', 'vw', or 'vh'.

When it's a relative unit, the value of the step prop changes but only for the slider. It doesn't for the input. As such, when changing units to em or rem, the steps of the input and of the range slider aren't aligned.

When using a the up and down arrow keys to change the em or rem values of a custom font size, the value chantes by only 0.01 at each key press. Which makes this control redious to use as it requires dozens of key presses or holding the key for a long time to eb able to amke a substantial change for the value.

Animat4ed GIF to illustrate:

Turns out, the font size picker RangeControl does pass an explicit step prop.

The UnitConrol doesn't.

When the unit is em or rem, the input field step value is 0.01. Instead, the range one is 0.1.

This could be quickly fixed by simply passing an explicit step prop to the UnitControl similarly to the RangeControl.

However, I wonder why in the UnitControl logic that tries to determine the fallback step values from the selected units, the em and rem default step value is 0.01 which seems to me too low in the first place.

Step-by-step reproduction instructions

• Edit a post and select a Paragraph.
• Observe the font size picker in the inspector.
• Switch the font size picker to set a custom size.
• Select px.
• Inspect the source and observe the step attribute for both the input field and the ragne input is 1.
• Select the vw or vh units.
• Inspect the source and observe the step attribute for both the input field and the ragne input is 0.1.
• Select the em or rem units.
• Inspect the source and observe the step attribute is 0.01 for the input and 0.1 for the range slider.
• Expected: to be 0.1 for both.

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

Please confirm which theme type you used for testing.

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

[afercia]

While I understand this was made to allow em and rem values with two decimales e.g. 1.25, it does impag keyboard usrs making this control very tedious to use.

[Mamaduka]

Related #68599, which requests using an even lower step value.