Enable always on burger menu for responsive navigation menus. (#35568)

* Enable always-on burger menu in the editor * enable always hidden responsive menu * only show toggle if menu is responsive * change open button modifier classname * regenerate fixtures to include new attribute * replace isResponsive with overlayMenu attribute * add submenus option header * update fixtures for new overlayMenu attribute * make texts translatable * Tweak inspector * Add separate heading. * Tweak wording. * Simplify toggles. * add deprecation * fix e2e test * remove redundant aria-label attributes Co-authored-by: jasmussen <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Oct 13, 2021 · c1ea8d6 · c1ea8d6
1 parent 6835e66
commit c1ea8d6
Show file tree

Hide file tree

Showing 14 changed files with 256 additions and 51 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -4,7 +4,11 @@
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [ "menu", "navigation", "links" ],
+	"keywords": [
+		"menu",
+		"navigation",
+		"links"
+	],
 	"textdomain": "default",
 	"attributes": {
 		"orientation": {
@@ -36,13 +40,13 @@
 			"type": "boolean",
 			"default": true
 		},
-		"openSubmenusOnClick":{
+		"openSubmenusOnClick": {
 			"type": "boolean",
 			"default": false
 		},
-		"isResponsive": {
-			"type": "boolean",
-			"default": false
+		"overlayMenu": {
+			"type": "string",
+			"default": "never"
 		},
 		"__unstableLocation": {
 			"type": "string"
@@ -77,7 +81,10 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [ "wide", "full" ],
+		"align": [
+			"wide",
+			"full"
+		],
 		"anchor": true,
 		"html": false,
 		"inserter": true,

diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js
@@ -15,7 +15,92 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
-export default [
+const deprecated = [
+	// Remove `isResponsive` attribute.
+	{
+		attributes: {
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			rgbTextColor: {
+				type: 'string',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			rgbBackgroundColor: {
+				type: 'string',
+			},
+			itemsJustification: {
+				type: 'string',
+			},
+			showSubmenuIcon: {
+				type: 'boolean',
+				default: true,
+			},
+			openSubmenusOnClick: {
+				type: 'boolean',
+				default: false,
+			},
+			isResponsive: {
+				type: 'boolean',
+				default: 'false',
+			},
+			__unstableLocation: {
+				type: 'string',
+			},
+			overlayBackgroundColor: {
+				type: 'string',
+			},
+			customOverlayBackgroundColor: {
+				type: 'string',
+			},
+			overlayTextColor: {
+				type: 'string',
+			},
+			customOverlayTextColor: {
+				type: 'string',
+			},
+		},
+		supports: {
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			html: false,
+			inserter: true,
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalTextTransform: true,
+				__experimentalFontFamily: true,
+				__experimentalTextDecoration: true,
+			},
+		},
+		isEligible( attributes ) {
+			return attributes.isResponsive;
+		},
+		migrate( attributes ) {
+			delete attributes.isResponsive;
+			return {
+				...attributes,
+				overlayMenu: 'mobile',
+			};
+		},
+		save() {
+			return <InnerBlocks.Content />;
+		},
+	},
 	{
 		attributes: {
 			orientation: {
@@ -163,3 +248,5 @@ export default [
 		},
 	},
 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -26,7 +26,13 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -135,7 +141,7 @@ function Navigation( {
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
-			'is-responsive': attributes.isResponsive,
+			'is-responsive': 'never' !== attributes.overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',
@@ -271,24 +277,42 @@ function Navigation( {
 			{ navigatorModal }
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display settings' ) }>
-						<ToggleControl
-							checked={ attributes.isResponsive }
-							onChange={ ( value ) => {
-								setAttributes( {
-									isResponsive: value,
-								} );
-							} }
-							label={ __( 'Enable responsive menu' ) }
-						/>
+					<PanelBody title={ __( 'Display' ) }>
+						<h3>{ __( 'Overlay Menu' ) }</h3>
+						<ToggleGroupControl
+							label={ __( 'Configure overlay menu' ) }
+							value={ attributes.overlayMenu }
+							help={ __(
+								'Collapses the navigation options in a menu icon opening an overlay.'
+							) }
+							onChange={ ( value ) =>
+								setAttributes( { overlayMenu: value } )
+							}
+							isBlock
+							hideLabelFromVision
+						>
+							<ToggleGroupControlOption
+								value="never"
+								label={ __( 'Off' ) }
+							/>
+							<ToggleGroupControlOption
+								value="mobile"
+								label={ __( 'Mobile' ) }
+							/>
+							<ToggleGroupControlOption
+								value="always"
+								label={ __( 'Always' ) }
+							/>
+						</ToggleGroupControl>
+						<h3>{ __( 'Submenus' ) }</h3>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
 								setAttributes( {
 									openSubmenusOnClick: value,
 								} );
 							} }
-							label={ __( 'Open submenus on click' ) }
+							label={ __( 'Open on click' ) }
 						/>
 						{ ! attributes.openSubmenusOnClick && (
 							<ToggleControl
@@ -298,7 +322,7 @@ function Navigation( {
 										showSubmenuIcon: value,
 									} );
 								} }
-								label={ __( 'Show submenu indicator icons' ) }
+								label={ __( 'Show icons' ) }
 							/>
 						) }
 					</PanelBody>
@@ -352,7 +376,8 @@ function Navigation( {
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
-					isResponsive={ attributes.isResponsive }
+					isResponsive={ 'never' !== attributes.overlayMenu }
+					isHiddenByDefault={ 'always' === attributes.overlayMenu }
 				>
 					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -397,12 +397,6 @@ $color-control-label-height: 20px;
 		}
 	}
 }
-.components-button.wp-block-navigation__responsive-container-open {
-	@include break-small {
-		display: none;
-	}
-}
-
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
+	/**
+	 * This is for backwards compatibility after `isResponsive` attribute has been removed.
+	 */
+	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
+	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
+	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -250,7 +255,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['isResponsive'] ) && true === $attributes['isResponsive'] ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,17 +293,28 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
-	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
+	if ( ! $is_responsive_menu ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
 	}
 
+	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+
+	$responsive_container_classes = array(
+		'wp-block-navigation__responsive-container',
+		$is_hidden_by_default ? 'hidden-by-default' : '',
+	);
+	$open_button_classes          = array(
+		'wp-block-navigation__responsive-container-open',
+		$is_hidden_by_default ? 'always-shown' : '',
+	);
+
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="wp-block-navigation__responsive-container-open" 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>
-			<div class="wp-block-navigation__responsive-container" id="modal-%1$s" aria-hidden="true">
+		'<button aria-expanded="false" 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>
+			<div class="%5$s" id="modal-%1$s" aria-hidden="true">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" 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></button>
@@ -311,7 +327,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$modal_unique_id,
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
-		__( 'Close menu' ) // Close button label.
+		__( 'Close menu' ), // Close button label.
+		implode( ' ', $responsive_container_classes ),
+		implode( ' ', $open_button_classes )
 	);
 
 	return sprintf(

diff --git a/packages/block-library/src/navigation/responsive-wrapper.js b/packages/block-library/src/navigation/responsive-wrapper.js
@@ -17,6 +17,7 @@ export default function ResponsiveWrapper( {
 	isOpen,
 	isResponsive,
 	onToggle,
+	isHiddenByDefault,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -25,8 +26,13 @@ export default function ResponsiveWrapper( {
 		'wp-block-navigation__responsive-container',
 		{
 			'is-menu-open': isOpen,
+			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+	const openButtonClasses = classnames(
+		'wp-block-navigation__responsive-container-open',
+		{ 'always-shown': isHiddenByDefault }
+	);
 
 	const modalId = `${ id }-modal`;
 
@@ -37,7 +43,7 @@ export default function ResponsiveWrapper( {
 					aria-haspopup="true"
 					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
-					className="wp-block-navigation__responsive-container-open"
+					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
 					<SVG

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -505,16 +505,18 @@
 	}
 
 	@include break-small() {
-		&:not(.is-menu-open) {
-			display: flex;
-			flex-direction: row;
-			width: 100%;
-			position: relative;
-			z-index: 2;
-			background-color: inherit;
-
-			.wp-block-navigation__responsive-container-close {
-				display: none;
+		&:not(.hidden-by-default) {
+			&:not(.is-menu-open) {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				position: relative;
+				z-index: 2;
+				background-color: inherit;
+
+				.wp-block-navigation__responsive-container-close {
+					display: none;
+				}
 			}
 		}
 
@@ -558,8 +560,10 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	@include break-small {
-		display: none;
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
 	}
 
 	// Justify the button.