Fix submenu justification and spacer orientation. (#36340)

* Fix submenu justification and spacer orientation. * Add back justification classes in the front end. * Add default orientation for Spacer. * Remove legacy attributes and styles. * Fix php lint errors. * Mark orientation change as not persistent.
WordPress · Nov 15, 2021 · fed9471 · fed9471
1 parent 0ca945e
commit fed9471
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 35 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -103,11 +103,10 @@ function Navigation( {
 	customAppender: CustomAppender = null,
 } ) {
 	const {
-		itemsJustification,
 		openSubmenusOnClick,
-		orientation,
 		overlayMenu,
 		showSubmenuIcon,
+		layout: { justifyContent, orientation = 'horizontal' } = {},
 	} = attributes;
 
 	const [ areaMenu, setAreaMenu ] = useEntityProp(
@@ -150,7 +149,11 @@ function Navigation( {
 		[ clientId ]
 	);
 	const hasExistingNavItems = !! innerBlocks.length;
-	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		replaceInnerBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
 	const [
 		hasSavedUnsavedInnerBlocks,
@@ -189,8 +192,8 @@ function Navigation( {
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
-			[ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification,
-			'is-vertical': orientation === 'vertical',
+			'items-justified-right': justifyContent === 'right',
+			'items-justified-space-between': justifyContent === 'space-between',
 			'is-responsive': 'never' !== overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -220,6 +223,15 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
+	// Spacer block needs orientation from context. This is a patch until
+	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
+	useEffect( () => {
+		if ( orientation ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { orientation } );
+		}
+	}, [ orientation ] );
+
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -283,7 +283,6 @@ $color-control-label-height: 20px;
 		}
 
 		// Hide entirely when vertical.
-		.is-vertical.is-selected &,
 		.wp-block-navigation.is-selected .is-small &,
 		.wp-block-navigation.is-selected .is-medium & {
 			display: none;
@@ -321,19 +320,12 @@ $color-control-label-height: 20px;
 
 	// Show stacked for the vertical navigation, or small placeholders.
 	.is-small &,
-	.is-medium &,
-	.is-vertical & {
+	.is-medium & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
 		}
 	}
 
-	// Both selected and vertical.
-	.is-selected.is-vertical & {
-		display: inline-flex; // This makes the white box not take up all available space.
-		padding: $grid-unit-15;
-	}
-
 	.wp-block-navigation-placeholder__icon {
 		margin-right: $grid-unit-15;
 		height: $button-size; // Prevents jumpiness.
@@ -354,11 +346,6 @@ $color-control-label-height: 20px;
 			margin-right: $grid-unit-05;
 		}
 
-		.is-vertical & {
-			margin-bottom: $grid-unit-05;
-			margin-left: 0;
-		}
-
 		// Show only in big placeholders.
 		display: none;
 		.is-large & {
@@ -367,21 +354,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-// When block is vertical.
-.is-vertical .wp-block-navigation-placeholder,
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	min-height:
-		$icon-size +
-		( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3;
-}
-
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	flex-direction: column;
-	align-items: flex-start;
-}
-
 .wp-block-navigation-placeholder__actions {
 	display: flex;
 	font-size: $default-font-size;

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -179,12 +179,24 @@ function( $block ) {
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
+
+	// Restore legacy classnames for submenu positioning.
+	$layout_class = '';
+	if ( isset( $attributes['layout']['justifyContent'] ) ) {
+		if ( 'right' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-right';
+		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-space-between';
+		}
+	}
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		$is_responsive_menu ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array(),
+		$layout_class ? array( $layout_class ) : array()
 	);
 
 	$inner_blocks_html = '';