From 2e15d20bcd0eba945d33c5b500fec6c8765cc20c Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 4 Aug 2022 18:03:09 +0100 Subject: [PATCH 1/6] Handle close button toggle --- packages/block-library/src/navigation/index.php | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 310288ec9a251..f2e3d481535ce 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -610,16 +610,18 @@ function render_block_core_navigation( $attributes, $content, $block ) { $is_hidden_by_default ? 'always-shown' : '', ); - $toggle_button_icon = ''; - $should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon']; - $toggle_button_content = $should_display_icon_label ? $toggle_button_icon : 'Menu'; + $should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon']; + $toggle_button_icon = ''; + $toggle_button_content = $should_display_icon_label ? $toggle_button_icon : 'Menu'; + $toggle_close_button_icon = ''; + $toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : 'Close'; $responsive_container_markup = sprintf( '
- +
%2$s
@@ -634,7 +636,8 @@ function render_block_core_navigation( $attributes, $content, $block ) { esc_attr( implode( ' ', $open_button_classes ) ), safecss_filter_attr( $colors['overlay_inline_styles'] ), __( 'Menu' ), - $toggle_button_content + $toggle_button_content, + $toggle_close_button_content ); return sprintf( From db4456633006660f9ce8c15c094e173c1e964b78 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 4 Aug 2022 18:06:57 +0100 Subject: [PATCH 2/6] Allow text labels to inherit text transform --- packages/block-library/src/navigation/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 34b930442cd8f..eb681b9722924 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -613,6 +613,7 @@ button.wp-block-navigation-item__content { border: none; margin: 0; padding: 0; + text-transform: inherit; svg { fill: currentColor; From af0851b869085b191b3d7a0b1a72b80681fc2c07 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 4 Aug 2022 18:20:32 +0100 Subject: [PATCH 3/6] Add hasIcon logic around close button --- .../block-library/src/navigation/edit/index.js | 15 +++++++++++++-- .../src/navigation/edit/responsive-wrapper.js | 7 ++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index a6c66a7a9d534..2de421ff38fc8 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -36,6 +36,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; +import { close, Icon } from '@wordpress/icons'; /** * Internal dependencies @@ -465,8 +466,18 @@ function Navigation( { setOverlayMenuPreview( ! overlayMenuPreview ); } } > - { hasIcon && } - { ! hasIcon && { __( 'Menu' ) } } + { hasIcon && ( + <> + + + + ) } + { ! hasIcon && ( + <> + { __( 'Menu' ) } + { __( 'Close' ) } + + ) } ) } { overlayMenuPreview && ( diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index 3e6cced93fffc..4e364a6a97abd 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -107,7 +107,12 @@ export default function ResponsiveWrapper( { aria-label={ __( 'Close menu' ) } onClick={ () => onToggle( false ) } > - + { hasIcon && } + { ! hasIcon && ( + + { __( 'Close' ) } + + ) }
Date: Thu, 4 Aug 2022 18:28:40 +0100 Subject: [PATCH 4/6] Align menu preview content --- packages/block-library/src/navigation/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index b0daf5dd59b15..6530340f79835 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -606,6 +606,7 @@ body.editor-styles-wrapper .wp-block-navigation__overlay-menu-preview { display: flex; align-items: center; + justify-content: space-between; width: 100%; background-color: $gray-100; padding: 0 $grid-unit-30; From 4014626b1226ae7cbd12f06cd3e10fca0a5ed8c6 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 4 Aug 2022 18:46:16 +0100 Subject: [PATCH 5/6] Tweak help wording --- packages/block-library/src/navigation/edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 2de421ff38fc8..7a38a5a9e43c5 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -484,7 +484,7 @@ function Navigation( { setAttributes( { hasIcon: value } ) From 51c7b2494321e04a47a5855a69d22a0991f6ef9a Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Tue, 9 Aug 2022 11:45:07 +0100 Subject: [PATCH 6/6] Conditionally add aria-label when buttons are icons --- .../src/navigation/edit/responsive-wrapper.js | 4 ++-- packages/block-library/src/navigation/index.php | 14 ++++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index 4e364a6a97abd..880dbec8921d3 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -79,7 +79,7 @@ export default function ResponsiveWrapper( { { ! isOpen && ( + '
- +
%2$s
@@ -630,8 +632,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
', esc_attr( $modal_unique_id ), $inner_blocks_html, - __( 'Open menu' ), // Open button label. - __( 'Close menu' ), // Close button label. + $toggle_aria_label_open, + $toggle_aria_label_close, esc_attr( implode( ' ', $responsive_container_classes ) ), esc_attr( implode( ' ', $open_button_classes ) ), safecss_filter_attr( $colors['overlay_inline_styles'] ),