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 1 commit
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
24 changes: 17 additions & 7 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,12 +361,16 @@
$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 = ( isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'] ) ? 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()
$text_decoration ? array( $text_decoration_class ) : array(),
$is_collapsed_class
);
return implode( ' ', $classes );
}
Expand Down Expand Up @@ -397,16 +401,16 @@
$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'];
// $is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];

Check failure on line 404 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Line indented incorrectly; expected at least 2 tabs, found 0

Check failure on line 404 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed

$responsive_container_classes = array(
'wp-block-navigation__responsive-container',
$is_hidden_by_default ? 'hidden-by-default' : '',
// $is_hidden_by_default ? 'hidden-by-default' : '',

Check failure on line 408 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Line indented incorrectly; expected at least 2 tabs, found 0

Check failure on line 408 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed

Check failure on line 408 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Array item not aligned correctly; expected 12 spaces but found 0
implode( ' ', $colors['overlay_css_classes'] ),

Check failure on line 409 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Multi-line array item not aligned correctly; expected 24 spaces, but found 12
);
$open_button_classes = array(
'wp-block-navigation__responsive-container-open',
$is_hidden_by_default ? 'always-shown' : '',
// $is_hidden_by_default ? 'always-shown' : '',

Check failure on line 413 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Line indented incorrectly; expected at least 2 tabs, found 0

Check failure on line 413 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
);

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

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 @@
* @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(

Check warning on line 529 in lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Equals sign not aligned with surrounding assignments; expected 4 spaces but found 1 space
array(
'overlayOpenedBy' => array(),
'type' => 'overlay',
Expand All @@ -531,10 +535,16 @@
),
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 ( isset( $attributes['overlayMenu'] ) && 'always' !== $attributes['overlayMenu'] ) {
$nav_element_directives .= 'data-wp-watch="callbacks.initNav"';
}

return $nav_element_directives;
}

/**
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