Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigation: Refactor mobile overlay breakpoints to JS #57520

Merged
merged 18 commits into from
Jan 4, 2024
Merged

Navigation: Refactor mobile overlay breakpoints to JS #57520

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2514157
Navigation: Refactor mobile overlay breakpoints to JS
scruffian Jan 3, 2024
e1c7aec
remove unused code
scruffian Jan 3, 2024
43a92c5
refactor to shared function
scruffian Jan 3, 2024
283db3f
fix PHPCS
scruffian Jan 3, 2024
b290e59
also get the editor working
scruffian Jan 3, 2024
7bce629
move the 600 value to constants
scruffian Jan 4, 2024
da2006b
add a comment to explain why we don't need the JS for the overlayMenu…
scruffian Jan 4, 2024
9de7b8c
Use matchMedia instead of window.resize
scruffian Jan 4, 2024
c8f36c1
remove useEffects and use a hook for the media query
scruffian Jan 4, 2024
68d000a
Remove the listener when the component is unmounted
scruffian Jan 4, 2024
d86c7e4
use wp-init instead of wp-watch since we don't need to be reactive
scruffian Jan 4, 2024
8813ca7
Don't mutate the DOM in directives
scruffian Jan 4, 2024
2a2c3d6
Update packages/block-library/src/navigation/edit/index.js
scruffian Jan 4, 2024
4b8a19e
Update packages/block-library/src/navigation/edit/index.js
scruffian Jan 4, 2024
42b8ae6
Add px to the constant
scruffian Jan 4, 2024
651130d
rename to NAVIGATION_MOBILE_COLLAPSE
scruffian Jan 4, 2024
ad75338
Add a comment to the navigation CSS
scruffian Jan 4, 2024
b712646
Update lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
scruffian Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,16 +361,24 @@ private static function get_classes( $attributes ) {
$text_decoration = $attributes['style']['typography']['textDecoration'] ?? null;
$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );

// is-collapsed class is added to the navigation block when the menu is collapsed.
$is_collapsed_class = static::is_always_overlay( $attributes ) ? array( 'is-collapsed' ) : array();
scruffian marked this conversation as resolved.
Show resolved Hide resolved

$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()
$text_decoration ? array( $text_decoration_class ) : array(),
$is_collapsed_class
);
return implode( ' ', $classes );
}

private static function is_always_overlay( $attributes ) {
return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
}

/**
* Get styles for the navigation block.
*
Expand All @@ -397,16 +405,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
$colors = gutenberg_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' : '',
Comment on lines -400 to -409
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that this code is super confusing I'll be glad to see the back of it.

);

$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
Expand Down Expand Up @@ -504,7 +508,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
);

if ( $is_responsive_menu ) {
$nav_element_directives = static::get_nav_element_directives( $should_load_view_script );
$nav_element_directives = static::get_nav_element_directives( $should_load_view_script, $attributes );
$wrapper_attributes .= ' ' . $nav_element_directives;
}

Expand All @@ -517,12 +521,12 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
* @param bool $should_load_view_script Whether or not the view script should be loaded.
* @return string the directives for the navigation element.
*/
private static function get_nav_element_directives( $should_load_view_script ) {
private static function get_nav_element_directives( $should_load_view_script, $attributes ) {
if ( ! $should_load_view_script ) {
return '';
}
// When adding to this array be mindful of security concerns.
$nav_element_context = wp_json_encode(
$nav_element_context = wp_json_encode(
array(
'overlayOpenedBy' => array(),
'type' => 'overlay',
Expand All @@ -531,10 +535,16 @@ private static function get_nav_element_directives( $should_load_view_script ) {
),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
);
return '
$nav_element_directives = '
data-wp-interactive=\'{"namespace":"core/navigation"}\'
data-wp-context=\'' . $nav_element_context . '\'
';

if ( ! static::is_always_overlay( $attributes ) ) {
$nav_element_directives .= 'data-wp-watch="callbacks.initNav"';
}

return $nav_element_directives;
}

/**
Expand Down
19 changes: 19 additions & 0 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,24 @@ function Navigation( {
[ clientId ]
);
const isResponsive = 'never' !== overlayMenu;

const shouldBeCollapsed = useCallback( () => {
return (
'always' === overlayMenu ||
( 'mobile' === overlayMenu && window.innerWidth < 600 )
);
}, [ overlayMenu ] );
const [ isCollapsed, setIsCollapsed ] = useState( shouldBeCollapsed() );
useEffect( () => {
// Update when the window resizes.
window.addEventListener( 'resize', () => {
setIsCollapsed( shouldBeCollapsed() );
} );
scruffian marked this conversation as resolved.
Show resolved Hide resolved

// Update when the overlay menu setting changes.
setIsCollapsed( shouldBeCollapsed() );
}, [ overlayMenu, setIsCollapsed, shouldBeCollapsed ] );

const blockProps = useBlockProps( {
ref: navRef,
className: classnames(
Expand All @@ -310,6 +328,7 @@ 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,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
@include break-small {
.is-collapsed & {
display: none;
}
}
Expand Down
28 changes: 12 additions & 16 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,18 +611,16 @@ button.wp-block-navigation-item__content {
}
}

@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;
}
:not(.is-collapsed) > & {
&:not(.is-menu-open) {
scruffian marked this conversation as resolved.
Show resolved Hide resolved
display: block;
width: 100%;
position: relative;
z-index: auto;
background-color: inherit;

.wp-block-navigation__responsive-container-close {
display: none;
}
}

Expand Down Expand Up @@ -686,10 +684,8 @@ button.wp-block-navigation-item__content {
font-size: inherit;
}

&:not(.always-shown) {
@include break-small {
display: none;
}
:not(.is-collapsed) > & {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The > selector is necessary because the class gets added to the nav element, but it does make the CSS a bit more complex.

scruffian marked this conversation as resolved.
Show resolved Hide resolved
display: none;
}
}

Expand Down
16 changes: 15 additions & 1 deletion packages/block-library/src/navigation/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const focusableSelectors = [
// capture the clicks, instead of relying on the focusout event.
document.addEventListener( 'click', () => {} );

const { state, actions } = store( 'core/navigation', {
const { state, actions, callbacks } = store( 'core/navigation', {
state: {
get roleAttribute() {
const ctx = getContext();
Expand Down Expand Up @@ -177,6 +177,20 @@ const { state, actions } = store( 'core/navigation', {
focusableElements[ focusableElements.length - 1 ];
}
},
initNav() {
const { ref } = getElement();
callbacks.collapseNav( ref );
window.addEventListener( 'resize', () =>
callbacks.collapseNav( ref )
);
scruffian marked this conversation as resolved.
Show resolved Hide resolved
},
collapseNav( ref ) {
if ( window.innerWidth < 600 ) {
scruffian marked this conversation as resolved.
Show resolved Hide resolved
ref.classList.add( 'is-collapsed' );
} else {
ref.classList.remove( 'is-collapsed' );
}
},
focusFirstElement() {
const { ref } = getElement();
if ( state.isMenuOpen ) {
Expand Down
Loading