From e6e2c73d02dd5e308da52b529116c68fdd342640 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Fri, 26 Feb 2021 11:06:48 -0300 Subject: [PATCH 1/2] Move link styles to Navigation Link Block --- .../src/navigation-link/style.scss | 30 ++++++++----------- .../block-library/src/navigation/style.scss | 28 +++++++++-------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 34558950e3391..72fd981e3b8c0 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -9,23 +9,6 @@ } } -.wp-block-navigation__container { - // Reset the default list styles - list-style: none; - margin: 0; - padding-left: 0; - - // Horizontal layout - display: flex; - flex-wrap: wrap; - - // Vertical layout - - .is-vertical & { - display: block; - } -} - // Styles for submenu flyout .has-child { > .wp-block-navigation-link__content { @@ -103,6 +86,19 @@ } } +// Default background and font color +.wp-block-navigation:not(.has-background) .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: $white; + color: $gray-900; + } +} + + // Force links to inherit text decoration applied to navigation block. .wp-block-navigation[style*="text-decoration"] { .wp-block-navigation__container, diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3916a806f941d..5d70623b0700f 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -1,15 +1,3 @@ -// Default background and font color -.wp-block-navigation:not(.has-background) .wp-block-navigation__container { - .wp-block-navigation__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: $white; - color: $gray-900; - } -} - .wp-block-navigation .wp-block-navigation__container { .wp-block-navigation__container { align-items: normal; @@ -20,6 +8,22 @@ .wp-block-navigation__container { // Vertically align child blocks, like Social Links or Search. align-items: center; + + // Reset the default list styles + list-style: none; + margin: 0; + padding-left: 0; + + // Horizontal layout + display: flex; + flex-wrap: wrap; + + // Vertical layout + + .is-vertical & { + display: block; + } + } .items-justified-center > ul { From d49399661e96515735f77ad7d6664590015f1469 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Fri, 26 Feb 2021 11:07:48 -0300 Subject: [PATCH 2/2] Rename Navigation Link container class --- packages/block-library/src/navigation-link/edit.js | 2 +- packages/block-library/src/navigation-link/index.php | 3 +-- .../block-library/src/navigation-link/style.scss | 12 ++++++------ 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index c6dd37884807e..a3bfc2cae8f49 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -311,7 +311,7 @@ export default function NavigationLinkEdit( { const innerBlocksProps = useInnerBlocksProps( { - className: classnames( 'wp-block-navigation__container', { + className: classnames( 'wp-block-navigation-link__container', { 'is-parent-of-selected-block': isParentOfSelectedBlock && // Don't select as parent of selected block while dragging. diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 45e6347829261..5e9b96876d72e 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -214,9 +214,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { $inner_blocks_html .= $inner_block->render(); } - // TODO - classname is wrong! $html .= sprintf( - '', + '', $inner_blocks_html ); } diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 72fd981e3b8c0..261f4524f7fb4 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -4,7 +4,7 @@ position: relative; margin: 0; - .wp-block-navigation__container:empty { + .wp-block-navigation-link__container:empty { display: none; } } @@ -14,7 +14,7 @@ > .wp-block-navigation-link__content { padding-right: 0.5em; } - .wp-block-navigation__container { + .wp-block-navigation-link__container { border: $border-width solid rgba(0, 0, 0, 0.15); background-color: inherit; color: inherit; @@ -40,7 +40,7 @@ left: 1.5em; // Nested submenus sit to the left on large breakpoints - .wp-block-navigation__container { + .wp-block-navigation-link__container { left: 100%; top: -1px; @@ -66,7 +66,7 @@ &:hover { cursor: pointer; - > .wp-block-navigation__container { + > .wp-block-navigation-link__container { visibility: visible; opacity: 1; display: flex; @@ -77,7 +77,7 @@ &:focus-within { cursor: pointer; - > .wp-block-navigation__container { + > .wp-block-navigation-link__container { visibility: visible; opacity: 1; display: flex; @@ -101,7 +101,7 @@ // Force links to inherit text decoration applied to navigation block. .wp-block-navigation[style*="text-decoration"] { - .wp-block-navigation__container, + .wp-block-navigation-link__container, .wp-block-navigation-link { text-decoration: inherit; }