From f7cf817d4cbf396dfe1a4dd8172c157202042237 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 26 Apr 2021 15:40:04 +0200 Subject: [PATCH 1/4] Fix submenu hover issue. --- .../src/navigation-link/style.scss | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 8f3d597301f830..18b726eaab8e60 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -220,43 +220,39 @@ } } - // Margins in submenus. + // Margins in all submenus. .has-child .submenu-container, .has-child .wp-block-navigation-link__container { .wp-block-pages-list__item, .wp-block-navigation-link { - margin: 0 0 1em 0; + margin: 0; + padding: 0.5em 1em; } - // Submenu indentation. + // Submenu indentation when there's no background. left: -1em; - top: calc(100% + 1em); + top: 100%; + // Indentation for all submenus. @include break-medium { .submenu-container, .wp-block-navigation-link__container { - left: calc(100% + 1em); - top: calc(-1px - 1em); + left: 100%; + top: -1px; // Border width. } } } + // Submenu indentation when there's a background. &.has-background .has-child .submenu-container, &.has-background .has-child .wp-block-navigation-link__container { - .wp-block-pages-list__item, - .wp-block-navigation-link { - margin: 0; - padding: 0.5em 1em; - } - - // Submenu indentation. left: 0; top: 100%; + // There's no border on submenus when there are backgrounds. @include break-medium { .submenu-container, .wp-block-navigation-link__container { - left: 100%; top: 0; } } @@ -274,8 +270,5 @@ background-color: #fff; color: #000; border: 1px solid rgba(0, 0, 0, 0.15); - - // Add some padding to menus even if the parent menu item doesn't have. - padding: 1em; } } From 6bafbb84c081f9c09ccdf51c949026540ba5aa5e Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 27 Apr 2021 13:38:20 +0200 Subject: [PATCH 2/4] Fix issues --- packages/block-library/src/navigation-link/style.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 18b726eaab8e60..49e4b0c0636ab0 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -214,17 +214,17 @@ margin: 0 0.5em 0 0; } - .wp-block-page-list > .wp-block-pages-list__item, - .wp-block-navigation__container > .wp-block-navigation-link { + .wp-block-page-list .wp-block-pages-list__item__link, + .wp-block-navigation__container .wp-block-navigation-link__content { padding: 0.5em 1em; } } - // Margins in all submenus. + // Spacing in all submenus. .has-child .submenu-container, .has-child .wp-block-navigation-link__container { - .wp-block-pages-list__item, - .wp-block-navigation-link { + .wp-block-pages-list__item__link, + .wp-block-navigation-link__content { margin: 0; padding: 0.5em 1em; } @@ -253,6 +253,7 @@ @include break-medium { .submenu-container, .wp-block-navigation-link__container { + left: 100%; top: 0; } } From 78789019979abeadddebfb26a54c6ac3786d415d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 28 Apr 2021 10:52:18 +0200 Subject: [PATCH 3/4] Fix frontend issue. --- packages/block-library/src/navigation-link/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 49e4b0c0636ab0..aa3c876e9d0706 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -191,7 +191,7 @@ // Margins, paddings, and submenu positions. // These need extra specificity to override potentially inherited properties. -.wp-block.wp-block-navigation { +.wp-block-navigation.wp-block-navigation { // Menu items with no background. .wp-block-page-list, From 5a5bcbbb2913b32cf24ed3137b3d861b0476c5ab Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 28 Apr 2021 10:59:52 +0200 Subject: [PATCH 4/4] TT1 fix. --- .../block-library/src/navigation-link/style.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index aa3c876e9d0706..7a1e099b1ec736 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -70,11 +70,19 @@ } } + // Some themes have added custom padding to the link, which does not consider the Page List block. + // Unfortunately we now need to add extra specificity and undo that, so that the block still works. + .wp-block-pages-list__item .wp-block-pages-list__item__link, + .wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content { + padding: 0; + } + // Styles for submenu flyout. .has-child { + // This adds a little space between the link and the dropdown icon. > .wp-block-pages-list__item__link, > .wp-block-navigation-link__content { - padding-right: 0.5em; + margin-right: 0.5em; } .submenu-container, @@ -223,9 +231,13 @@ // Spacing in all submenus. .has-child .submenu-container, .has-child .wp-block-navigation-link__container { + .wp-block-pages-list__item, + .wp-block-navigation-link { + margin: 0; + } + .wp-block-pages-list__item__link, .wp-block-navigation-link__content { - margin: 0; padding: 0.5em 1em; }