Skip to content

Commit

Permalink
Local Navigation: Improve style and behavior across screen sizes (#573)
Browse files Browse the repository at this point in the history 
* Prevent menu from wrapping to second line

* Use the block-specific hook to save a conditional

* Move the custom property section to the top of the file

* Style the mobile modal for medium & small screens, update focus states and spacing to match designs

* Ensure child navigation block uses the expected attributes

* Add an extra navigation block which is always collapsed, hidden by default

* Adjust spacing & breakpoints

* Update alignment of spacer dot

* Hide the page title on small screens to prevent overflow

* Prevent very long titles from wrapping on medium-small screens

* Show a mobile menu (chevron dropdown) when the local nav and/or page title would cause the text to wrap

* Get the gap value dynamically

On some sites (like Documentation), this is 24px, while it's 20px on Developer.

* Ensure the focus style appears inside the overflow boundary

* Fix alignment issues

* Local navs with bottom borders should only show the border on scroll

* Add class to fade in content on scroll

* Force section title elements to not wrap

* Use more broad title selector, check before using

* Switch to parseInt for integer conversion

* Fix scrolling when mobile menu is longer than screen height

* Fix height & dropdown spacing on mid-sized screens
  • Loading branch information
@ryelle
ryelle authored Feb 19, 2024
1 parent bd5a5d7 commit 43dc4ec
Show file tree
Hide file tree
Showing 3 changed files with 348 additions and 76 deletions.
127 changes: 94 additions & 33 deletions mu-plugins/blocks/local-navigation-bar/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@

add_action( 'init', __NAMESPACE__ . '\init' );
add_filter( 'render_block_data', __NAMESPACE__ . '\update_block_attributes' );
add_filter( 'render_block', __NAMESPACE__ . '\customize_navigation_block_icon', 10, 2 );
add_filter( 'render_block_data', __NAMESPACE__ . '\update_child_block_attributes', 10, 3 );
add_filter( 'render_block_wporg/local-navigation-bar', __NAMESPACE__ . '\customize_navigation_block_icon' );

/**
* Registers the block using the metadata loaded from the `block.json` file.
Expand Down Expand Up @@ -48,7 +49,7 @@ function update_block_attributes( $block ) {
// Set layout values if they don't exist.
$default_layout = array(
'type' => 'flex',
'flexWrap' => 'wrap',
'flexWrap' => 'nowrap',
'justifyContent' => 'space-between',
);
if ( ! empty( $block['attrs']['layout'] ) ) {
Expand All @@ -69,47 +70,107 @@ function update_block_attributes( $block ) {
return $block;
}

/**
* Ensure the child navigation block uses the expected attributes.
*
* @param array $parsed_block The block being rendered.
* @param array $source_block An un-modified copy of $parsed_block, as it appeared in the source content.
* @param WP_Block|null $parent_block If this is a nested block, a reference to the parent block.
*
* @return array The updated block.
*/
function update_child_block_attributes( $parsed_block, $source_block, $parent_block ) {
if ( empty( $parsed_block['blockName'] ) ) {
return $parsed_block;
}

// If navigation block…
if ( 'core/navigation' === $parsed_block['blockName'] ) {
// with the local navigation bar as a parent…
if ( ! $parent_block || 'wporg/local-navigation-bar' !== $parent_block->name ) {
return $parsed_block;
}
// set the values we need.
$parsed_block['attrs']['icon'] = 'menu';
$parsed_block['attrs']['fontSize'] = 'small';
$parsed_block['attrs']['openSubmenusOnClick'] = true;
$parsed_block['attrs']['layout'] = array(
'type' => 'flex',
'orientation' => 'horizontal',
);

// Add an extra navigation block which is always collapsed, so that it
// can be swapped out when the section title + nav menu collide.
add_filter( 'render_block_core/navigation', __NAMESPACE__ . '\add_extra_navigation', 10, 3 );
}

return $parsed_block;
}

/**
* Inject an extra navigation block into the local nav, which is enabled when the section title is long.
*/
function add_extra_navigation( $block_content, $block ) {
remove_filter( 'render_block_core/navigation', __NAMESPACE__ . '\add_extra_navigation', 10, 3 );

// This menu should always be in the collapsed state.
$block['attrs']['overlayMenu'] = 'always';

if ( isset( $block['attrs']['className'] ) ) {
$block['attrs']['className'] .= ' wporg-is-collapsed-nav';
} else {
$block['attrs']['className'] = 'wporg-is-collapsed-nav';
}

$menu_block_content = do_blocks( '<!-- wp:navigation ' . wp_json_encode( $block['attrs'] ) . ' /-->' );
$menu_block_content = customize_navigation_block_icon( $menu_block_content );
return $block_content . $menu_block_content;
}

/**
* Replace a nested navigation block mobile button icon with a caret icon.
* Only applies if it has the 3 bar icon set, as this has an svg with <path> to update.
* Only applies if it has the 3 bar icon set, as this has an svg with <path> to update.
*
* @param string $block_content The block content.
* @param array $block The parsed block data.
*
* @return string
*/
function customize_navigation_block_icon( $block_content, $block ) {
if ( ! empty( $block['blockName'] ) && 'wporg/local-navigation-bar' === $block['blockName'] ) {
$tag_processor = new \WP_HTML_Tag_Processor( $block_content );
function customize_navigation_block_icon( $block_content ) {
$tag_processor = new \WP_HTML_Tag_Processor( $block_content );

if (
$tag_processor->next_tag( array(
'tag_name' => 'nav',
'class_name' => 'wp-block-navigation'
if (
$tag_processor->next_tag(
array(
'tag_name' => 'nav',
'class_name' => 'wp-block-navigation',
)
) ) {
if (
$tag_processor->next_tag( array(
'tag_name' => 'button',
'class_name' => 'wp-block-navigation__responsive-container-open'
) ) &&
$tag_processor->next_tag( 'path' )
) {
$tag_processor->set_attribute( 'd', 'M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' );
}

if (
$tag_processor->next_tag( array(
'tag_name' => 'button',
'class_name' => 'wp-block-navigation__responsive-container-close'
) ) &&
$tag_processor->next_tag( 'path' )
) {
$tag_processor->set_attribute( 'd', 'M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z' );
}

return $tag_processor->get_updated_html();
)
) {
if (
$tag_processor->next_tag(
array(
'tag_name' => 'button',
'class_name' => 'wp-block-navigation__responsive-container-open',
)
) &&
$tag_processor->next_tag( 'path' )
) {
$tag_processor->set_attribute( 'd', 'M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z' );
}

if (
$tag_processor->next_tag(
array(
'tag_name' => 'button',
'class_name' => 'wp-block-navigation__responsive-container-close',
)
) &&
$tag_processor->next_tag( 'path' )
) {
$tag_processor->set_attribute( 'd', 'M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z' );
}

return $tag_processor->get_updated_html();
}

return $block_content;
Expand Down
Loading

0 comments on commit 43dc4ec

Please sign in to comment.