Make the justifications work, and add classnames.

WordPress · Mar 22, 2021 · 1aeb0a8 · 1aeb0a8
1 parent 430b010
commit 1aeb0a8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -169,27 +169,35 @@ function Navigation( {
 				</Button>
 
 				<div
+					className={ responsiveContainerClasses }
 					id={ `${ clientId }-modal` }
 					aria-hidden="true"
-					className={ responsiveContainerClasses }
 				>
-					<div tabIndex="-1" data-micromodal-close>
+					<div
+						className="wp-block-navigation__responsive-close"
+						tabIndex="-1"
+						data-micromodal-close
+					>
 						<div
+							className="wp-block-navigation__responsive-dialog"
 							role="dialog"
 							aria-modal="true"
 							aria-labelledby="modal-1-title"
 						>
 							<Button
+								className="wp-block-navigation__responsive-container-close"
 								aria-label="Close modal"
 								data-micromodal-close
-								className="wp-block-navigation__responsive-container-close"
 								onClick={ () => {
 									setResponsiveMenuOpen( false );
 								} }
 							>
 								X
 							</Button>
-							<div id={ `${ clientId }-modal-content` }>
+							<div
+								className="wp-block-navigation__responsive-container-content"
+								id={ `${ clientId }-modal-content` }
+							>
 								<ul { ...innerBlocksProps }></ul>
 							</div>
 						</div>

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -162,12 +162,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'
-		<div data-micromodal-trigger="modal-1" class="wp-block-navigation__responsive-container-open">Open Menu</div>
-	<div id="modal-1" aria-hidden="true" class="wp-block-navigation__responsive-container">
-		<div tabindex="-1" data-micromodal-close>
-			<div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
+		<div class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-1">Open Menu</div>
+	<div class="wp-block-navigation__responsive-container" id="modal-1" aria-hidden="true">
+		<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
+			<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
 					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close">X</button>
-				<div id="modal-1-content">
+				<div class="wp-block-navigation__responsive-content" id="modal-1-content">
 					<ul class="wp-block-navigation__container">%1$s</ul>
 				</div>
 			</div>

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -100,15 +100,21 @@
 	}
 }
 
+// The menu adds
+.wp-block-navigation__responsive-close {
+	width: 100%;
+}
+
 // Justification.
-.items-justified-center > ul {
+// These target the named container class to work even with the additional mobile menu containers.
+.items-justified-center .wp-block-navigation__container {
 	justify-content: center;
 }
 
-.items-justified-right > ul {
+.items-justified-right .wp-block-navigation__container {
 	justify-content: flex-end;
 }
 
-.items-justified-space-between > ul {
+.items-justified-space-between .wp-block-navigation__container {
 	justify-content: space-between;
 }