From 0e9fefcd9ebcaf5ca1dd2b0216e1d3932a563242 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 16 Aug 2023 12:37:25 +0200 Subject: [PATCH 1/4] force min value for padding to be 2rem --- packages/block-library/src/navigation/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 180b40b43daca1..47ad407a625da1 100644 --- 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: max(var(--wp--style--root--padding-top), 2rem); + padding-right: max(var(--wp--style--root--padding-right), 2rem); + padding-bottom: max(var(--wp--style--root--padding-bottom), 2rem); + padding-left: max(var(--wp--style--root--padding-left), 2rem); // Allow modal to scroll. overflow: auto; From a7d0a77e3789b610c1d8430f47108f80554a2ff1 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 16 Aug 2023 16:47:47 +0200 Subject: [PATCH 2/4] fallback for when the css variables are not defined --- packages/block-library/src/navigation/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 47ad407a625da1..0e32ac6e20f9c4 100644 --- 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: max(var(--wp--style--root--padding-top), 2rem); - padding-right: max(var(--wp--style--root--padding-right), 2rem); - padding-bottom: max(var(--wp--style--root--padding-bottom), 2rem); - padding-left: max(var(--wp--style--root--padding-left), 2rem); + padding-top: max(var(--wp--style--root--padding-top, 2rem), 2rem); + padding-right: max(var(--wp--style--root--padding-right, 2rem), 2rem); + padding-bottom: max(var(--wp--style--root--padding-bottom, 2rem), 2rem); + padding-left: max(var(--wp--style--root--padding-left, 2rem), 2rem); // Allow modal to scroll. overflow: auto; From 6f92e28e3bf4b180e034f590c13735f6811a69ff Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 24 Aug 2023 14:36:26 +0100 Subject: [PATCH 3/4] Allow the padding to be smaller than 2rem --- packages/block-library/src/navigation/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 0e32ac6e20f9c4..eb8ef7683e1988 100644 --- 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: max(var(--wp--style--root--padding-top, 2rem), 2rem); - padding-right: max(var(--wp--style--root--padding-right, 2rem), 2rem); - padding-bottom: max(var(--wp--style--root--padding-bottom, 2rem), 2rem); - padding-left: max(var(--wp--style--root--padding-left, 2rem), 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; From 86ae336ac69d1db4be3cd06e24061c0f2e85ad36 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 26 Sep 2023 09:56:01 +0100 Subject: [PATCH 4/4] Add fix to avoid trigger hover state on links when overlay opens --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 1fd8bd39f520a0..42ecb29aa6650f 100644 --- 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' } );