Navigation block overlay padding zero clamp calculation fails for zero values

[djcowan]

Description

The padding on the navigation responsive container is calculated using a clamp function.
The clamp calculation uses the --wp--style--root--padding-xyz - which fails when any of the units are set to zero (0)
Our site don't require a value for top or bottom.

padding: 
clamp(1rem, var(--wp--style--root--padding-top), 20rem) //<-- is zero
clamp(1rem, var(--wp--style--root--padding-right), 20rem) 
clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) // <-- is zero
clamp(1rem, var(--wp--style--root--padding-left), 20em);

Step-by-step reproduction instructions

1. Go the the Style editor > Layout
2. Set top and bottom to zero
3. open the responsive menu container on mobile
4. calc function fails - no padding applied
   

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.5.2 running our Custom block theme
Gutenberg - Version 18.2.0
Mac/Windows, iOS

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

[hanneslsm]

I can confirm this issue. I have also noticed it with a new custom theme but haven't had time to investigate it yet. Clamp calculation as the cause makes sense - my theme also doesn't have a top padding.

[djcowan]

We sidestep by setting 0.01em and fix it when it breaks.

[amitraj2203]

Hi @djcowan and @jordesign, I have raised a PR for this issue. Please have a look at it and let me know if it needs improvement.

Thank You!

[hanneslsm]

It looks like the issue is also solved when using 0px instead of 0

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[Successfulsebunya]

Reproduction Report

Description

❌ This report validates the issue can not be reproduced.

Environment

• WordPress: 6.8.2
• PHP: 8.3.0-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.2.0
  • Test Reports 1.2.0

Actual Results

1. ❌ Error condition doesn’t re-occur (not reproduced).

Additional Notes

• Padding once set to 0 remains zero. Must have been fixed.

1. Step-by-step reproduction instructions
2. Go the the Style editor > Layout
3. Set top and bottom to zero
4. open the responsive menu container on mobile
5. Padding is set to 0

Supplemental Artifacts