Percentage option for various block settings are confusing to use

[annezazu]

Description

It seems like multiple settings don't work with the % option. This was found as part of the latest FSE Outreach Program's All Things Media:

Adjusting certain dimension with ‘%’ as the variable, nothing happens in the frontend. For example: ‘Minimum height of cover’, ‘Letter spacing’ for various blocks, ‘Border radius’ for image block

Step-by-step reproduction instructions

There are a few ways to replicate this:

Cover Block - Minimum Height

1. Add a cover block.
2. Under the Minimum height, change the option to percentage.
3. Try to change the percentage. Notice it adjust at first but then doesn't respond beyond.

Image Block - Border Radius

1. Add an image block.
2. Under the Border Radius, change the option to percentage.
3. Try to change the percentage.

Screenshots, screen recording, code snippet

percentage.mov

Environment info

• WordPress 5.9
• Gutenberg 12.6
• MacOS
• Chrome

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

[jasmussen]

The percentage option is very tricky because it only ever has an effect if the parent container has an explicitly defined height. Without it, it just won't do anything, and in that vein this is just the weirdness of CSS at play.

In that light, short of disabling the percentage option (perhaps by default, letting themes surface it), I don't know there's anything we can actually do here.

[annezazu]

Oh wow! I like that middle ground of disabling the option by default but letting themes allow it if they want. Otherwise, it seems pretty darn confusing to include as is.

[annezazu]

Updated the title to be a bit clearer.