Fix rendering issue with responsive wrapper

WordPress · May 28, 2021 · b176815 · b176815
1 parent bdc5dab
commit b176815
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -78,24 +78,29 @@ function Navigation( {
 		clientId
 	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		orientation: attributes.orientation || 'horizontal',
-		renderAppender:
-			( isImmediateParentOfSelectedBlock &&
-				! selectedBlockHasDescendants ) ||
-			isSelected
-				? InnerBlocks.DefaultAppender
-				: false,
-		__experimentalAppenderTagName: 'li',
-		__experimentalCaptureToolbars: true,
-		// Template lock set to false here so that the Nav
-		// Block on the experimental menus screen does not
-		// inherit templateLock={ 'all' }.
-		templateLock: false,
-		__experimentalLayout: LAYOUT,
-		placeholder: <PlaceholderPreview />,
-	} );
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-navigation__container',
+		},
+		{
+			allowedBlocks: ALLOWED_BLOCKS,
+			orientation: attributes.orientation || 'horizontal',
+			renderAppender:
+				( isImmediateParentOfSelectedBlock &&
+					! selectedBlockHasDescendants ) ||
+				isSelected
+					? InnerBlocks.DefaultAppender
+					: false,
+			__experimentalAppenderTagName: 'li',
+			__experimentalCaptureToolbars: true,
+			// Template lock set to false here so that the Nav
+			// Block on the experimental menus screen does not
+			// inherit templateLock={ 'all' }.
+			templateLock: false,
+			__experimentalLayout: LAYOUT,
+			placeholder: <PlaceholderPreview />,
+		}
+	);
 
 	if ( isPlaceholderShown ) {
 		return (
@@ -161,13 +166,15 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<nav { ...innerBlocksProps }>
+			<nav { ...blockProps }>
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
-				></ResponsiveWrapper>
+				>
+					<div { ...innerBlocksProps }></div>
+				</ResponsiveWrapper>
 			</nav>
 		</>
 	);

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -175,7 +175,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// return early if they don't.
 	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
 		return sprintf(
-			'<nav %1$s><ul class="wp-block-navigation__container">%2$s</ul></nav>',
+			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
@@ -188,7 +188,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
-							<ul class="wp-block-navigation__container">%2$s</ul>
+							%2$s
 						</div>
 					</div>
 				</div>