From 68c06cf184e395474499c4234caea7ee5cc0f1b8 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 17 May 2021 11:11:39 +0200 Subject: [PATCH 1/6] Refactor nav block paddings/margins to inherit global styles. --- .../block-library/src/navigation/style.scss | 327 ++++++++---------- 1 file changed, 143 insertions(+), 184 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3c00d43004ab9..bf1bf540a5152 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -27,8 +27,8 @@ } // Menu item link. - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { + // By targetting the markup directly we enable greater global styles compatibility. + a { // Inherit colors set by the block color definition. color: inherit; display: block; @@ -43,8 +43,7 @@ text-decoration: inherit; } - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { + a { text-decoration: inherit; &:focus, @@ -55,8 +54,7 @@ } &:not([style*="text-decoration"]) { - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { + a { text-decoration: none; &:focus, @@ -76,227 +74,188 @@ } } - // 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 { + // Set the default menu item padding to zero, to allow text-only buttons. + .wp-block-pages-list__item a, + .wp-block-navigation-link a { // This allows the custom menu item to inherit global styles. 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 { - margin-right: 0.5em; - } - - .submenu-container, - .wp-block-navigation-link__container { - background-color: inherit; - color: inherit; - position: absolute; - z-index: 2; - flex-direction: column; - align-items: normal; - min-width: 200px; - // Hide until hover or focus within. - display: none; - 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; - } +// Styles for submenu flyout. +// These are separated out with reduced specificity to allow better inheritance from Global Styles. +.has-child { + // This adds a little space between the link and the dropdown icon. + > a { + margin-right: 0.5em; + } - > .wp-block-page-list__submenu-icon, - > .wp-block-navigation-link__submenu-icon { - padding-right: 0.5em; - } + .submenu-container, + .wp-block-navigation-link__container { + background-color: inherit; + color: inherit; + position: absolute; + 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 { + > a { + flex-grow: 1; } - // Nested submenus sit to the left on large breakpoints. - // On smaller breakpoints, they open vertically, accordion-style. - @include break-medium { - .submenu-container, - .wp-block-navigation-link__container { - // 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(-90deg); - } + > .wp-block-page-list__submenu-icon, + > .wp-block-navigation-link__submenu-icon { + padding-right: 0.5em; } } - // Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401 - // We don't actually have to support this anymore, but it's easy to keep for now. - - // Custom menu items. - // Show submenus on hover. - &:hover > .wp-block-navigation-link__container { - display: flex; - visibility: visible; - opacity: 1; + // Spacing in all submenus. + a { + padding: 0.5em 1em; + margin: 0; } - // Keep submenus open when focus is within. - &:focus-within > .wp-block-navigation-link__container { - display: flex; - visibility: visible; - opacity: 1; - } + // Submenu indentation when there's no background. + left: -1em; + top: 100%; - // Page list menu items. - &:hover { - cursor: pointer; + // Indentation for all submenus. + // Nested submenus sit to the left on large breakpoints. + // On smaller breakpoints, they open vertically, accordion-style. + @include break-medium { + .submenu-container, + .wp-block-navigation-link__container { + left: 100%; + top: -1px; // Border width. - > .submenu-container { - display: flex; - visibility: visible; - opacity: 1; + // 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; + } } - } - - &:focus-within { - cursor: pointer; - > .submenu-container { - display: flex; - visibility: visible; - opacity: 1; + // Reset the submenu indicator for horizontal flyouts. + .wp-block-page-list__submenu-icon svg, + .wp-block-navigation-link__submenu-icon svg { + transform: rotate(-90deg); } } } - // When justified space-between, open submenus leftward for last menu item. - // When justified right, open all submenus leftwards. - // This needs high specificity. - &.wp-block-navigation.items-justified-space-between > .submenu-container > .has-child:last-child, - &.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child, - &.wp-block-navigation.items-justified-right > .submenu-container .has-child, - &.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child { - - // First submenu. - .submenu-container, - .wp-block-navigation-link__container { - left: auto; - right: 0; + // 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. - // Nested submenus. - .submenu-container, - .wp-block-navigation-link__container { - left: auto; - right: 100%; - } - } + // Custom menu items. + // Show submenus on hover. + &:hover > .wp-block-navigation-link__container { + visibility: visible; + opacity: 1; } -} - -// Margins, paddings, and submenu positions. -// These need extra specificity to override potentially inherited properties. -.wp-block-navigation.wp-block-navigation { - - // Menu items with no background. - .wp-block-page-list, - .wp-block-page-list > .wp-block-pages-list__item, - .wp-block-navigation__container > .wp-block-navigation-link { - margin: 0 2em 0 0; - // Margin of right-most margin should be zero, for right aligned or justified items. - &:last-child { - margin-right: 0; - } + // Keep submenus open when focus is within. + &:focus-within > .wp-block-navigation-link__container { + visibility: visible; + opacity: 1; } - // When the menu has a background, items have paddings, reduce margins to compensate. - // Treat margins and paddings differently when the block has a background. - &.has-background { - .wp-block-page-list, - .wp-block-page-list > .wp-block-pages-list__item, - .wp-block-navigation__container > .wp-block-navigation-link { - margin: 0 0.5em 0 0; - } + // Page list menu items. + &:hover { + cursor: pointer; - .wp-block-page-list .wp-block-pages-list__item__link, - .wp-block-navigation__container .wp-block-navigation-link__content { - padding: 0.5em 1em; + > .submenu-container { + visibility: visible; + opacity: 1; } } - // 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; - } + &:focus-within { + cursor: pointer; - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { - padding: 0.5em 1em; + > .submenu-container { + visibility: visible; + opacity: 1; } + } +} - // Submenu indentation when there's no background. - // It should align with the text above. - left: -1em; - top: 100%; +// Submenu indentation when there's a background. +.wp-block-navigation.has-background .has-child .submenu-container, +.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container { + left: 0; + top: 100%; - // Indentation when no background on small viewports. - // It should align with the parent menu above. + // There's no border on submenus when there are backgrounds. + @include break-medium { .submenu-container, .wp-block-navigation-link__container { - left: -1px; + left: 100%; + top: 0; } + } +} - // Indentation for all submenus on large viewports. - @include break-medium { - .submenu-container, - .wp-block-navigation-link__container { - left: 100%; - top: -1px; // Border width. - } - } +// Margins, paddings, and submenu positions. +// Menu items with no background. +.wp-block-page-list, +.wp-block-page-list > .wp-block-pages-list__item, +.wp-block-navigation__container > .wp-block-navigation-link { + margin: 0 2em 0 0; + + // Margin of right-most margin should be zero, for right aligned or justified items. + &:last-child { + margin-right: 0; } +} - // Submenu indentation when there's a background. - // It should align with menu item itself. - &.has-background .has-child .submenu-container, - &.has-background .has-child .wp-block-navigation-link__container { - left: 0; - top: 100%; +// When the menu has a background, items have paddings, reduce margins to compensate. +// Treat margins and paddings differently when the block has a background. +.wp-block-navigation.has-background { + .wp-block-page-list, + .wp-block-page-list > .wp-block-pages-list__item, + .wp-block-navigation__container > .wp-block-navigation-link { + margin: 0 0.5em 0 0; + } - // Indentation when there's a background on small viewports. - // It should align with the parent menu above. + a { + padding: 0.5em 1em; + } +} + +// When justified space-between, open submenus leftward for last menu item. +// When justified right, open all submenus leftwards. +// This needs high specificity. +.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child, +.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child, +.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child, +.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child { + + // First submenu. + .submenu-container, + .wp-block-navigation-link__container { + left: auto; + right: 0; + + // Nested submenus. .submenu-container, .wp-block-navigation-link__container { - left: 0; - } - - // There's no border on submenus when there are backgrounds. - @include break-medium { - .submenu-container, - .wp-block-navigation-link__container { - left: 100%; - top: 0; - } + left: auto; + right: 100%; } } } From ae60186faaacd17b23682790d8faa0eefd82bf81 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 May 2021 10:53:39 +0200 Subject: [PATCH 2/6] Fix color inheritance. Fix last-child margin. --- packages/block-library/src/navigation/style.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index bf1bf540a5152..c1f3d3cb78208 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -5,6 +5,7 @@ // Page List block inside your navigation block. .wp-block-navigation { position: relative; + // Normalize list styles. ul, ul li { @@ -28,7 +29,8 @@ // Menu item link. // By targetting the markup directly we enable greater global styles compatibility. - a { + // The extra container specificity is due to global styles outputting link styles that need overriding. + &.wp-block-navigation a { // Inherit colors set by the block color definition. color: inherit; display: block; @@ -225,11 +227,17 @@ // When the menu has a background, items have paddings, reduce margins to compensate. // Treat margins and paddings differently when the block has a background. +// @todo: refactor this to use gap. .wp-block-navigation.has-background { .wp-block-page-list, .wp-block-page-list > .wp-block-pages-list__item, .wp-block-navigation__container > .wp-block-navigation-link { margin: 0 0.5em 0 0; + + // Don't show right margin on the last child. + &:last-child { + margin: 0; + } } a { From 28b6c15e081b0b9a2b6ecbe9f997bb163de4c048 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 May 2021 11:22:09 +0200 Subject: [PATCH 3/6] Use :where to minimize specificity. --- .../block-library/src/navigation/style.scss | 48 +++++++++++++------ 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index c1f3d3cb78208..9acd790f896bf 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -75,12 +75,6 @@ stroke: currentColor; } } - - // Set the default menu item padding to zero, to allow text-only buttons. - .wp-block-pages-list__item a, - .wp-block-navigation-link a { // This allows the custom menu item to inherit global styles. - padding: 0; - } } @@ -212,7 +206,12 @@ } } -// Margins, paddings, and submenu positions. + +/** + * Margins + * @todo: refactor this to use gap. + */ + // Menu items with no background. .wp-block-page-list, .wp-block-page-list > .wp-block-pages-list__item, @@ -225,10 +224,11 @@ } } -// When the menu has a background, items have paddings, reduce margins to compensate. -// Treat margins and paddings differently when the block has a background. -// @todo: refactor this to use gap. -.wp-block-navigation.has-background { +// Menu items with background. +// We use :where to keep specificity minimal, yet still scope it to only the navigation block. +// That way if padding is set in theme.json, it still wins. +// https://css-tricks.com/almanac/selectors/w/where/ +.wp-block-navigation:where(.has-background) { .wp-block-page-list, .wp-block-page-list > .wp-block-pages-list__item, .wp-block-navigation__container > .wp-block-navigation-link { @@ -239,12 +239,32 @@ margin: 0; } } +} - a { - padding: 0.5em 1em; - } + +/** + * Paddings + */ + +// Set the default menu item padding to zero, to allow text-only buttons. +.wp-block-navigation a { + padding: 0; +} + +// When the menu has a background, items have paddings, reduce margins to compensate. +// Treat margins and paddings differently when the block has a background. +// We use :where to keep specificity minimal, yet still scope it to only the navigation block. +// That way if padding is set in theme.json, it still wins. +// https://css-tricks.com/almanac/selectors/w/where/ +.wp-block-navigation:where(.has-background) a { + padding: 0.5em 1em; } + +/** + * Justifications. + */ + // When justified space-between, open submenus leftward for last menu item. // When justified right, open all submenus leftwards. // This needs high specificity. From 390ab32322c9a55fb3ff4f4a79b7ddca029040e8 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 May 2021 12:03:24 +0200 Subject: [PATCH 4/6] Move chevron inside link. --- packages/block-library/src/navigation-link/edit.js | 10 +++++----- .../block-library/src/navigation-link/index.php | 6 +++--- packages/block-library/src/navigation/editor.scss | 5 +++++ packages/block-library/src/navigation/style.scss | 13 +++++++++---- packages/block-library/src/page-list/index.php | 5 ++++- packages/block-library/src/page-list/style.scss | 2 +- 6 files changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index d44e0870093a6..8f225c499da96 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -605,12 +605,12 @@ export default function NavigationLinkEdit( { /> ) } + { hasDescendants && showSubmenuIcon && ( + + + + ) } - { hasDescendants && showSubmenuIcon && ( - - - - ) }
    diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index b5416f8c4967e..a770c48d185e5 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -199,14 +199,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { $html .= ''; - $html .= ''; - // End anchor tag content. - if ( $block->context['showSubmenuIcon'] && $has_submenu ) { // The submenu icon can be hidden by a CSS rule on the Navigation Block. $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; } + $html .= ''; + // End anchor tag content. + if ( $has_submenu ) { $inner_blocks_html = ''; foreach ( $block->inner_blocks as $inner_block ) { diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index d9798a5d9746c..427595912acf7 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -13,6 +13,11 @@ } } +// This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor. +.wp-block-navigation-link__label { + display: inline-block; +} + /** * Submenus. diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 9acd790f896bf..58fca5138450e 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -70,6 +70,7 @@ .wp-block-page-list__submenu-icon, .wp-block-navigation-link__submenu-icon { height: inherit; + margin-left: 6px; svg { stroke: currentColor; @@ -102,15 +103,19 @@ transition: opacity 0.1s linear; visibility: hidden; + // Submenu items. > .wp-block-pages-list__item, > .wp-block-navigation-link { > a { + display: flex; flex-grow: 1; - } - > .wp-block-page-list__submenu-icon, - > .wp-block-navigation-link__submenu-icon { - padding-right: 0.5em; + // Right-align the chevron in submenus. + .wp-block-page-list__submenu-icon, + .wp-block-navigation-link__submenu-icon { + margin-right: 0; + margin-left: auto; + } } } diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index f25d80c33decf..42ec8679c8f6c 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -108,11 +108,14 @@ function render_nested_page_list( $nested_pages, $active_page_ancestor_ids = arr $markup .= '' . wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) - ) . ''; + ); + if ( isset( $page['children'] ) ) { $markup .= ''; $markup .= '
      ' . render_nested_page_list( $page['children'], $active_page_ancestor_ids ) . '
    '; } + + $markup .= ''; $markup .= ''; } return $markup; diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss index 7747055e309bb..8b2355c8f9740 100644 --- a/packages/block-library/src/page-list/style.scss +++ b/packages/block-library/src/page-list/style.scss @@ -20,7 +20,7 @@ .show-submenu-icons { .wp-block-page-list__submenu-icon { - display: block; + display: inline-block; } } } From b60d6e1252018bdeaf8cfdc592b39bfe6bebb7c6 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 May 2021 12:25:46 +0200 Subject: [PATCH 5/6] Provide default paddings for submenus. --- .../block-library/src/navigation/style.scss | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 58fca5138450e..49efd13ea0784 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -82,13 +82,10 @@ // Styles for submenu flyout. // These are separated out with reduced specificity to allow better inheritance from Global Styles. .has-child { - // This adds a little space between the link and the dropdown icon. - > a { - margin-right: 0.5em; - } - - .submenu-container, - .wp-block-navigation-link__container { + // We use :where to keep specificity minimal, yet still scope it to only the navigation block. + // That way if padding is set in theme.json, it still wins. + // https://css-tricks.com/almanac/selectors/w/where/ + :where(.submenu-container, .wp-block-navigation-link__container) { background-color: inherit; color: inherit; position: absolute; @@ -121,7 +118,6 @@ // Spacing in all submenus. a { - padding: 0.5em 1em; margin: 0; } @@ -251,6 +247,10 @@ * Paddings */ +// We use :where to keep specificity minimal, yet still scope it to only the navigation block. +// That way if padding is set in theme.json, it still wins. +// https://css-tricks.com/almanac/selectors/w/where/ + // Set the default menu item padding to zero, to allow text-only buttons. .wp-block-navigation a { padding: 0; @@ -258,13 +258,15 @@ // When the menu has a background, items have paddings, reduce margins to compensate. // Treat margins and paddings differently when the block has a background. -// We use :where to keep specificity minimal, yet still scope it to only the navigation block. -// That way if padding is set in theme.json, it still wins. -// https://css-tricks.com/almanac/selectors/w/where/ .wp-block-navigation:where(.has-background) a { padding: 0.5em 1em; } +// Provide a default padding for submenus who should always have some, regardless of the top level menu items. +.wp-block-navigation :where(.submenu-container, .wp-block-navigation-link__container) a { + padding: 0.5em 1em; +} + /** * Justifications. From 8fd15abe3a4ddd4ad27bdab67f1fdb56436a2d75 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 May 2021 12:49:04 +0200 Subject: [PATCH 6/6] Fix page list bug. --- packages/block-library/src/page-list/index.php | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 42ec8679c8f6c..f25d80c33decf 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -108,14 +108,11 @@ function render_nested_page_list( $nested_pages, $active_page_ancestor_ids = arr $markup .= '' . wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) - ); - + ) . ''; if ( isset( $page['children'] ) ) { $markup .= ''; $markup .= '
      ' . render_nested_page_list( $page['children'], $active_page_ancestor_ids ) . '
    '; } - - $markup .= ''; $markup .= ''; } return $markup;