replace isResponsive with overlayMenu attribute

WordPress · Oct 13, 2021 · b758795 · b758795
1 parent 3f1580a
commit b758795
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -44,13 +44,9 @@
 			"type": "boolean",
 			"default": false
 		},
-		"isResponsive": {
-			"type": "boolean",
-			"default": false
-		},
-		"isHiddenByDefault": {
-			"type": "boolean",
-			"default": false
+		"overlayMenu": {
+			"type": "string",
+			"default": "never"
 		},
 		"__unstableLocation": {
 			"type": "string"

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',
@@ -272,26 +278,38 @@ function Navigation( {
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
 					<PanelBody title={ __( 'Display settings' ) }>
-						<ToggleControl
-							checked={ attributes.isResponsive }
-							onChange={ ( value ) => {
-								setAttributes( {
-									isResponsive: value,
-								} );
-							} }
-							label={ __( 'Enable responsive menu' ) }
-						/>
-						{ attributes.isResponsive && (
-							<ToggleControl
-								checked={ attributes.isHiddenByDefault }
-								onChange={ ( value ) => {
-									setAttributes( {
-										isHiddenByDefault: value,
-									} );
-								} }
-								label={ __( 'Always on burger menu' ) }
+						<ToggleGroupControl
+							label={
+								<div>
+									<h5>Overlay Menu</h5>
+									<p>
+										Controls whether the menu collapses into
+										a toggle button opening an overlay for
+										navigation.
+									</p>
+								</div>
+							}
+							value={ attributes.overlayMenu }
+							onChange={ ( value ) =>
+								setAttributes( { overlayMenu: value } )
+							}
+						>
+							<ToggleGroupControlOption
+								value="never"
+								label="Never"
+								aria-label="Never"
 							/>
-						) }
+							<ToggleGroupControlOption
+								value="mobile"
+								label="Mobile"
+								aria-label="Mobile"
+							/>
+							<ToggleGroupControlOption
+								value="always"
+								label="Always"
+								aria-label="Always"
+							/>
+						</ToggleGroupControl>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
@@ -363,8 +381,8 @@ function Navigation( {
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
-					isResponsive={ attributes.isResponsive }
-					isHiddenByDefault={ attributes.isHiddenByDefault }
+					isResponsive={ 'never' !== attributes.overlayMenu }
+					isHiddenByDefault={ 'always' === attributes.overlayMenu }
 				>
 					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,7 @@ 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'] );
+	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ( ! empty( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -250,7 +250,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()
+		isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,15 +288,15 @@ 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 ( ! isset( $attributes['overlayMenu'] ) || 'never' === $attributes['overlayMenu'] ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
 	}
 
-	$is_hidden_by_default = isset( $attributes['isHiddenByDefault'] ) && true === $attributes['isHiddenByDefault'];
+	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
 
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',