From b77d71a448c7ff5670266bcd4221837c18f8a7a1 Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Tue, 21 Jan 2020 20:18:07 +0100 Subject: [PATCH] Navigation Block: Add submenu chevron w/ setting (#19601) * Initialize setting in the nav block settings panel * Add submenu icon * Register "showSubmenuIcon" attributes * Add submenu icon to front-end of the page * Update submenu icon setting description * Don't use for RichText element * Isolate NavigationLink icons * Clean up a little * Use for NavigationLink contents * Rename `$level_zero` to `$is_level_zero` * Add missing spaces * Update submenu icon selector in style.scss * Add comment about span-wrapping * Fix phpcs errors * Remove unused styles * Fix failing e2e tests * Update failing snapshots --- .../block-library/src/navigation-link/edit.js | 41 ++++++++++++---- .../src/navigation-link/editor.scss | 42 ++++------------ .../src/navigation-link/icons.js | 17 +++++++ packages/block-library/src/navigation/edit.js | 14 ++++++ .../block-library/src/navigation/index.php | 48 ++++++++++++++----- .../block-library/src/navigation/style.scss | 23 +++++---- .../__snapshots__/navigation.test.js.snap | 4 +- .../specs/editor/blocks/navigation.test.js | 2 +- 8 files changed, 124 insertions(+), 67 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 3aef65c4b3e62..4cf6ced5b23a2 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, @@ -37,12 +35,18 @@ import { } from '@wordpress/block-editor'; import { Fragment, useState, useEffect } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { toolbarSubmenuIcon, itemSubmenuIcon } from './icons'; + function NavigationLinkEdit( { attributes, hasDescendants, isSelected, isParentOfSelectedBlock, setAttributes, + showSubmenuIcon, insertLinkBlock, } ) { const { label, opensInNewTab, title, url, nofollow, description } = attributes; @@ -93,7 +97,7 @@ function NavigationLinkEdit( { /> } + icon={ toolbarSubmenuIcon } title={ __( 'Add submenu' ) } onClick={ insertLinkBlock } /> @@ -150,9 +154,10 @@ function NavigationLinkEdit( { 'has-link': !! url, } ) } > -
+
setAttributes( { label: labelValue } ) } placeholder={ itemLabelPlaceholder } @@ -164,6 +169,11 @@ function NavigationLinkEdit( { 'core/strikethrough', ] } /> + { showSubmenuIcon && + + { itemSubmenuIcon } + + } { isLinkOpen && ( { - const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); + const { + getBlockName, + getBlockAttributes, + getBlockParents, + getClientIdsOfDescendants, + hasSelectedInnerBlock, + } = select( 'core/block-editor' ); const { clientId } = ownProps; + const rootBlock = getBlockParents( clientId )[ 0 ]; + const parentBlock = getBlockParents( clientId, true )[ 0 ]; + 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 ), - hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, - + isParentOfSelectedBlock, + 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 f7606729f5b03..a61d103abac4a 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,10 +38,19 @@ 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; } + .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 0000000000000..ee169a6393cde --- /dev/null +++ b/packages/block-library/src/navigation-link/icons.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { Polygon, Path, SVG } from '@wordpress/components'; + +export const toolbarSubmenuIcon = ( + + + + +); + +export const itemSubmenuIcon = ( + + + +); diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index ce82af8f8821a..7437a2eca15d2 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,19 @@ function Navigation( { { InspectorControlsColorPanel } + + + { + setAttributes( { showSubmenuIcon: value } ); + } } + label={ __( 'Show submenu icon for top-level items' ) } + /> + +