From ad1c0b4c17269a67e06e740ce14971d2b276e792 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:13:50 +0100 Subject: [PATCH] Revert "Navigation: Refactor mobile overlay breakpoints to JS (#57520)" (#59149) Co-authored-by: c4rl0sbr4v0 Co-authored-by: fabiankaegy Co-authored-by: DAreRodz Co-authored-by: huubl Co-authored-by: cbirdsong Co-authored-by: tomxygen --- .../block-library/src/navigation/constants.js | 2 -- .../src/navigation/edit/index.js | 12 +------ .../block-library/src/navigation/editor.scss | 2 +- .../block-library/src/navigation/index.php | 29 ++++------------ .../block-library/src/navigation/style.scss | 34 +++++++++---------- packages/block-library/src/navigation/view.js | 26 -------------- 6 files changed, 25 insertions(+), 80 deletions(-) diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js index ff13309d1e4e7..154c490e83839 100644 --- a/packages/block-library/src/navigation/constants.js +++ b/packages/block-library/src/navigation/constants.js @@ -23,5 +23,3 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [ 'wp_navigation', PRELOADED_NAVIGATION_MENUS_QUERY, ]; - -export const NAVIGATION_MOBILE_COLLAPSE = '600px'; diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 14ef6fc73d48f..3cacd814119e6 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -42,7 +42,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; import { close, Icon } from '@wordpress/icons'; -import { useInstanceId, useMediaQuery } from '@wordpress/compose'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -71,7 +71,6 @@ import MenuInspectorControls from './menu-inspector-controls'; import DeletedNavigationWarning from './deleted-navigation-warning'; import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; -import { NAVIGATION_MOBILE_COLLAPSE } from '../constants'; import { unlock } from '../../lock-unlock'; function Navigation( { @@ -298,14 +297,6 @@ function Navigation( { [ clientId ] ); const isResponsive = 'never' !== overlayMenu; - const isMobileBreakPoint = useMediaQuery( - `(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })` - ); - - const isCollapsed = - ( 'mobile' === overlayMenu && isMobileBreakPoint ) || - 'always' === overlayMenu; - const blockProps = useBlockProps( { ref: navRef, className: classnames( @@ -319,7 +310,6 @@ function Navigation( { 'is-vertical': orientation === 'vertical', 'no-wrap': flexWrap === 'nowrap', 'is-responsive': isResponsive, - 'is-collapsed': isCollapsed, 'has-text-color': !! textColor.color || !! textColor?.class, [ getColorClassName( 'color', textColor?.slug ) ]: !! textColor?.slug, diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index eb796ae696541..107fb6e6de5fd 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -429,7 +429,7 @@ $color-control-label-height: 20px; // These needs extra specificity in the editor. .wp-block-navigation__responsive-container:not(.is-menu-open) { .components-button.wp-block-navigation__responsive-container-close { - .is-collapsed & { + @include break-small { display: none; } } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 73b682fd6a431..5dcada62f6feb 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -390,25 +390,16 @@ private static function get_classes( $attributes ) { $text_decoration = $attributes['style']['typography']['textDecoration'] ?? null; $text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration ); - // Sets the is-collapsed class when the navigation is set to always use the overlay. - // This saves us from needing to do this check in the view.js file (see the collapseNav function). - $is_collapsed_class = static::is_always_overlay( $attributes ) ? array( 'is-collapsed' ) : array(); - $classes = array_merge( $colors['css_classes'], $font_sizes['css_classes'], $is_responsive_menu ? array( 'is-responsive' ) : array(), $layout_class ? array( $layout_class ) : array(), - $text_decoration ? array( $text_decoration_class ) : array(), - $is_collapsed_class + $text_decoration ? array( $text_decoration_class ) : array() ); return implode( ' ', $classes ); } - private static function is_always_overlay( $attributes ) { - return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu']; - } - /** * Get styles for the navigation block. * @@ -435,12 +426,16 @@ private static function get_responsive_container_markup( $attributes, $inner_blo $colors = block_core_navigation_build_css_colors( $attributes ); $modal_unique_id = wp_unique_id( 'modal-' ); + $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' : '', implode( ' ', $colors['overlay_css_classes'] ), ); $open_button_classes = array( 'wp-block-navigation__responsive-container-open', + $is_hidden_by_default ? 'always-shown' : '', ); $should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon']; @@ -538,7 +533,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) ); if ( $is_responsive_menu ) { - $nav_element_directives = static::get_nav_element_directives( $is_interactive, $attributes ); + $nav_element_directives = static::get_nav_element_directives( $is_interactive ); $wrapper_attributes .= ' ' . $nav_element_directives; } @@ -552,7 +547,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) * @param array $attributes The block attributes. * @return string the directives for the navigation element. */ - private static function get_nav_element_directives( $is_interactive, $attributes ) { + private static function get_nav_element_directives( $is_interactive ) { if ( ! $is_interactive ) { return ''; } @@ -569,16 +564,6 @@ private static function get_nav_element_directives( $is_interactive, $attributes data-wp-interactive="core/navigation"' . $nav_element_context; - /* - * When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript - * is not needed for collapsing the menu because the class is set manually. - */ - if ( ! static::is_always_overlay( $attributes ) ) { - $nav_element_directives .= 'data-wp-init="callbacks.initNav"'; - $nav_element_directives .= ' '; // space separator - $nav_element_directives .= 'data-wp-class--is-collapsed="context.isCollapsed"'; - } - return $nav_element_directives; } diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3f11c5564306c..0b70ebb656cfa 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -611,19 +611,18 @@ button.wp-block-navigation-item__content { } } - // When the menu is collapsed, the menu button is visible. - // We are using the > selector combined with the :not(is-collapsed) selector - // as a way to target the class being added to the parent nav element. - :not(.is-collapsed) > & { - &:not(.is-menu-open) { - display: block; - width: 100%; - position: relative; - z-index: auto; - background-color: inherit; - - .wp-block-navigation__responsive-container-close { - display: none; + @include break-small() { + &:not(.hidden-by-default) { + &:not(.is-menu-open) { + display: block; + width: 100%; + position: relative; + z-index: auto; + background-color: inherit; + + .wp-block-navigation__responsive-container-close { + display: none; + } } } @@ -687,11 +686,10 @@ button.wp-block-navigation-item__content { font-size: inherit; } - // When the menu is collapsed, the menu button is visible. - // We are using the > selector combined with the :not(is-collapsed) selector - // as a way to target the class being added to the parent nav element. - :not(.is-collapsed) > & { - display: none; + &:not(.always-shown) { + @include break-small { + display: none; + } } } diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index eb553eee9ca18..aa12ea4473b32 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -3,11 +3,6 @@ */ import { store, getContext, getElement } from '@wordpress/interactivity'; -/** - * Internal dependencies - */ -import { NAVIGATION_MOBILE_COLLAPSE } from './constants'; - const focusableSelectors = [ 'a[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', @@ -201,27 +196,6 @@ const { state, actions } = store( focusableElements?.[ 0 ]?.focus(); } }, - initNav() { - const context = getContext(); - const mediaQuery = window.matchMedia( - `(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })` - ); - - // Run once to set the initial state. - context.isCollapsed = mediaQuery.matches; - - function handleCollapse( event ) { - context.isCollapsed = event.matches; - } - - // Run on resize to update the state. - mediaQuery.addEventListener( 'change', handleCollapse ); - - // Remove the listener when the component is unmounted. - return () => { - mediaQuery.removeEventListener( 'change', handleCollapse ); - }; - }, }, }, { lock: true }