Nav Block: adds basic items justification controls

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escape } from 'lodash';
+import { escape, upperFirst } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -25,6 +26,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Spinner,
+	Toolbar,
 	ToolbarGroup,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -37,6 +39,7 @@ import { __ } from '@wordpress/i18n';
 import useBlockNavigator from './use-block-navigator';
 import BlockNavigationList from './block-navigation-list';
 import BlockColorsStyleSelector from './block-colors-selector';
+import * as navIcons from './icons';
 
 function Navigation( {
 	attributes,
@@ -84,18 +87,30 @@ function Navigation( {
 	//
 	// HANDLERS
 	//
+	function handleItemsAlignment( align ) {
+		return () => {
+			const itemsJustification = attributes.itemsJustification === align ? undefined : align;
+			setAttributes( {
+				itemsJustification,
+			} );
+		};
+	}
 
-	const handleCreateEmpty = () => {
+	function handleCreateEmpty() {
 		const emptyNavLinkBlock = createBlock( 'core/navigation-link' );
 		updateNavItemBlocks( [ emptyNavLinkBlock ] );
-	};
+	}
 
-	const handleCreateFromExistingPages = () => {
+	function handleCreateFromExistingPages() {
 		updateNavItemBlocks( defaultPagesNavigationItems );
-	};
+	}
 
 	const hasPages = hasResolvedPages && pages && pages.length;
 
+	const blockClassNames = classnames( 'wp-block-navigation', {
+		[ `items-justification-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
+	} );
+
 	// If we don't have existing items or the User hasn't
 	// indicated they want to automatically add top level Pages
 	// then show the Placeholder
@@ -152,13 +167,24 @@ function Navigation( {
 	return (
 		<Fragment>
 			<BlockControls>
+				<Toolbar
+					icon={ attributes.itemsJustification ? navIcons[ `justify${ upperFirst( attributes.itemsJustification ) }Icon` ] : navIcons.justifyLeftIcon }
+					label={ __( 'Change items justification' ) }
+					isCollapsed
+					controls={ [
+						{ icon: navIcons.justifyLeftIcon, title: __( 'Justify items left' ), isActive: 'left' === attributes.itemsJustification, onClick: handleItemsAlignment( 'left' ) },
+						{ icon: navIcons.justifyCenterIcon, title: __( 'Justify items center' ), isActive: 'center' === attributes.itemsJustification, onClick: handleItemsAlignment( 'center' ) },
+						{ icon: navIcons.justifyRightIcon, title: __( 'Justify items right' ), isActive: 'right' === attributes.itemsJustification, onClick: handleItemsAlignment( 'right' ) },
+					] }
+				/>
 				<ToolbarGroup>
 					{ navigatorToolbarButton }
 				</ToolbarGroup>
 				<BlockColorsStyleSelector
 					value={ TextColor.color }
 					onChange={ TextColor.setColor }
 				/>
+
 			</BlockControls>
 			{ navigatorModal }
 			<InspectorControls>
@@ -181,7 +207,7 @@ function Navigation( {
 				</PanelBody>
 			</InspectorControls>
 			<TextColor>
-				<div className="wp-block-navigation">
+				<div className={ blockClassNames }>
 					{ ! hasExistingNavItems && isRequestingPages && <><Spinner /> { __( 'Loading Navigation…' ) } </> }
 
 					<InnerBlocks

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

@@ -2,11 +2,27 @@
 // @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block.
 // When that happens, leverage that instead of the following overrides.
 [data-type="core/navigation"] {
+
+	.wp-block-navigation .block-editor-inner-blocks {
+		flex: 1; // expand to fill available space required for justification
+	}
+
 	// 1. Reset margins on immediate innerblocks container.
 	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout {
 		margin-left: 0;
 		margin-right: 0;
+	}
+
+	.wp-block-navigation.items-justification-left .block-editor-inner-blocks > .block-editor-block-list__layout {
+		justify-content: flex-start;
+	}
+
+	.wp-block-navigation.items-justification-center .block-editor-inner-blocks > .block-editor-block-list__layout {
+		justify-content: center;
+	}
 
+	.wp-block-navigation.items-justification-right .block-editor-inner-blocks > .block-editor-block-list__layout {
+		justify-content: flex-end;
 	}
 
 	// 2. Remove paddings on subsequent immediate children.

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const justifyLeftIcon = (
+	<SVG width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11 16v-3h10v-2H11V8l-4 4 4 4zM5 4H3v16h2V4z" />
+	</SVG>
+);
+
+export const justifyCenterIcon = (
+	<SVG width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M5 8v3H1v2h4v3l4-4-4-4zm14 8v-3h4v-2h-4V8l-4 4 4 4zM13 4h-2v16h2V4z" />
+	</SVG>
+);
+
+export const justifyRightIcon = (
+	<SVG width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M13 8v3H3v2h10v3l4-4-4-4zm8-4h-2v16h2V4z" /></SVG>
+);

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

@@ -15,7 +15,7 @@
 function build_css_colors( $attributes ) {
 	// CSS classes.
 	$colors = array(
-		'css_classes'   => [],
+		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
@@ -52,8 +52,10 @@ function render_block_navigation( $attributes, $content, $block ) {
 	$colors          = build_css_colors( $attributes );
 	$classes         = array_merge(
 		$colors['css_classes'],
-		[ 'wp-block-navigation' ],
-		isset( $attributes['className'] ) ? [ $attributes['className'] ] : []
+		array( 'wp-block-navigation' ),
+		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
+		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
+		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
 	);
 	$class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) );
 	$style_attribute = $colors['inline_styles'] ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : '';
@@ -127,17 +129,20 @@ function register_block_core_navigation() {
 		'core/navigation',
 		array(
 			'attributes'      => array(
-				'className'        => array(
+				'className'          => array(
 					'type' => 'string',
 				),
-				'automaticallyAdd' => array(
+				'automaticallyAdd'   => array(
 					'type'    => 'boolean',
 					'default' => false,
 				),
-				'textColor'        => array(
+				'textColor'          => array(
 					'type' => 'string',
 				),
-				'customTextColor'  => array(
+				'customTextColor'    => array(
+					'type' => 'string',
+				),
+				'itemsJustification' => array(
 					'type' => 'string',
 				),
 			),

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

@@ -142,6 +142,17 @@
 		}
 	}
 
+	&.items-justified-left > ul {
+		justify-content: flex-start;
+	}
+
+	&.items-justified-center > ul {
+		justify-content: center;
+	}
+
+	&.items-justified-right > ul {
+		justify-content: flex-end;
+	}
 }
 
 .is-style-dark > ul > li > ul {