Description

By default, the RangeControl component shows:

• A range input on the left.
• A number input on the right.

Screenshot of a couple examples in the editor UI:

However, in many other cases the editor UI provides users with a design pattern that is 'reversed', as in: the input is on the left and the range control is on the right.

This is tipically done 'manually' in the editor by combining ab UnitControl + a RangeControl with withInputField={ false }. See for example the HeightControl.

A few example screenshots:

Regardless of whether these UIs are made of a default component from the components package or are local implementations in the editor, my point is about consistency and providing users with a cohesive experience across the editor.

What is the value from a design perspective of providing users with an UI that sometimes shows a range on the left plus an input on the right and sometimes ci ve-versa? Is this an intentional design choice?
How this inconsistency helps users in any way?

To me, the UI should be consistent and predictable. The order should be always the same and this range + input pattern should be always consistent across the editor.

Cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

• Add a Query Loop block.
• In the Inspector, observe the 'Posts per page' settings renders a range plus an input, in that order.
• Add a Group block
• In the Inspector > Styles tab, observe the 'Minimum height' setting renders an input plus a range, in that order.

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