Skip to content

Commit 198ac2a

Browse files
jeryjjeryj
committed
Remove inline-container wrapper for custom overlays and simplify CSS
The wrapper could cause issues with how people target their css. Sibling + selectors could break if we add a new container. To avoid this, we use the existing markup and output the navigation custom overlay at the end of the block.
1 parent f3b9106 commit 198ac2a

2 files changed

Lines changed: 34 additions & 64 deletions

File tree

‎packages/block-library/src/navigation/index.php‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -645,12 +645,14 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
645645

646646
$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
647647

648-
// Set-up variables for the custom overlay experiment.
648+
// Set-up variables for the custom overlay experiment.
649649
// Values are set to "off" so they don't affect the default behavior.
650650
$is_overlay_experiment_enabled = static::is_overlay_experiment_enabled();
651651
$has_custom_overlay = false;
652652
$close_button_markup = '';
653653
$has_custom_overlay_close_block = false;
654+
$overlay_blocks_html = '';
655+
$custom_overlay_markup = '';
654656

655657
if( $is_overlay_experiment_enabled ) {
656658
// Check if an overlay template part is selected and render it.
@@ -730,20 +732,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
730732

731733
$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
732734

733-
// Build the content markup with inline and overlay containers.
734-
$content_markup = '';
735-
735+
736736
if ( $has_custom_overlay ) {
737-
// Render both inline and overlay blocks in separate containers.
738-
$content_markup = sprintf(
739-
'<div class="wp-block-navigation__inline-container">%1$s</div>
740-
<div class="wp-block-navigation__overlay-container" aria-hidden="true">%2$s</div>',
741-
$inner_blocks_html,
737+
$custom_overlay_markup = sprintf(
738+
'<div class="wp-block-navigation__overlay-container" aria-hidden="true">%s</div>',
742739
$overlay_blocks_html
743740
);
744-
} else {
745-
// No overlay selected, use existing behavior.
746-
$content_markup = $inner_blocks_html;
747741
}
748742

749743
// Show default close button for all responsive navigation,
@@ -765,12 +759,13 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
765759
%13$s
766760
<div class="wp-block-navigation__responsive-container-content" %14$s id="%1$s-content">
767761
%2$s
762+
%15$s
768763
</div>
769764
</div>
770765
</div>
771766
</div>',
772767
esc_attr( $modal_unique_id ),
773-
$content_markup,
768+
$inner_blocks_html,
774769
$toggle_aria_label_open,
775770
$toggle_aria_label_close,
776771
esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ),
@@ -782,7 +777,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
782777
$responsive_container_directives,
783778
$responsive_dialog_directives,
784779
$close_button_markup,
785-
$responsive_container_content_directives
780+
$responsive_container_content_directives,
781+
$has_custom_overlay ? $custom_overlay_markup : ''
786782
);
787783
}
788784

‎packages/block-library/src/navigation/style.scss‎

Lines changed: 24 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -353,8 +353,7 @@ button.wp-block-navigation-item__content {
353353
.wp-block-navigation__responsive-dialog,
354354
.wp-block-navigation .wp-block-page-list,
355355
.wp-block-navigation__container,
356-
.wp-block-navigation__responsive-container-content,
357-
.wp-block-navigation__inline-container {
356+
.wp-block-navigation__responsive-container-content {
358357
gap: inherit;
359358
}
360359

@@ -500,32 +499,6 @@ button.wp-block-navigation-item__content {
500499
align-items: var(--navigation-layout-align, initial);
501500
}
502501

503-
// Inline and overlay container visibility.
504-
// By default, show inline container and hide overlay container.
505-
.wp-block-navigation__inline-container {
506-
display: block;
507-
}
508-
509-
.wp-block-navigation__overlay-container {
510-
display: none;
511-
width: 100%;
512-
// Visually hidden and hidden from assistive tech by default.
513-
// aria-hidden is set in the markup.
514-
}
515-
516-
// When menu is closed (not open), show inline container and hide overlay container.
517-
&:not(.is-menu-open) {
518-
.wp-block-navigation__responsive-container-content {
519-
.wp-block-navigation__inline-container {
520-
display: block;
521-
}
522-
523-
.wp-block-navigation__overlay-container {
524-
display: none;
525-
}
526-
}
527-
}
528-
529502
// If the responsive wrapper is present but overlay is not open,
530503
// overlay styles shouldn't apply.
531504
&:not(.is-menu-open.is-menu-open) {
@@ -584,17 +557,6 @@ button.wp-block-navigation-item__content {
584557
// Inherit alignment settings from container.
585558
align-items: var(--navigation-layout-justification-setting, inherit);
586559

587-
// When menu is open at mobile, show overlay container and hide inline container.
588-
.wp-block-navigation__inline-container {
589-
display: none;
590-
}
591-
592-
.wp-block-navigation__overlay-container {
593-
display: block;
594-
width: 100%;
595-
// Remove aria-hidden when visible (handled by JavaScript/Interactivity API).
596-
}
597-
598560
// Always align the contents of the menu to the top.
599561
&,
600562
.wp-block-page-list,
@@ -667,6 +629,29 @@ button.wp-block-navigation-item__content {
667629
}
668630
}
669631

632+
// Custom overlay container visibility.
633+
// When there's a custom overlay, by default hide overlay container.
634+
&.disable-default-overlay {
635+
.wp-block-navigation__overlay-container {
636+
display: none;
637+
width: 100%;
638+
}
639+
640+
// When menu is open with custom overlay, hide default navigation and show overlay.
641+
&.is-menu-open {
642+
.wp-block-navigation__responsive-container-content {
643+
// Hides the content of the non-overlay navigation.
644+
> .wp-block-navigation__container {
645+
display: none;
646+
}
647+
648+
.wp-block-navigation__overlay-container {
649+
display: block;
650+
}
651+
}
652+
}
653+
}
654+
670655
@include break-small() {
671656
&:not(.hidden-by-default) {
672657
&:not(.is-menu-open) {
@@ -688,17 +673,6 @@ button.wp-block-navigation-item__content {
688673
left: 0;
689674
}
690675
}
691-
692-
// At desktop breakpoint, always show inline container and hide overlay container.
693-
.wp-block-navigation__responsive-container-content {
694-
.wp-block-navigation__inline-container {
695-
display: block;
696-
}
697-
698-
.wp-block-navigation__overlay-container {
699-
display: none;
700-
}
701-
}
702676
}
703677
}
704678

0 commit comments

Comments
 (0)