From 31c50084d0bdbf6ee3eec98c5400fae7a97fe8b2 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 13 Jan 2020 18:51:27 +0100 Subject: [PATCH 01/17] Initialize setting in the nav block settings panel --- packages/block-library/src/navigation/edit.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index ce82af8f8821a9..4f95284909c594 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -28,6 +28,7 @@ import { PanelBody, Placeholder, Spinner, + ToggleControl, Toolbar, ToolbarGroup, } from '@wordpress/components'; @@ -216,6 +217,17 @@ function Navigation( { { InspectorControlsColorPanel } + + + {} } + label={ __( 'Show submenu chevron' ) } + /> + +
Date: Thu, 16 Jan 2020 14:13:48 +0100 Subject: [PATCH 02/17] Add submenu icon --- .../block-library/src/navigation-link/edit.js | 31 +++++++++++++++++-- .../src/navigation-link/editor.scss | 4 +++ .../src/navigation-link/icons.js | 10 ++++++ packages/block-library/src/navigation/edit.js | 8 +++-- 4 files changed, 47 insertions(+), 6 deletions(-) create mode 100644 packages/block-library/src/navigation-link/icons.js diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 3aef65c4b3e62f..c1fefb4b72b57b 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -37,12 +37,18 @@ import { } from '@wordpress/block-editor'; import { Fragment, useState, useEffect } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { submenuIcon } from './icons'; + function NavigationLinkEdit( { attributes, hasDescendants, isSelected, isParentOfSelectedBlock, setAttributes, + showSubmenuIcon, insertLinkBlock, } ) { const { label, opensInNewTab, title, url, nofollow, description } = attributes; @@ -152,6 +158,7 @@ function NavigationLinkEdit( { >
setAttributes( { label: labelValue } ) } @@ -164,6 +171,11 @@ function NavigationLinkEdit( { 'core/strikethrough', ] } /> + { showSubmenuIcon && + + { submenuIcon } + + } { isLinkOpen && ( { - const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); + const { + getBlockName, + getBlockAttributes, + getBlockParents, + getClientIdsOfDescendants, + hasSelectedInnerBlock, + } = select( 'core/block-editor' ); const { clientId } = ownProps; + const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] ).length; + const parentBlock = getBlockParents( clientId, true )[ 0 ]; + let showSubmenuIcon = false; + + if ( hasDescendants && getBlockName( parentBlock ) === 'core/navigation' ) { + showSubmenuIcon = getBlockAttributes( parentBlock ).showSubmenuIcon; + } return { isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), - hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, - + hasDescendants, + showSubmenuIcon, }; } ), withDispatch( ( dispatch, ownProps, registry ) => { diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index f7606729f5b034..c7d73837d57f45 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -73,6 +73,10 @@ text-decoration: underline; } + .wp-block-navigation-link__submenu-icon { + margin-left: 4px; + } + .block-editor-rich-text__editable.is-selected:not(.keep-placeholder-on-focus):not(:focus) [data-rich-text-placeholder]::after { display: inline-block; } diff --git a/packages/block-library/src/navigation-link/icons.js b/packages/block-library/src/navigation-link/icons.js new file mode 100644 index 00000000000000..15cda3ad539663 --- /dev/null +++ b/packages/block-library/src/navigation-link/icons.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { Polygon, SVG } from '@wordpress/components'; + +export const submenuIcon = ( + + + +); diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 4f95284909c594..93183371e58af5 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -222,9 +222,11 @@ function Navigation( { title={ __( 'Display Settings' ) } > {} } - label={ __( 'Show submenu chevron' ) } + checked={ attributes.showSubmenuIcon } + onChange={ ( value ) => { + setAttributes( { showSubmenuIcon: value } ); + } } + label={ __( 'Show submenu icon' ) } /> From dec135b92d146fd72039a36307a7777be9c2b364 Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 14:26:44 +0100 Subject: [PATCH 03/17] Register "showSubmenuIcon" attributes --- packages/block-library/src/navigation/index.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 2e6dd456bffd17..211609cfcba648 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -264,6 +264,10 @@ function register_block_core_navigation() { 'itemsJustification' => array( 'type' => 'string', ), + 'showSubmenuIcon' => array( + 'type' => 'boolean', + 'default' => false, + ) ), 'render_callback' => 'render_block_navigation', From 279927326537cfaea17fa7afc2e24915585a7870 Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 18:29:11 +0100 Subject: [PATCH 04/17] Add submenu icon to front-end of the page --- .../block-library/src/navigation/index.php | 30 +++++++++++++++---- .../block-library/src/navigation/style.scss | 24 +++++++-------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 211609cfcba648..ec889f3976448a 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -110,6 +110,15 @@ function( $block ) { return $blocks; } +/* + * Returns the top-level submenu SVG chevron icon. + * + * @return string + */ +function render_submenu_icon() { + return ''; +} + /** * Renders the `core/navigation` block on server. * @@ -145,7 +154,7 @@ function render_block_navigation( $attributes, $content, $block ) { '', $class_attribute, $style_attribute, - build_navigation_html( $block, $colors, $font_sizes ) + build_navigation_html( $attributes, $block, $colors, $font_sizes, true ) ); } @@ -159,7 +168,7 @@ function render_block_navigation( $attributes, $content, $block ) { * * @return string Returns an HTML list from innerBlocks. */ -function build_navigation_html( $block, $colors, $font_sizes, $level_zero = true ) { +function build_navigation_html( $attributes, $block, $colors, $font_sizes, $level_zero = true ) { $html = ''; $classes = array_merge( $colors['css_classes'], @@ -172,8 +181,9 @@ function build_navigation_html( $block, $colors, $font_sizes, $level_zero = true : ''; foreach ( (array) $block['innerBlocks'] as $key => $block ) { + $has_submenu = count( (array) $block['innerBlocks'] ) > 0; - $html .= '
  • ' . + $html .= '
  • ' . ''; + } + $html .= ''; // End anchor tag content. - if ( count( (array) $block['innerBlocks'] ) > 0 ) { - $html .= build_navigation_html( $block, $colors, $font_sizes, false ); + if ( $has_submenu ) { + $html .= build_navigation_html( $attributes, $block, $colors, $font_sizes, false ); } $html .= '
    • '; diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 492181c4d5169f..b7678f73b4339f 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -40,6 +40,8 @@ & > li { & > a { + display: flex; + align-items: center; padding-left: 0; @include break-small { @@ -54,6 +56,16 @@ &:last-of-type > a { padding-right: 0; } + + // Make submenu icon inherit current text color + & > a svg { + fill: currentColor; + } + + // Add some space between link text & submenu icon + & > a > span + span { + margin-left: 4px; + } } // Sub-menus Flyout @@ -149,18 +161,6 @@ } } - // Top-level sub-menu indicators - & .has-sub-menu > a { - - &::after { - content: "\00a0\25BC"; - display: inline-block; - font-size: 0.6rem; - height: inherit; - width: inherit; - } - } - &.items-justified-left > ul { justify-content: flex-start; } From 1493b70ed29ca207b46997eb6334fb73a3a430ae Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 18:38:29 +0100 Subject: [PATCH 05/17] Update submenu icon setting description --- packages/block-library/src/navigation/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 93183371e58af5..7437a2eca15d2f 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -226,7 +226,7 @@ function Navigation( { onChange={ ( value ) => { setAttributes( { showSubmenuIcon: value } ); } } - label={ __( 'Show submenu icon' ) } + label={ __( 'Show submenu icon for top-level items' ) } /> From 35112883825067d76bf139e3f59066bd9b863c2a Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 18:51:19 +0100 Subject: [PATCH 06/17] Don't use for RichText element --- packages/block-library/src/navigation-link/edit.js | 8 +++----- packages/block-library/src/navigation-link/editor.scss | 2 ++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index c1fefb4b72b57b..6a01762f1289f0 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -156,10 +156,8 @@ function NavigationLinkEdit( { 'has-link': !! url, } ) } > -
    +
    setAttributes( { label: labelValue } ) } placeholder={ itemLabelPlaceholder } @@ -172,9 +170,9 @@ function NavigationLinkEdit( { ] } /> { showSubmenuIcon && - +
    { submenuIcon } - +
    } { isLinkOpen && ( diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index c7d73837d57f45..7f7ed5169abd66 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -70,6 +70,8 @@ } &.has-link .wp-block-navigation-link__content { + display: flex; + align-items: center; text-decoration: underline; } From de772cb999fa96e76b3edbd5196e7c1ab8a5fa26 Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 19:16:27 +0100 Subject: [PATCH 07/17] Isolate NavigationLink icons --- packages/block-library/src/navigation-link/edit.js | 8 +++----- packages/block-library/src/navigation-link/icons.js | 11 +++++++++-- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 6a01762f1289f0..2284538226112d 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -14,9 +14,7 @@ import { ExternalLink, KeyboardShortcuts, PanelBody, - Path, Popover, - SVG, TextareaControl, TextControl, ToggleControl, @@ -40,7 +38,7 @@ import { Fragment, useState, useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import { submenuIcon } from './icons'; +import { toolbarSubmenuIcon, itemSubmenuIcon } from './icons'; function NavigationLinkEdit( { attributes, @@ -99,7 +97,7 @@ function NavigationLinkEdit( { /> } + icon={ toolbarSubmenuIcon } title={ __( 'Add submenu' ) } onClick={ insertLinkBlock } /> @@ -171,7 +169,7 @@ function NavigationLinkEdit( { /> { showSubmenuIcon &&
    - { submenuIcon } + { itemSubmenuIcon }
    } { isLinkOpen && ( diff --git a/packages/block-library/src/navigation-link/icons.js b/packages/block-library/src/navigation-link/icons.js index 15cda3ad539663..ee169a6393cded 100644 --- a/packages/block-library/src/navigation-link/icons.js +++ b/packages/block-library/src/navigation-link/icons.js @@ -1,9 +1,16 @@ /** * WordPress dependencies */ -import { Polygon, SVG } from '@wordpress/components'; +import { Polygon, Path, SVG } from '@wordpress/components'; -export const submenuIcon = ( +export const toolbarSubmenuIcon = ( + + + + +); + +export const itemSubmenuIcon = ( From b3ffd0cfb0d0595d0d12e86a3781d130891055c5 Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 16 Jan 2020 19:34:44 +0100 Subject: [PATCH 08/17] Clean up a little --- packages/block-library/src/navigation-link/edit.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 2284538226112d..7d4ec3c036c3bd 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -224,16 +224,16 @@ export default compose( [ hasSelectedInnerBlock, } = select( 'core/block-editor' ); const { clientId } = ownProps; - const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] ).length; + const rootBlock = getBlockParents( clientId )[ 0 ]; const parentBlock = getBlockParents( clientId, true )[ 0 ]; - let showSubmenuIcon = false; - - if ( hasDescendants && getBlockName( parentBlock ) === 'core/navigation' ) { - showSubmenuIcon = getBlockAttributes( parentBlock ).showSubmenuIcon; - } + const rootBlockAttributes = getBlockAttributes( rootBlock ); + const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] ).length; + const isLevelZero = getBlockName( parentBlock ) === 'core/navigation'; + const showSubmenuIcon = rootBlockAttributes.showSubmenuIcon && isLevelZero && hasDescendants; + const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true ); return { - isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), + isParentOfSelectedBlock, hasDescendants, showSubmenuIcon, }; From c8092b8e9cb2941a76b4b4200b916cc508546e85 Mon Sep 17 00:00:00 2001 From: Bart Date: Fri, 17 Jan 2020 16:35:02 +0100 Subject: [PATCH 09/17] Use for NavigationLink contents --- packages/block-library/src/navigation-link/edit.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 7d4ec3c036c3bd..fa0be61f6fa43a 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -156,6 +156,7 @@ function NavigationLinkEdit( { >
    setAttributes( { label: labelValue } ) } placeholder={ itemLabelPlaceholder } @@ -168,9 +169,9 @@ function NavigationLinkEdit( { ] } /> { showSubmenuIcon && -
    + { itemSubmenuIcon } -
    + } { isLinkOpen && ( From b7bab047e1ec890d17c325fecd5a6c69ff5fbec8 Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 12:30:59 +0100 Subject: [PATCH 10/17] Rename `$level_zero` to `$is_level_zero` --- packages/block-library/src/navigation/index.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index ec889f3976448a..e3e98cccde002b 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -164,11 +164,11 @@ function render_block_navigation( $attributes, $content, $block ) { * @param array $block The block. * @param array $colors Contains inline styles and CSS classes to apply to navigation item. * @param array $font_sizes Contains inline styles and CSS classes to apply to navigation item. - * @param bool $level_zero True whether is main menu (level zero). Otherwise, False. + * @param bool $is_level_zero True whether is main menu (level zero). Otherwise, False. * * @return string Returns an HTML list from innerBlocks. */ -function build_navigation_html( $attributes, $block, $colors, $font_sizes, $level_zero = true ) { +function build_navigation_html( $attributes, $block, $colors, $font_sizes, $is_level_zero = true ) { $html = ''; $classes = array_merge( $colors['css_classes'], @@ -186,7 +186,7 @@ function build_navigation_html( $attributes, $block, $colors, $font_sizes, $leve $html .= '
  • ' . ''; } From 41b1b49a62a5ea6255831721bd7dd3c8d583515f Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 12:59:16 +0100 Subject: [PATCH 11/17] Add missing spaces --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index e3e98cccde002b..feaca99c4c5e0e 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -183,7 +183,7 @@ function build_navigation_html( $attributes, $block, $colors, $font_sizes, $is_l foreach ( (array) $block['innerBlocks'] as $key => $block ) { $has_submenu = count( (array) $block['innerBlocks'] ) > 0; - $html .= '
  • ' . + $html .= '
  • ' . ' Date: Tue, 21 Jan 2020 15:04:29 +0100 Subject: [PATCH 12/17] Update submenu icon selector in style.scss --- packages/block-library/src/navigation/style.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index b7678f73b4339f..23df9aa3ec9ee0 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -37,6 +37,7 @@ } } + // ToDo: move navigation-link styles to navigation-link/style.scss & > li { & > a { @@ -57,14 +58,12 @@ padding-right: 0; } - // Make submenu icon inherit current text color - & > a svg { - fill: currentColor; - } - - // Add some space between link text & submenu icon - & > a > span + span { + .wp-block-navigation-link__submenu-icon { margin-left: 4px; + + svg { + fill: currentColor; + } } } From 69778ae5fd0d93f3ed9c041efdba70f1dd14034a Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 15:07:09 +0100 Subject: [PATCH 13/17] Add comment about span-wrapping --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index feaca99c4c5e0e..fc9796be8739bc 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -204,7 +204,7 @@ function build_navigation_html( $attributes, $block, $colors, $font_sizes, $is_l // End appending HTML attributes to anchor tag. // Start anchor tag content. - $html .= '>'; + $html .= '>'; // Wrap title with span to isolate it from submenu icon. if ( isset( $block['attrs']['label'] ) ) { $html .= wp_kses( $block['attrs']['label'], From 22b1f8c74ae4280cb4259d386b8dc9feb1f3e1bc Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 16:33:54 +0100 Subject: [PATCH 14/17] Fix phpcs errors --- packages/block-library/src/navigation/index.php | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index fc9796be8739bc..2d99e1d854fbd2 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -110,7 +110,7 @@ function( $block ) { return $blocks; } -/* +/** * Returns the top-level submenu SVG chevron icon. * * @return string @@ -161,9 +161,10 @@ function render_block_navigation( $attributes, $content, $block ) { /** * Walks the inner block structure and returns an HTML list for it. * - * @param array $block The block. - * @param array $colors Contains inline styles and CSS classes to apply to navigation item. - * @param array $font_sizes Contains inline styles and CSS classes to apply to navigation item. + * @param array $attributes The Navigation block attributes. + * @param array $block The NavigationItem block. + * @param array $colors Contains inline styles and CSS classes to apply to navigation item. + * @param array $font_sizes Contains inline styles and CSS classes to apply to navigation item. * @param bool $is_level_zero True whether is main menu (level zero). Otherwise, False. * * @return string Returns an HTML list from innerBlocks. @@ -229,7 +230,7 @@ function build_navigation_html( $attributes, $block, $colors, $font_sizes, $is_l $html .= ''; - // Append submenu icon to top-level item + // Append submenu icon to top-level item. if ( $attributes['showSubmenuIcon'] && $is_level_zero && $has_submenu ) { $html .= '' . render_submenu_icon() . ''; } @@ -282,10 +283,10 @@ function register_block_core_navigation() { 'itemsJustification' => array( 'type' => 'string', ), - 'showSubmenuIcon' => array( - 'type' => 'boolean', + 'showSubmenuIcon' => array( + 'type' => 'boolean', 'default' => false, - ) + ), ), 'render_callback' => 'render_block_navigation', From 392fa7e0425b795e3777004ed6ec290375ed48ca Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 18:16:05 +0100 Subject: [PATCH 15/17] Remove unused styles --- .../src/navigation-link/editor.scss | 36 +++---------------- 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 7f7ed5169abd66..a61d103abac4a4 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -7,37 +7,6 @@ min-height: $icon-button-size; } -.wp-block-navigation-link__edit-container { - display: flex; - white-space: nowrap; - - // Compensate for navigation link base padding. - margin-left: -$grid-size; - - .wp-block-navigation-link__content { - margin-right: $grid-size; - - // This should match the padding of the navigation link. - padding: 0 $grid-size; - - // This make it look like an input field. - // We may want to not style this at all, but let's try this. - // We don't use the mixins because they increase the size of the input, which doesn't work with PlainText. - box-shadow: inset 0 0 0 1px $dark-gray-200; - transition: box-shadow 0.1s linear; - border-radius: $radius-round-rectangle; - @include reduce-motion("transition"); - - &:focus { - color: $dark-gray-900; - box-shadow: inset 0 0 0 2px $blue-medium-focus; - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; - } - } -} - /* * Adjust Navigation Item. */ @@ -69,9 +38,12 @@ display: block; } - &.has-link .wp-block-navigation-link__content { + .wp-block-navigation-link__content { display: flex; align-items: center; + } + + &.has-link .wp-block-navigation-link__label { text-decoration: underline; } From f562b8ad94f61352c45b14c9d4a13d6f57c52cf5 Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 18:21:23 +0100 Subject: [PATCH 16/17] Fix failing e2e tests --- packages/block-library/src/navigation-link/edit.js | 1 + packages/block-library/src/navigation/index.php | 5 ++++- packages/e2e-tests/specs/editor/blocks/navigation.test.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index fa0be61f6fa43a..4cf6ced5b23a26 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -157,6 +157,7 @@ function NavigationLinkEdit( {
    setAttributes( { label: labelValue } ) } placeholder={ itemLabelPlaceholder } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 2d99e1d854fbd2..ddf0e2a23662db 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -205,7 +205,10 @@ function build_navigation_html( $attributes, $block, $colors, $font_sizes, $is_l // End appending HTML attributes to anchor tag. // Start anchor tag content. - $html .= '>'; // Wrap title with span to isolate it from submenu icon. + $html .= '>' . + // Wrap title with span to isolate it from submenu icon. + ''; + if ( isset( $block['attrs']['label'] ) ) { $html .= wp_kses( $block['attrs']['label'], diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index 0b447976cfe91e..37e9db2c276113 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -59,7 +59,7 @@ async function updateActiveNavigationLink( { url, label } ) { } if ( label ) { - await page.click( '.wp-block-navigation-link__content.is-selected' ); + await page.click( '.wp-block-navigation-link__label.is-selected' ); // Ideally this would be `await pressKeyWithModifier( 'primary', 'a' )` // to select all text like other tests do. From 5535d9b9ee932b6d94c14527fdb638560d97165f Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 21 Jan 2020 19:20:50 +0100 Subject: [PATCH 17/17] Update failing snapshots --- .../specs/editor/blocks/__snapshots__/navigation.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap index 166627ee6e6183..82aed4dc7aaef9 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap @@ -2,9 +2,9 @@ exports[`Navigation allows a navigation menu to be created from an empty menu using a mixture of internal and external links 1`] = ` " - + - + " `;