From b73c187bde319bed0cf023c1fe3b86b4a8f23973 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Tue, 12 Nov 2024 23:14:11 +0530 Subject: [PATCH 1/7] feature: created text control to specify other navigation accessible name --- .../block-library/src/navigation/block.json | 4 +++ .../src/navigation/edit/index.js | 5 ++- .../edit/navigation-menu-name-control.js | 34 ++++++++++++++----- .../block-library/src/navigation/index.php | 15 ++++---- 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index c65e0c6224616e..6418cf3800882d 100644 --- 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 index ae7dd60bd0c5ba..3b70927d24842a 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -870,7 +870,10 @@ function Navigation( { { hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( - + ) } { 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 index db895b0b644aac..3b3d5b23345d82 100644 --- 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 ( - + <> + + { + setAttributes( { + accessibleMenuName: newAccessibleMenuName, + } ); + } } + /> + ); } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 9484ad13ed002a..2f012b2fbae565 100644 --- 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, ) ); From 3b6ae6da26579065fb7050888f779390167fd7da Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Tue, 12 Nov 2024 23:27:09 +0530 Subject: [PATCH 2/7] update: block docs --- docs/reference-guides/core-blocks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index a27de8211c824a..59255499d48bfd 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -473,7 +473,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Category:** theme - **Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons - **Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~ -- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor +- **Attributes:** __unstableLocation, accessibleMenuName, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link From fce85c4b95e42bc57d5667d484e14c3306865d54 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Tue, 12 Nov 2024 23:36:39 +0530 Subject: [PATCH 3/7] chore: rename accessibleMenuName to ariaLabel --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/navigation/block.json | 2 +- .../edit/navigation-menu-name-control.js | 10 +++++----- packages/block-library/src/navigation/index.php | 16 ++++++++-------- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 59255499d48bfd..fa434cb8d26141 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -473,7 +473,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Category:** theme - **Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons - **Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~ -- **Attributes:** __unstableLocation, accessibleMenuName, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor +- **Attributes:** __unstableLocation, ariaLabel, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 6418cf3800882d..b4e07641e728f9 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -85,7 +85,7 @@ "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] }, - "accessibleMenuName": { + "ariaLabel": { "type": "string", "default": "" } 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 index 3b3d5b23345d82..38e803adf6650d 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js @@ -15,7 +15,7 @@ export default function NavigationMenuNameControl( { 'title' ); - const { accessibleMenuName } = attributes; + const { ariaLabel } = attributes; return ( <> @@ -29,11 +29,11 @@ export default function NavigationMenuNameControl( { { + label={ __( 'Aria label' ) } + value={ ariaLabel } + onChange={ ( newAriaLabel ) => { setAttributes( { - accessibleMenuName: newAccessibleMenuName, + ariaLabel: newAriaLabel, } ); } } /> diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 2f012b2fbae565..37588c88068545 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -558,17 +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 ); - $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( + $nav_menu_name = static::get_unique_navigation_name( $attributes ); + $aria_label = ( ! empty( $attributes['ariaLabel'] ) ) ? $attributes['ariaLabel'] : $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' => $accessible_menu_name, + 'aria-label' => $aria_label, ) ); From 1e79171c985920b6382c8dc384ea919a631efd5c Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 13 Nov 2024 16:01:04 +0530 Subject: [PATCH 4/7] remove: UI for aria lable --- .../src/navigation/edit/index.js | 5 +-- .../edit/navigation-menu-name-control.js | 34 +++++-------------- 2 files changed, 9 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 3b70927d24842a..ae7dd60bd0c5ba 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -870,10 +870,7 @@ function Navigation( { { hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( - + ) } { 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 index 38e803adf6650d..db895b0b644aac 100644 --- 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,38 +5,20 @@ import { TextControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; -export default function NavigationMenuNameControl( { - attributes, - setAttributes, -} ) { +export default function NavigationMenuNameControl() { const [ title, updateTitle ] = useEntityProp( 'postType', 'wp_navigation', 'title' ); - const { ariaLabel } = attributes; - return ( - <> - - { - setAttributes( { - ariaLabel: newAriaLabel, - } ); - } } - /> - + ); } From aa023dd3e8f9ac61dd77f068544ec1395eb16382 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 13 Nov 2024 16:27:21 +0530 Subject: [PATCH 5/7] Fix: fixtures test --- test/integration/fixtures/blocks/core__navigation.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json index 340cdf3fdbe599..9be819ee01daf4 100644 --- a/test/integration/fixtures/blocks/core__navigation.json +++ b/test/integration/fixtures/blocks/core__navigation.json @@ -8,7 +8,8 @@ "overlayMenu": "mobile", "icon": "handle", "hasIcon": true, - "maxNestingLevel": 5 + "maxNestingLevel": 5, + "ariaLabel": "" }, "innerBlocks": [] } From 256a98079baf46c8484aedc21da8272bcf3f256c Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 13 Nov 2024 23:23:33 +0530 Subject: [PATCH 6/7] update: added early return if ariaLabel is provided --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/aria-label.js | 1 + packages/block-library/src/navigation/block.json | 4 ---- packages/block-library/src/navigation/index.php | 7 +++++-- test/integration/fixtures/blocks/core__navigation.json | 3 +-- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index fa434cb8d26141..a27de8211c824a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -473,7 +473,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Category:** theme - **Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons - **Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~ -- **Attributes:** __unstableLocation, ariaLabel, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor +- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link diff --git a/packages/block-editor/src/hooks/aria-label.js b/packages/block-editor/src/hooks/aria-label.js index 7f93aa4ff8c8b2..0e134c5ae5fe08 100644 --- a/packages/block-editor/src/hooks/aria-label.js +++ b/packages/block-editor/src/hooks/aria-label.js @@ -22,6 +22,7 @@ const ARIA_LABEL_SCHEMA = { export function addAttribute( settings ) { // Allow blocks to specify their own attribute definition with default values if needed. if ( settings?.attributes?.ariaLabel?.type ) { + console.log( 'The ariaLabel', settings.attributes.ariaLabel ); return settings; } if ( hasBlockSupport( settings, 'ariaLabel' ) ) { diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index b4e07641e728f9..c65e0c6224616e 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -84,10 +84,6 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] - }, - "ariaLabel": { - "type": "string", - "default": "" } }, "providesContext": { diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 37588c88068545..dd300eb12c6feb 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -344,6 +344,10 @@ private static function get_navigation_name( $attributes ) { $navigation_name = $attributes['ariaLabel'] ?? ''; + if ( ! empty( $navigation_name ) ) { + return $navigation_name; + } + // Load the navigation post. if ( array_key_exists( 'ref', $attributes ) ) { $navigation_post = get_post( $attributes['ref'] ); @@ -559,7 +563,6 @@ private static function get_responsive_container_markup( $attributes, $inner_blo */ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) { $nav_menu_name = static::get_unique_navigation_name( $attributes ); - $aria_label = ( ! empty( $attributes['ariaLabel'] ) ) ? $attributes['ariaLabel'] : $nav_menu_name; $is_interactive = static::is_interactive( $attributes, $inner_blocks ); $is_responsive_menu = static::is_responsive( $attributes ); $style = static::get_styles( $attributes ); @@ -568,7 +571,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) array( 'class' => $class, 'style' => $style, - 'aria-label' => $aria_label, + 'aria-label' => $nav_menu_name, ) ); diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json index 9be819ee01daf4..340cdf3fdbe599 100644 --- a/test/integration/fixtures/blocks/core__navigation.json +++ b/test/integration/fixtures/blocks/core__navigation.json @@ -8,8 +8,7 @@ "overlayMenu": "mobile", "icon": "handle", "hasIcon": true, - "maxNestingLevel": 5, - "ariaLabel": "" + "maxNestingLevel": 5 }, "innerBlocks": [] } From 093a1bb37a199a021cb769f81fc859fc995ac394 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 13 Nov 2024 23:24:44 +0530 Subject: [PATCH 7/7] fix: console log --- packages/block-editor/src/hooks/aria-label.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/hooks/aria-label.js b/packages/block-editor/src/hooks/aria-label.js index 0e134c5ae5fe08..7f93aa4ff8c8b2 100644 --- a/packages/block-editor/src/hooks/aria-label.js +++ b/packages/block-editor/src/hooks/aria-label.js @@ -22,7 +22,6 @@ const ARIA_LABEL_SCHEMA = { export function addAttribute( settings ) { // Allow blocks to specify their own attribute definition with default values if needed. if ( settings?.attributes?.ariaLabel?.type ) { - console.log( 'The ariaLabel', settings.attributes.ariaLabel ); return settings; } if ( hasBlockSupport( settings, 'ariaLabel' ) ) {