Nav Block: Show justification controls for vertical variant (#30351)

* Show justification controls for vertical variant

- Don't limit controls to show only on horizontal
- This enables controls to show for both horiz and vert
- The vertical CSS specifies a block so will require tweaking
- Filter out space-between from vertical controls

* Fix aligments.

* Add attribute so Nav Editor can hide justify

- Adds an additional attribute to showJustifyControls to navigation
block so the Nav Editor screen can hide the controls, since that screen
is intended to create/edit nav menus and not format/style.

- Use 'showJustifyControls' since the positive is easier to reason and
there is already a 'showSubMenuIcon' attribute that also defaults to
true

* Right align text.

* Use hasItemJustificationCOntrols prop instead of attribute

* Restore property.

Co-authored-by: jasmussen <[email protected]>

packages/block-library/src/navigation/edit.js

@@ -53,7 +53,7 @@ function Navigation( {
 	updateInnerBlocks,
 	className,
 	hasSubmenuIndicatorSetting = true,
-	hasItemJustificationControls = attributes.orientation === 'horizontal',
+	hasItemJustificationControls = true,
 } ) {
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems
@@ -112,12 +112,18 @@ function Navigation( {
 		);
 	}
 
+	const justifyAllowedControls =
+		attributes.orientation === 'vertical'
+			? [ 'left', 'center', 'right' ]
+			: [ 'left', 'center', 'right', 'space-between' ];
+
 	return (
 		<>
 			<BlockControls>
 				{ hasItemJustificationControls && (
 					<JustifyToolbar
 						value={ attributes.itemsJustification }
+						allowedControls={ justifyAllowedControls }
 						onChange={ ( value ) =>
 							setAttributes( { itemsJustification: value } )
 						}

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

@@ -26,6 +26,8 @@
 	// Vertical layout
 	.is-vertical & {
 		display: block;
+		flex-direction: column;
+		align-items: flex-start;
 	}
 }
 
@@ -41,3 +43,18 @@
 .items-justified-space-between > ul {
 	justify-content: space-between;
 }
+
+// Vertical justification.
+.is-vertical.items-justified-center > ul {
+	align-items: center;
+}
+
+.is-vertical.items-justified-right > ul {
+	align-items: flex-end;
+
+	.wp-block-navigation-link,
+	.wp-block-pages-list__item {
+		margin-right: 0;
+		justify-content: flex-end;
+	}
+}