feature: created text control to specify other navigation accessible …

…name
up1512001 · Nov 12, 2024 · b73c187 · b73c187
1 parent d2bc9ea
commit b73c187
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 16 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -84,6 +84,10 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"accessibleMenuName": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -870,7 +870,10 @@ function Navigation( {
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (
-								<NavigationMenuNameControl />
+								<NavigationMenuNameControl
+									attributes={ attributes }
+									setAttributes={ setAttributes }
+								/>
 							) }
 						{ hasResolvedCanUserDeleteNavigationMenu &&
 							canUserDeleteNavigationMenu && (

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
@@ -5,20 +5,38 @@ import { TextControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
-export default function NavigationMenuNameControl() {
+export default function NavigationMenuNameControl( {
+	attributes,
+	setAttributes,
+} ) {
 	const [ title, updateTitle ] = useEntityProp(
 		'postType',
 		'wp_navigation',
 		'title'
 	);
 
+	const { accessibleMenuName } = attributes;
+
 	return (
-		<TextControl
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			label={ __( 'Menu name' ) }
-			value={ title }
-			onChange={ updateTitle }
-		/>
+		<>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Menu name' ) }
+				value={ title }
+				onChange={ updateTitle }
+			/>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Accessible menu name' ) }
+				value={ accessibleMenuName }
+				onChange={ ( newAccessibleMenuName ) => {
+					setAttributes( {
+						accessibleMenuName: newAccessibleMenuName,
+					} );
+				} }
+			/>
+		</>
 	);
 }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -558,16 +558,17 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 	 * @return string Returns the navigation block markup.
 	 */
 	private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) {
-		$nav_menu_name      = static::get_unique_navigation_name( $attributes );
-		$is_interactive     = static::is_interactive( $attributes, $inner_blocks );
-		$is_responsive_menu = static::is_responsive( $attributes );
-		$style              = static::get_styles( $attributes );
-		$class              = static::get_classes( $attributes );
-		$wrapper_attributes = get_block_wrapper_attributes(
+		$nav_menu_name        = static::get_unique_navigation_name( $attributes );
+		$accessible_menu_name = ( ! empty( $attributes['accessibleMenuName'] ) ) ? $attributes['accessibleMenuName'] : $nav_menu_name;
+		$is_interactive       = static::is_interactive( $attributes, $inner_blocks );
+		$is_responsive_menu   = static::is_responsive( $attributes );
+		$style                = static::get_styles( $attributes );
+		$class                = static::get_classes( $attributes );
+		$wrapper_attributes   = get_block_wrapper_attributes(
 			array(
 				'class'      => $class,
 				'style'      => $style,
-				'aria-label' => $nav_menu_name,
+				'aria-label' => $accessible_menu_name,
 			)
 		);