From a4fb4b8cbb37b7fffe5e1bd8a0d23cd106be0e0f Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Fri, 23 Apr 2021 10:37:40 -0400 Subject: [PATCH] Navigation Block: Add Color Options for Submenus Closes #29963 --- .../src/navigation-link/block.json | 4 ++ .../block-library/src/navigation-link/edit.js | 49 +++++++++++++-- .../src/navigation-link/editor.scss | 6 ++ .../block-library/src/navigation/block.json | 17 ++++- packages/block-library/src/navigation/edit.js | 63 +++++++++++++++++-- 5 files changed, 128 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json index efcc6810705506..4a8b08c45a6c50 100644 --- a/packages/block-library/src/navigation-link/block.json +++ b/packages/block-library/src/navigation-link/block.json @@ -43,6 +43,10 @@ "customTextColor", "backgroundColor", "customBackgroundColor", + "overlayTextColor", + "customOverlayTextColor", + "overlayBackgroundColor", + "customOverlayBackgroundColor", "fontSize", "customFontSize", "showSubmenuIcon", diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index d44e0870093a6c..c26c78761cee80 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -233,7 +233,14 @@ export default function NavigationLinkEdit( { url, opensInNewTab, }; - const { textColor, backgroundColor, style, showSubmenuIcon } = context; + const { + textColor, + backgroundColor, + overlayTextColor, + overlayBackgroundColor, + style, + showSubmenuIcon, + } = context; const { saveEntityRecord } = useDispatch( coreStore ); const { insertBlock } = useDispatch( blockEditorStore ); const [ isLinkOpen, setIsLinkOpen ] = useState( false ); @@ -244,6 +251,7 @@ export default function NavigationLinkEdit( { const { isAtMaxNesting, + isTopLevelLink, isParentOfSelectedBlock, isImmediateParentOfSelectedBlock, hasDescendants, @@ -269,6 +277,8 @@ export default function NavigationLinkEdit( { isAtMaxNesting: getBlockParentsByBlockName( clientId, name ).length >= MAX_NESTING, + isTopLevelLink: + getBlockParentsByBlockName( clientId, name ).length === 0, isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true @@ -380,6 +390,13 @@ export default function NavigationLinkEdit( { }; } + const textColorForNesting = isTopLevelLink + ? textColor + : overlayTextColor || textColor; + const bgColorForNesting = isTopLevelLink + ? backgroundColor + : overlayBackgroundColor || backgroundColor; + const blockProps = useBlockProps( { ref: listItemRef, className: classnames( { @@ -387,10 +404,11 @@ export default function NavigationLinkEdit( { 'is-dragging-within': isDraggingWithin, 'has-link': !! url, 'has-child': hasDescendants, - 'has-text-color': !! textColor || !! style?.color?.text, - [ `has-${ textColor }-color` ]: !! textColor, - 'has-background': !! backgroundColor || !! style?.color?.background, - [ `has-${ backgroundColor }-background-color` ]: !! backgroundColor, + 'has-text-color': !! textColorForNesting || !! style?.color?.text, + [ `has-${ textColorForNesting }-color` ]: !! textColorForNesting, + 'has-background': + !! bgColorForNesting || !! style?.color?.background, + [ `has-${ bgColorForNesting }-background-color` ]: !! bgColorForNesting, } ), style: { color: style?.color?.text, @@ -406,7 +424,28 @@ export default function NavigationLinkEdit( { { className: classnames( 'wp-block-navigation-link__container', { 'is-parent-of-selected-block': isParentOfSelectedBlock, + 'has-text-color': !! ( + overlayTextColor || + textColor || + !! style?.color?.text + ), + [ `has-${ overlayTextColor || textColor }-color` ]: !! ( + overlayTextColor || textColor + ), + 'has-background': + !! overlayBackgroundColor || + backgroundColor || + !! style?.color?.background, + [ `has-${ + overlayBackgroundColor || backgroundColor + }-background-color` ]: !! ( + overlayBackgroundColor || backgroundColor + ), } ), + style: { + color: style?.color?.text, + backgroundColor: style?.color?.background, + }, }, { allowedBlocks: ALLOWED_BLOCKS, diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 971bdbb20bcc4f..a929fcdc374dd6 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -64,6 +64,12 @@ margin-bottom: $grid-unit-20; margin-left: $grid-unit-20; } + + // Override the list reset for colored, nested menus + ol.has-background, + ul.has-background { + padding: 0; + } } .wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] { diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index d27fdc579ccd94..e7bd67fca8c5e6 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -42,6 +42,18 @@ "isResponsive": { "type": "boolean", "default": false + }, + "overlayBackgroundColor": { + "type": "string" + }, + "customOverlayBackgroundColor": { + "type": "string" + }, + "overlayTextColor": { + "type": "string" + }, + "customOverlayTextColor": { + "type": "string" } }, "providesContext": { @@ -49,6 +61,10 @@ "customTextColor": "customTextColor", "backgroundColor": "backgroundColor", "customBackgroundColor": "customBackgroundColor", + "overlayTextColor": "overlayTextColor", + "customOverlayTextColor": "customOverlayTextColor", + "overlayBackgroundColor": "overlayBackgroundColor", + "customOverlayBackgroundColor": "customOverlayBackgroundColor", "fontSize": "fontSize", "customFontSize": "customFontSize", "showSubmenuIcon": "showSubmenuIcon", @@ -68,7 +84,6 @@ "__experimentalFontStyle": true, "__experimentalFontWeight": true, "__experimentalTextTransform": true, - "color": true, "__experimentalFontFamily": true, "__experimentalTextDecoration": true }, diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 99adf28132389b..6194784488ab3c 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -15,6 +15,8 @@ import { BlockControls, useBlockProps, store as blockEditorStore, + withColors, + PanelColorSettings, } from '@wordpress/block-editor'; import { useDispatch, withSelect, withDispatch } from '@wordpress/data'; import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components'; @@ -54,6 +56,14 @@ function Navigation( { isSelected, updateInnerBlocks, className, + backgroundColor, + setBackgroundColor, + textColor, + setTextColor, + overlayBackgroundColor, + setOverlayBackgroundColor, + overlayTextColor, + setOverlayTextColor, hasSubmenuIndicatorSetting = true, hasItemJustificationControls = true, } ) { @@ -67,11 +77,23 @@ function Navigation( { const { selectBlock } = useDispatch( blockEditorStore ); const blockProps = useBlockProps( { - className: classnames( className, { - [ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification, - 'is-vertical': attributes.orientation === 'vertical', - 'is-responsive': attributes.isResponsive, - } ), + className: classnames( + className, + textColor.class, + backgroundColor.class, + { + [ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification, + 'is-vertical': attributes.orientation === 'vertical', + 'is-responsive': attributes.isResponsive, + 'has-text-color': !! textColor.color || !! textColor.class, + 'has-background': + !! backgroundColor.color || !! backgroundColor.class, + } + ), + style: { + color: textColor.color, + backgroundColor: backgroundColor.color, + }, } ); const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( @@ -165,6 +187,31 @@ function Navigation( { /> ) } +