Navigation Block: Add Color Options for Submenus

Closes #29963
WordPress · May 7, 2021 · f57007d · f57007d
1 parent b7fd98e
commit f57007d
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 10 deletions.
diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
@@ -41,6 +41,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
@@ -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,17 +390,25 @@ export default function NavigationLinkEdit( {
 		};
 	}
 
+	const textColorForNesting = isTopLevelLink
+		? textColor
+		: overlayTextColor || textColor;
+	const bgColorForNesting = isTopLevelLink
+		? backgroundColor
+		: overlayBackgroundColor || backgroundColor;
+
 	const blockProps = useBlockProps( {
 		ref: listItemRef,
 		className: classnames( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'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
@@ -57,6 +57,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
@@ -34,13 +34,29 @@
 		"showSubmenuIcon": {
 			"type": "boolean",
 			"default": true
+		},
+		"overlayBackgroundColor": {
+			"type": "string"
+		},
+		"customOverlayBackgroundColor": {
+			"type": "string"
+		},
+		"overlayTextColor": {
+			"type": "string"
+		},
+		"customOverlayTextColor": {
+			"type": "string"
 		}
 	},
 	"providesContext": {
 		"textColor": "textColor",
 		"customTextColor": "customTextColor",
 		"backgroundColor": "backgroundColor",
 		"customBackgroundColor": "customBackgroundColor",
+		"overlayTextColor": "overlayTextColor",
+		"customOverlayTextColor": "customOverlayTextColor",
+		"overlayBackgroundColor": "overlayBackgroundColor",
+		"customOverlayBackgroundColor": "customOverlayBackgroundColor",
 		"fontSize": "fontSize",
 		"customFontSize": "customFontSize",
 		"showSubmenuIcon": "showSubmenuIcon",
@@ -57,7 +73,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
@@ -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';
@@ -52,6 +54,14 @@ function Navigation( {
 	isSelected,
 	updateInnerBlocks,
 	className,
+	backgroundColor,
+	setBackgroundColor,
+	textColor,
+	setTextColor,
+	overlayBackgroundColor,
+	setOverlayBackgroundColor,
+	overlayTextColor,
+	setOverlayTextColor,
 	hasSubmenuIndicatorSetting = true,
 	hasItemJustificationControls = true,
 } ) {
@@ -62,10 +72,22 @@ function Navigation( {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
-			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
-			'is-vertical': attributes.orientation === 'vertical',
-		} ),
+		className: classnames(
+			className,
+			textColor.class,
+			backgroundColor.class,
+			{
+				[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
+				'is-vertical': attributes.orientation === 'vertical',
+				'has-text-color': !! textColor.color || !! textColor.class,
+				'has-background':
+					!! backgroundColor.color || !! backgroundColor.class,
+			}
+		),
+		style: {
+			color: textColor.color,
+			backgroundColor: backgroundColor.color,
+		},
 	} );
 
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
@@ -150,6 +172,31 @@ function Navigation( {
 						/>
 					</PanelBody>
 				) }
+				<PanelColorSettings
+					title={ __( 'Color' ) }
+					colorSettings={ [
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text color' ),
+						},
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background text' ),
+						},
+						{
+							value: overlayTextColor.color,
+							onChange: setOverlayTextColor,
+							label: __( 'Overlay text color' ),
+						},
+						{
+							value: overlayBackgroundColor.color,
+							onChange: setOverlayBackgroundColor,
+							label: __( 'Overlay background color' ),
+						},
+					] }
+				/>
 			</InspectorControls>
 			<nav { ...blockProps }>
 				<ul { ...innerBlocksProps } />
@@ -194,4 +241,10 @@ export default compose( [
 			},
 		};
 	} ),
+	withColors(
+		{ textColor: 'color' },
+		{ backgroundColor: 'color' },
+		{ overlayBackgroundColor: 'color' },
+		{ overlayTextColor: 'color' }
+	),
 ] )( Navigation );