Add select icon for Navigation Block's menu button (#43674)

* Add select option to choose an icon for navigation button * Fix unit test and linting
WordPress · Sep 1, 2022 · cee488e · cee488e
1 parent 5b48607
commit cee488e
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 28 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -393,7 +393,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 -	**Name:** core/navigation
 -	**Category:** theme
 -	**Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
 
 ## Custom Link
 

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -41,6 +41,10 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"icon": {
+			"type": "string",
+			"default": "handle"
+		},
 		"hasIcon": {
 			"type": "boolean",
 			"default": true

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -52,6 +52,7 @@ import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
 import OverlayMenuIcon from './overlay-menu-icon';
+import OverlayMenuPreview from './overlay-menu-preview';
 import useConvertClassicToBlockMenu, {
 	CLASSIC_MENU_CONVERSION_ERROR,
 	CLASSIC_MENU_CONVERSION_PENDING,
@@ -92,6 +93,7 @@ function Navigation( {
 			flexWrap = 'wrap',
 		} = {},
 		hasIcon,
+		icon,
 	} = attributes;
 
 	const ref = attributes.ref;
@@ -468,7 +470,7 @@ function Navigation( {
 						>
 							{ hasIcon && (
 								<>
-									<OverlayMenuIcon />
+									<OverlayMenuIcon icon={ icon } />
 									<Icon icon={ close } />
 								</>
 							) }
@@ -481,15 +483,10 @@ function Navigation( {
 						</Button>
 					) }
 					{ overlayMenuPreview && (
-						<ToggleControl
-							label={ __( 'Show icon button' ) }
-							help={ __(
-								'Configure the visual appearance of the button opening and closing the overlay menu.'
-							) }
-							onChange={ ( value ) =>
-								setAttributes( { hasIcon: value } )
-							}
-							checked={ hasIcon }
+						<OverlayMenuPreview
+							setAttributes={ setAttributes }
+							hasIcon={ hasIcon }
+							icon={ icon }
 						/>
 					) }
 					<h3>{ __( 'Overlay Menu' ) }</h3>
@@ -638,6 +635,8 @@ function Navigation( {
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
+					hasIcon={ hasIcon }
+					icon={ icon }
 					isResponsive={ 'never' !== overlayMenu }
 					isHiddenByDefault={ 'always' === overlayMenu }
 					overlayBackgroundColor={ overlayBackgroundColor }
@@ -845,6 +844,7 @@ function Navigation( {
 							onToggle={ setResponsiveMenuVisibility }
 							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
+							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }

diff --git a/packages/block-library/src/navigation/edit/overlay-menu-icon.js b/packages/block-library/src/navigation/edit/overlay-menu-icon.js
@@ -2,19 +2,30 @@
  * WordPress dependencies
  */
 import { SVG, Rect } from '@wordpress/primitives';
+import { Icon, menu, moreVertical, moreHorizontal } from '@wordpress/icons';
 
-export default function OverlayMenuIcon() {
-	return (
-		<SVG
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			width="24"
-			height="24"
-			aria-hidden="true"
-			focusable="false"
-		>
-			<Rect x="4" y="7.5" width="16" height="1.5" />
-			<Rect x="4" y="15" width="16" height="1.5" />
-		</SVG>
-	);
+export default function OverlayMenuIcon( { icon } ) {
+	if ( icon === 'handle' ) {
+		return (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				width="24"
+				height="24"
+				aria-hidden="true"
+				focusable="false"
+			>
+				<Rect x="4" y="7.5" width="16" height="1.5" />
+				<Rect x="4" y="15" width="16" height="1.5" />
+			</SVG>
+		);
+	} else if ( icon === 'menu' ) {
+		return <Icon icon={ menu } />;
+	} else if ( icon === 'more-vertical' ) {
+		return <Icon icon={ moreVertical } />;
+	} else if ( icon === 'more-horizontal' ) {
+		return <Icon icon={ moreHorizontal } />;
+	}
+
+	return null;
 }
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
+export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
+	return (
+		<>
+			<ToggleControl
+				label={ __( 'Show icon button' ) }
+				help={ __(
+					'Configure the visual appearance of the button opening the overlay menu.'
+				) }
+				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
+				checked={ hasIcon }
+			/>
+
+			<ToggleGroupControl
+				label={ __( 'Icon' ) }
+				value={ icon }
+				help={ __( 'Choose an icon or add your own.' ) }
+				onChange={ ( value ) => setAttributes( { icon: value } ) }
+			>
+				<ToggleGroupControlOption
+					value="handle"
+					aria-label={ __( 'handle' ) }
+					label={ <OverlayMenuIcon icon="handle" /> }
+					className="wp-block-navigation__icon-button"
+				/>
+				<ToggleGroupControlOption
+					value="menu"
+					aria-label={ __( 'menu' ) }
+					label={ <OverlayMenuIcon icon="menu" /> }
+					className="wp-block-navigation__icon-button"
+				/>
+				<ToggleGroupControlOption
+					value="more-vertical"
+					aria-label={ __( 'more vertical' ) }
+					label={ <OverlayMenuIcon icon="more-vertical" /> }
+					className="wp-block-navigation__icon-button"
+				/>
+				<ToggleGroupControlOption
+					value="more-horizontal"
+					aria-label={ __( 'more horizontal' ) }
+					label={ <OverlayMenuIcon icon="more-horizontal" /> }
+					className="wp-block-navigation__icon-button"
+				/>
+			</ToggleGroupControl>
+		</>
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -26,6 +26,7 @@ export default function ResponsiveWrapper( {
 	overlayBackgroundColor,
 	overlayTextColor,
 	hasIcon,
+	icon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -83,7 +84,7 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					{ hasIcon && <OverlayMenuIcon /> }
+					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
 					{ ! hasIcon && (
 						<span className="wp-block-navigation__toggle_button_label">
 							{ __( 'Menu' ) }

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -610,3 +610,8 @@ body.editor-styles-wrapper
 	display: none;
 }
 
+
+.components-toggle-group-control-option-base.wp-block-navigation__icon-button {
+	// Override the default padding of ToggleGroupControlOption.
+	padding: 0 3px;
+}
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -610,8 +610,15 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
-	$should_display_icon_label   = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
-	$toggle_button_icon          = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
+	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	if ( 'menu' === $attributes['icon'] ) {
+		$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
+	} elseif ( 'more-vertical' === $attributes['icon'] ) {
+		$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" /></svg>';
+	} elseif ( 'more-horizontal' === $attributes['icon'] ) {
+		$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 13h2v-2h-2v2zm-6 0h2v-2H5v2zm12-2v2h2v-2h-2z" /></svg>';
+	}
 	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
 	$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );

diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
@@ -7,6 +7,7 @@
 			"openSubmenusOnClick": false,
 			"overlayMenu": "mobile",
 			"hasIcon": true,
+			"icon": "handle",
 			"maxNestingLevel": 5
 		},
 		"innerBlocks": []