diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 09fc6ae3726738..b20ca1e528eef6 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -228,11 +228,6 @@ function NavigationLinkEdit( {
'core/strikethrough',
] }
/>
- { showSubmenuIcon && (
-
-
-
- ) }
{ isLinkOpen && (
) }
+ { showSubmenuIcon && (
+
+
+
+ ) }
';
}
- $html .= '';
- // End anchor tag content.
-
if ( $has_submenu ) {
$html .= block_core_navigation_build_html( $attributes, $block, $colors, $font_sizes );
}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 66d6bc2cfa0bb8..0f824d083670a6 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -1,276 +1,132 @@
-$navigation-menu-height: $grid-unit-10 * 7;
-$navigation-sub-menu-height: $grid-unit-10 * 5;
-$navigation-sub-menu-width: $grid-unit-10 * 25;
-
-/*
-* Reset the default list styles
-*/
-
-.wp-block-navigation > ul {
- display: block;
+.wp-block-navigation__container {
+ // Reset the default list styles
list-style: none;
margin: 0;
padding-left: 0;
- @include break-small {
- display: flex;
- flex-wrap: wrap;
- }
+ // Horizontal layout
+ display: flex;
+ flex-wrap: wrap;
- // Submenu
- ul {
- list-style: none;
- padding-left: 0;
- margin-top: 0;
- margin-left: 0;
+ // Vertical layout
- li {
- margin: 0;
- }
+ .is-vertical & {
+ display: block;
}
}
-/*
-* Styles for submenu flyout
-*/
-
-.wp-block-navigation > ul {
- li {
- &:hover,
- &:focus-within {
- cursor: pointer;
- }
-
- // Submenu Display
- &:hover > ul,
- &:focus-within > ul,
- & ul:hover,
- & ul:focus {
- visibility: visible;
- opacity: 1;
- display: flex;
- flex-direction: column;
- }
- }
+.wp-block-navigation-link {
+ display: flex;
+ align-items: center;
+ position: relative;
+ margin: 0;
+ padding: $grid-unit-10;
+}
- & > li ul {
+// Styles for submenu flyout
+.has-child {
+ .wp-block-navigation__container {
+ border: $border-width solid rgba(0, 0, 0, 0.15);
+ padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+ background-color: inherit;
+ color: inherit;
position: absolute;
left: 0;
top: 100%;
- min-width: $navigation-sub-menu-width;
- max-width: $navigation-sub-menu-width;
+ z-index: 1;
opacity: 0;
transition: opacity 0.1s linear;
visibility: hidden;
- }
-}
-
-/*
-* Styles shared between editor and frontend
-*/
-.wp-block-navigation,
-.wp-block-navigation .block-editor-block-list__layout {
- display: flex;
- flex-wrap: wrap;
-}
-.wp-block-navigation {
-
- // set a width on the editor submenus
- .block-editor-block-list__layout .block-editor-block-list__layout {
- width: $navigation-sub-menu-width;
- }
-
- &,
- > .wp-block-navigation__container {
- align-items: center;
- width: 100%;
-
- > .wp-block-navigation-link {
- display: flex;
- margin-top: 0;
- margin-bottom: 0;
- }
- }
-
- &.is-vertical ul {
- display: flex;
- flex-direction: column;
- li {
- text-align: left;
- }
- }
-
- &.is-vertical > .wp-block-navigation__container {
- align-items: flex-start;
- }
-
- // Main menu
- .wp-block-navigation-link {
- position: relative;
- margin: 0;
- min-height: $navigation-menu-height;
- display: flex;
- line-height: 1.4;
-
- // Sub menus
- .wp-block,
- .wp-block-navigation-link {
- min-height: auto; // reset the min-height and rely on padding
- padding: 0;
- }
-
- // Sub menus (editor canvas)
- .wp-block .wp-block-navigation-link {
- margin: 0;
- }
-
- &.has-child > .wp-block-navigation__container {
- // Box model
- display: flex;
- border: $border-width solid rgba(0, 0, 0, 0.15);
-
- // Position (first level)
- position: absolute;
- z-index: 1;
- top: 100%;
- left: 0; // just under the main menu item.
-
- // Position (nested levels)
- .block-editor-inner-blocks,
+ // Nested submenus sit to the left on large breakpoints
+ @include break-medium {
.wp-block-navigation__container {
left: 100%;
- top: - $border-width;
+ top: -$border-width;
}
}
+ }
+ // Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
+ // We will need to replace focus-within with a JS solution for IE keyboard support.
+ &:hover {
+ cursor: pointer;
- // Inherit colors from menu
- .wp-block-navigation__container {
- background-color: inherit;
- color: inherit;
- }
-
- // All links
- .wp-block-navigation-link__content {
+ > .wp-block-navigation__container {
+ visibility: visible;
+ opacity: 1;
display: flex;
- align-items: center;
- width: max-content;
- padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
- }
-
- // Submenu links only
- .wp-block-navigation-link {
-
- &:first-child:not(:only-child) .wp-block-navigation-link__content {
- padding-top: $grid-unit-10;
- }
-
- &:last-child .wp-block-navigation-link__content {
- padding-bottom: $grid-unit-10;
- }
- }
-
- &.has-child .wp-block-navigation-link__content {
- padding-right: $grid-unit-10 * 4;
- position: relative;
- }
-
- .wp-block-navigation-link__submenu-icon {
- position: absolute;
- right: $grid-unit-10 * 2;
-
- svg {
- fill: currentColor;
- }
+ flex-direction: column;
}
+ }
- // reset rotation of submenu indicator icons on nested levels
- .wp-block-navigation-link svg {
- transform: rotate(0);
- }
+ &:focus-within {
+ cursor: pointer;
- &.has-text-color .wp-block-navigation-link__content {
- color: inherit;
+ > .wp-block-navigation__container {
+ visibility: visible;
+ opacity: 1;
+ display: flex;
+ flex-direction: column;
}
}
}
-// Styles
-.wp-block-navigation {
-
- // Default / Light styles
- .wp-block-navigation-link,
- &.is-style-light .wp-block-navigation-link {
- // No text color
- &:not(.has-text-color) > .wp-block-navigation__container {
- color: $light-style-sub-menu-text-color;
- }
+// All links
+.wp-block-navigation-link__content {
+ padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
- // No background color
- &:not(.has-background) > .wp-block-navigation__container {
- background-color: $light-style-sub-menu-background-color;
- }
+ @include break-small {
+ width: max-content;
}
- // Dark styles.
- &.is-style-dark .wp-block-navigation-link {
- // No text color
- &:not(.has-text-color) > .wp-block-navigation__container {
- color: $dark-style-sub-menu-text-color;
- }
-
- // No background color
- &:not(.has-background) > .wp-block-navigation__container {
- background-color: $dark-style-sub-menu-background-color;
- }
+ .has-text-color & {
+ color: inherit;
}
}
-/*
-* Non-shared styles & overrides
-*/
+.wp-block-navigation-link__submenu-icon {
+ padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
-.wp-block-navigation {
+ svg {
+ fill: currentColor;
- .wp-block-navigation-link.has-child > .wp-block-navigation__container {
- display: flex;
- flex-direction: column;
- padding: 0;
+ @include break-medium {
+ // reset rotation of submenu indicator icons on nested levels
+ transform: rotate(0);
+ }
}
}
-/*
-* TODO: organize/untangle styles below this line
-*/
-
-.wp-block-navigation {
-
- & > ul {
- & > li {
- & > a {
- display: flex;
- align-items: center;
- }
-
- &:first-of-type > a {
- padding-left: 0;
- }
-
- &:last-of-type > a {
- padding-right: 0;
- }
- }
+// Default / Light styles
+.wp-block-navigation-link,
+.is-style-light .wp-block-navigation-link {
+ &:not(.has-text-color) .wp-block-navigation-link__content {
+ color: $light-style-sub-menu-text-color;
}
+}
+.is-style-light:not(.has-background) .wp-block-navigation__container {
+ background-color: $light-style-sub-menu-background-color;
+}
- &.items-justified-left > ul {
- justify-content: flex-start;
+// Dark styles.
+.is-style-dark .wp-block-navigation-link {
+ &:not(.has-text-color) .wp-block-navigation-link__content {
+ color: $dark-style-sub-menu-text-color;
}
+}
+.is-style-dark:not(.has-background) .wp-block-navigation__container {
+ background-color: $dark-style-sub-menu-background-color;
+}
- &.items-justified-center > ul {
- justify-content: center;
- }
+// Jutification.
+.items-justified-left > ul {
+ justify-content: flex-start;
+}
- &.items-justified-right > ul {
- justify-content: flex-end;
- }
+.items-justified-center > ul {
+ justify-content: center;
+}
+
+.items-justified-right > ul {
+ justify-content: flex-end;
}
diff --git a/packages/block-library/src/navigation/theme.scss b/packages/block-library/src/navigation/theme.scss
index 0b80d85004697a..d628390770ebbc 100644
--- a/packages/block-library/src/navigation/theme.scss
+++ b/packages/block-library/src/navigation/theme.scss
@@ -4,3 +4,8 @@
list-style: none;
}
}
+
+// Overrides generic ".entry-content li" styles on the front end.
+.wp-block-navigation-link.wp-block-navigation-link {
+ margin: 0;
+}