Unitless root padding causes Navigation Overlay default minimum padding to become "no padding"

[getdave]

Description

In #53725 Navigation Overlay has a padding set to utilise the global site root padding value, but with a default fallback value of 1em in cases where the root padding value has been set to 0:

gutenberg/packages/block-library/src/navigation/style.scss

Lines 509 to 513 in b66f9ff

	// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
	padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
	padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
	padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
	padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);

Unfortunately the way the clamp() function works means that you cannot have a unit-less value as the "preferred value" (i.e. the 2nd argument). If a unit-less value is provided then it will be utilised instead of the default value. Therefore if --wp--style--root--padding-top is set to 0 (as opposed to say 0px) then the resulting padding values will be set to 0px instead of the desired 1rem fallback.

This is a problem for sites that use the standard Editor tools to control the padding on the site and end up with a mobile overlay which looks broken.

Step-by-step reproduction instructions

1. Use TT5 Theme
2. Site Editor -> Global Styles -> Layout
3. Set Padding slide to 0. Note ensure you do not use a custom value as that will include the px value whereas the slider results in a unit-less 0.
4. Save.
5. Switch to front of the site.
6. Open dev tools.
7. Switch to "Mobile" device emulation to trigger the "mobile menu".
8. Open the Console drawer in dev tools
9. Type:

setTimeout(() => {debugger;}, 5000)

• Quickly toggle the Navigation menu to "open"
• Wait for the timeout to trigger the debugger;
• Use the Elements panel inspector to find the element with the following classes wp-block-navigation__responsive-container hidden-by-default has-modal-open is-menu-open.
• Check the padding values use the clamp function.
• Switch to Computer tab in the devtools console to see the resulting computed padding values.
• See that they are 0px and not 1rem.
• Repeat this but this time in Global Styles use custom to set the padding values to 0px. Note you will need to save a new value like 10px first and then reset to 0px else the editor will not interpret this as a dirty state.
• See that now on the front of the site the padding is now 1rem.

Screenshots, screen recording, code snippet

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

[getdave]

For anyone coming here the solution as I see it is to find a way to make the CSS custom property always have a unit as part of its value in the clamp(). This ensures that it doesn't invalidate the clamp (as per the description).