Navigation block: fix padding on mobile overlay when global padding i…

…s 0 (#53725) * force min value for padding to be 2rem * fallback for when the css variables are not defined * Allow the padding to be smaller than 2rem * Add fix to avoid trigger hover state on links when overlay opens --------- Co-authored-by: scruffian <[email protected]> Co-authored-by: Dave Smith <[email protected]>
WordPress · Sep 26, 2023 · 948d0fc · 948d0fc
1 parent 8602fc1
commit 948d0fc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -506,10 +506,10 @@ button.wp-block-navigation-item__content {
 		@include reduce-motion("animation");
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
-		padding-top: var(--wp--style--root--padding-top, 2rem);
-		padding-right: var(--wp--style--root--padding-right, 2rem);
-		padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
-		padding-left: var(--wp--style--root--padding-left, 2rem);
+		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), 20em);
 
 		// Allow modal to scroll.
 		overflow: auto;

diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -413,6 +413,10 @@ class ColorControl {
 			.getByRole( 'button', { name: 'Open menu' } )
 			.click();
 
+		// Move the mouse to avoid accidentally triggering hover
+		// state on the links once the overlay opens.
+		await this.page.mouse.move( 1000, 1000 );
+
 		const overlay = this.editor.canvas
 			.locator( '.wp-block-navigation__responsive-container' )
 			.filter( { hasText: 'Submenu Link' } );