From 4ad0952b20389438b78021fa6566cb6a9a765de3 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 18 Mar 2021 12:56:33 +0100 Subject: [PATCH] Navigation Block / Page List: Unify menu item styles. --- .../src/navigation-link/style.scss | 288 ++++++++++-------- .../block-library/src/navigation/editor.scss | 3 +- .../block-library/src/navigation/style.scss | 3 +- .../block-library/src/page-list/editor.scss | 2 +- .../block-library/src/page-list/style.scss | 99 +----- 5 files changed, 180 insertions(+), 215 deletions(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index e987810090fc1c..1696307a70d7f5 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -1,156 +1,196 @@ -.wp-block-navigation-link { - display: flex; - align-items: center; - position: relative; - margin: 0 0.5em 0 0; - - .wp-block-navigation-link__container:empty { - display: none; - } -} +// Navigation item styles. +// This also styles navigation links inside the Page List block, +// as that block is meant to behave as menu items when leveraged. +.wp-block-navigation { + // Menu item container. + .wp-block-pages-list__item, + .wp-block-navigation-link { + display: flex; + align-items: center; + position: relative; + margin: 0 0.5em 0 0; -// Styles for submenu flyout. -.has-child { - > .wp-block-navigation-link__content { - padding-right: 0.5em; + .wp-block-navigation-link__container:empty { + display: none; + } } - .wp-block-navigation-link__container { - border: 1px solid rgba(0, 0, 0, 0.15); - background-color: inherit; + // Menu item link. + .wp-block-pages-list__item__link, + .wp-block-navigation-link__content { + // Inherit colors set by the block color definition. color: inherit; - position: absolute; - left: 0; - top: 100%; - z-index: 2; - display: flex; - flex-direction: column; - align-items: normal; - min-width: 200px; - - // Hide until hover or focus within. - opacity: 0; - transition: opacity 0.1s linear; - visibility: hidden; - - > .wp-block-navigation-link { - > .wp-block-navigation-link__content { - flex-grow: 1; - } - > .wp-block-navigation-link__submenu-icon { - padding-right: 0.5em; - } + display: block; + padding: 0.5em 1em; + } + + // Force links to inherit text decoration applied to navigation block. + // The extra selector adds specificity to ensure it works when user-set. + &[style*="text-decoration"] { + .wp-block-pages-list__item, + .wp-block-navigation-link__container, + .wp-block-navigation-link { + text-decoration: inherit; } - @include break-medium { - left: 1.5em; - - // Nested submenus sit to the left on large breakpoints - .wp-block-navigation-link__container { - left: 100%; - top: -1px; - - // Prevent the menu from disappearing when the mouse is over the gap - &::before { - content: ""; - position: absolute; - right: 100%; - height: 100%; - display: block; - width: 0.5em; - background: transparent; - } - } + .wp-block-pages-list__item__link, + .wp-block-navigation-link__content { + text-decoration: inherit; - .wp-block-navigation-link__submenu-icon svg { - transform: rotate(0); + &:focus, + &:active { + text-decoration: inherit; } } } - // 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. + &:not([style*="text-decoration"]) { + .wp-block-pages-list__item__link, + .wp-block-navigation-link__content { + text-decoration: none; - // Show submenus on hover. - &:hover > .wp-block-navigation-link__container { - visibility: visible; - opacity: 1; + &:focus, + &:active { + text-decoration: none; + } + } } - // Keep submenus open when focus is within. - &:focus-within > .wp-block-navigation-link__container { - visibility: visible; - opacity: 1; + // This wraps just the innermost text for custom menu items. + .wp-block-navigation-link__label { + word-break: normal; + overflow-wrap: break-word; } -} -// Default background and font color. -.wp-block-navigation:not(.has-background) { - .submenu-container, // This target items created by the Page List block. - .wp-block-navigation__container .wp-block-navigation-link__container { - // Set a background color for submenus so that they're not transparent. - // NOTE TO DEVS - if refactoring this code, please double-check that - // submenus have a default background color, this feature has regressed - // several times, so care needs to be taken. - background-color: #fff; - color: #000; - } -} + // Submenu indicator. + .wp-block-page-list__submenu-icon, + .wp-block-navigation-link__submenu-icon { + height: inherit; + padding: 0.375em 1em 0.375em 0; -// Force links to inherit text decoration applied to navigation block. -.wp-block-navigation[style*="text-decoration"] { - .wp-block-navigation-link__container, - .wp-block-navigation-link { - text-decoration: inherit; - } - .wp-block-navigation-link__content { - text-decoration: inherit; + svg { + fill: currentColor; - &:focus, - &:active { - text-decoration: inherit; + @include break-medium { + transform: rotate(90deg); + } } } -} -.wp-block-navigation:not([style*="text-decoration"]) { - .wp-block-navigation-link__content { - text-decoration: none; + // Styles for submenu flyout. + .has-child { + > .wp-block-pages-list__item__link, + > .wp-block-navigation-link__content { + padding-right: 0.5em; + } - &:focus, - &:active { - text-decoration: none; + .submenu-container, + .wp-block-navigation-link__container { + border: 1px solid rgba(0, 0, 0, 0.15); + background-color: inherit; + color: inherit; + position: absolute; + left: 0; + top: 100%; + z-index: 2; + display: flex; + flex-direction: column; + align-items: normal; + min-width: 200px; + + // Hide until hover or focus within. + opacity: 0; + transition: opacity 0.1s linear; + visibility: hidden; + + > .wp-block-pages-list__item, + > .wp-block-navigation-link { + > .wp-block-pages-list__item__link, + > .wp-block-navigation-link__content { + flex-grow: 1; + } + + > .wp-block-page-list__submenu-icon, + > .wp-block-navigation-link__submenu-icon { + padding-right: 0.5em; + } + } + + @include break-medium { + left: 1.5em; + + // Nested submenus sit to the left on large breakpoints. + .submenu-container, + .wp-block-navigation-link__container { + left: 100%; + top: -$border-width; + + // Prevent the menu from disappearing when the mouse is over the gap + &::before { + content: ""; + position: absolute; + right: 100%; + height: 100%; + display: block; + width: 0.5em; + background: transparent; + } + } + + // Reset the submenu indicator for horizontal flyouts. + .wp-block-page-list__submenu-icon svg, + .wp-block-navigation-link__submenu-icon svg { + transform: rotate(0); + } + } } - } -} -// All links. -.wp-block-navigation-link__content { - color: inherit; - padding: 0.5em 1em; + // 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. - + .wp-block-navigation-link__content { - padding-top: 0; - } - .has-text-color & { - color: inherit; - } -} + // Custom menu items. + // Show submenus on hover. + &:hover > .wp-block-navigation-link__container { + visibility: visible; + opacity: 1; + } -.wp-block-navigation-link__label { - word-break: normal; - overflow-wrap: break-word; -} + // Keep submenus open when focus is within. + &:focus-within > .wp-block-navigation-link__container { + visibility: visible; + opacity: 1; + } -.wp-block-navigation-link__submenu-icon { - height: inherit; - padding: 0.375em 1em 0.375em 0; + // Page list menu items. + &:hover { + cursor: pointer; - svg { - fill: currentColor; + > .submenu-container { + visibility: visible; + opacity: 1; + } + } - @include break-medium { - transform: rotate(90deg); + &:focus-within { + cursor: pointer; + + > .submenu-container { + visibility: visible; + opacity: 1; + } } } } + +// Default background and font color. +.wp-block-navigation:not(.has-background) { + .submenu-container, // This target items created by the Page List block. + .wp-block-navigation__container .wp-block-navigation-link__container { + // Set a background color for submenus so that they're not transparent. + // NOTE TO DEVS - if refactoring this code, please double-check that + // submenus have a default background color, this feature has regressed + // several times, so care needs to be taken. + background-color: #fff; + color: #000; + } +} diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index c5d90cdfe099e8..46ca78e45d277c 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -6,6 +6,7 @@ // These need extra specificity. .editor-styles-wrapper .wp-block-navigation { ul { + margin-top: 0; margin-bottom: 0; margin-left: 0; padding-left: 0; @@ -50,7 +51,7 @@ } } -// Styles for submenu flyout +// Styles for submenu flyout. .has-child { &.is-selected, &.has-child-selected, diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 5b61926a865776..9b7ef55cbaa143 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -9,8 +9,9 @@ } } +// Navigation block inner container. .wp-block-navigation__container { - // Vertically align child blocks, like Social Links or Search. + // Vertically center child blocks, like Social Links or Search. align-items: center; // Reset the default list styles diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss index 540fb5435fb062..778691f11ebf6b 100644 --- a/packages/block-library/src/page-list/editor.scss +++ b/packages/block-library/src/page-list/editor.scss @@ -6,7 +6,7 @@ } } -// Make links unclickable in the editor +// Make links unclickable in the editor. .wp-block-pages-list__item__link { pointer-events: none; } diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss index 08bb9a61d7eba2..264ebe23387021 100644 --- a/packages/block-library/src/page-list/style.scss +++ b/packages/block-library/src/page-list/style.scss @@ -1,18 +1,3 @@ -.wp-block-page-list__submenu-icon { - display: none; -} - -.show-submenu-icons { - .wp-block-page-list__submenu-icon { - display: block; - padding: 0.375em 1em 0.375em 0; - - svg { - fill: currentColor; - } - } -} - // The Page List block should inherit navigation styles when nested within it .wp-block-navigation { .wp-block-page-list { @@ -21,84 +6,22 @@ background-color: inherit; } - .wp-block-pages-list__item__link { - display: block; - color: inherit; - padding: 0.5em 1em; - } - - .wp-block-pages-list__item.has-child { - display: flex; - position: relative; + // Menu items generated by the page list do not get `has-[x]-background-color`, + // and must therefore inherit from the parent. + .wp-block-pages-list__item { background-color: inherit; - - > a { - padding-right: 0.5em; - } - - > .submenu-container { - border: $border-width solid rgba(0, 0, 0, 0.15); - position: absolute; - left: 0; - top: 100%; - width: fit-content; - z-index: 2; - opacity: 0; - transition: opacity 0.1s linear; - visibility: hidden; - - @include break-medium { - left: 1.5em; - - // Nested submenus sit to the left on large breakpoints - .submenu-container { - left: 100%; - top: -1px; - - // Prevent the menu from disappearing when the mouse is over the gap - &::before { - content: ""; - position: absolute; - right: 100%; - height: 100%; - display: block; - width: 0.5em; - background: transparent; - } - } - - .wp-block-navigation-link__submenu-icon svg { - transform: rotate(0); - } - } - } - - &:hover { - cursor: pointer; - - > .submenu-container { - visibility: visible; - opacity: 1; - } - } - - &:focus-within { - cursor: pointer; - - > .submenu-container { - visibility: visible; - opacity: 1; - } - } } - &.has-background .wp-block-pages-list__item.has-child > .submenu-container { - background-color: inherit; - color: inherit; + // Submenu icon indicator. + // The specific styles for the submenu indicator are inherited from the navigation block style. + .wp-block-page-list__submenu-icon { + display: none; } - .submenu-container { - padding: 0; + .show-submenu-icons { + .wp-block-page-list__submenu-icon { + display: block; + } } }