Allow using a text label instead of an icon on overlay menu toggle button

docs/reference-guides/core-blocks.md

@@ -366,7 +366,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, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
 
 ## Navigation Area
 

packages/block-library/src/navigation/block.json

@@ -41,6 +41,10 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"hasIcon": {
+			"type": "boolean",
+			"default": true
+		},
 		"__unstableLocation": {
 			"type": "string"
 		},

packages/block-library/src/navigation/edit/index.js

@@ -54,6 +54,7 @@ import NavigationMenuNameControl from './navigation-menu-name-control';
 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';
 
 const EMPTY_ARRAY = [];
 
@@ -116,6 +117,7 @@ function Navigation( {
 			orientation = 'horizontal',
 			flexWrap = 'wrap',
 		} = {},
+		hasIcon,
 	} = attributes;
 
 	let areaMenu,
@@ -208,6 +210,8 @@ function Navigation( {
 		false
 	);
 
+	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
+
 	const {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
@@ -462,6 +466,13 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
@@ -492,6 +503,33 @@ function Navigation( {
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>
+							{ isResponsive && (
+								<Button
+									className={ overlayMenuPreviewClasses }
+									onClick={ () => {
+										setOverlayMenuPreview(
+											! overlayMenuPreview
+										);
+									} }
+								>
+									{ hasIcon && <OverlayMenuIcon /> }
+									{ ! hasIcon && (
+										<span>{ __( 'Menu' ) }</span>
+									) }
+								</Button>
+							) }
+							{ overlayMenuPreview && (
+								<ToggleControl
+									label={ __( 'Show icon button' ) }
+									help={ __(
+										'Configure the visual appearance of the button opening the overlay menu.'
+									) }
+									onChange={ ( value ) =>
+										setAttributes( { hasIcon: value } )
+									}
+									checked={ hasIcon }
+								/>
+							) }
 							<h3>{ __( 'Overlay Menu' ) }</h3>
 							<ToggleGroupControl
 								label={ __( 'Configure overlay menu' ) }
@@ -638,8 +676,10 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
+							label={ __( 'Menu' ) }
+							hasIcon={ hasIcon }
 							isOpen={ isResponsiveMenuOpen }
-							isResponsive={ 'never' !== overlayMenu }
+							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
 							classNames={ overlayClassnames }
 							styles={ overlayStyles }

packages/block-library/src/navigation/edit/overlay-menu-icon.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/primitives';
+
+export default function OverlayMenuIcon() {
+	return (
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			width="24"
+			height="24"
+			role="img"
+			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>
+	);
+}

packages/block-library/src/navigation/edit/responsive-wrapper.js

@@ -8,9 +8,13 @@ import classnames from 'classnames';
  */
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
-import { SVG, Rect } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
 export default function ResponsiveWrapper( {
 	children,
 	id,
@@ -20,6 +24,7 @@ export default function ResponsiveWrapper( {
 	isHiddenByDefault,
 	classNames,
 	styles,
+	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -57,18 +62,12 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					<SVG
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						width="24"
-						height="24"
-						role="img"
-						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>
+					{ hasIcon && <OverlayMenuIcon /> }
+					{ ! hasIcon && (
+						<span className="wp-block-navigation__toggle_button_label">
+							{ __( 'Menu' ) }
+						</span>
+					) }
 				</Button>
 			) }
 

packages/block-library/src/navigation/editor.scss

@@ -573,3 +573,19 @@ body.editor-styles-wrapper
 	justify-content: center;
 	margin-bottom: $grid-unit-20;
 }
+
+.wp-block-navigation__overlay-menu-preview {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background-color: $gray-100;
+	padding: 0 $grid-unit-30;
+	height: $grid-unit-40 * 2;
+	margin-bottom: $grid-unit-15;
+
+	&.open {
+		box-shadow: inset 0 0 0 $border-width $gray-200;
+		outline: 1px solid transparent; // Box shadow is removed in high contrast mode, a transparent outline is made opaque.
+		background-color: $white;
+	}
+}

packages/block-library/src/navigation/index.php

@@ -537,8 +537,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
+	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" 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_content     = $should_display_icon_label ? $toggle_button_icon : 'Menu';
+
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" 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></button>
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
@@ -556,7 +560,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
 		safecss_filter_attr( $colors['overlay_inline_styles'] ),
-		__( 'Menu' )
+		__( 'Menu' ),
+		$toggle_button_content
 	);
 
 	return sprintf(

packages/block-library/src/navigation/style.scss

@@ -583,6 +583,12 @@ button.wp-block-navigation-item__content {
 	color: #000;
 }
 
+// Overlay menu toggle button label
+.wp-block-navigation__toggle_button_label {
+	font-size: 1rem;
+	font-weight: bold;
+}
+
 // Menu and close buttons.
 .wp-block-navigation__responsive-container-open,
 .wp-block-navigation__responsive-container-close {

test/integration/fixtures/blocks/core__navigation.json

@@ -6,7 +6,8 @@
 		"attributes": {
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
-			"overlayMenu": "mobile"
+			"overlayMenu": "mobile",
+			"hasIcon": true
 		},
 		"innerBlocks": [],
 		"originalContent": ""