Try: Allow space between on menu items.

packages/block-library/src/buttons/content-justification-dropdown.js

@@ -3,29 +3,21 @@
  */
 import { DropdownMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	contentJustificationCenterIcon,
-	contentJustificationLeftIcon,
-	contentJustificationRightIcon,
-} from './icons';
+import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
 
 const DEFAULT_ALLOWED_VALUES = [ 'left', 'center', 'right' ];
 
 const CONTROLS = {
 	left: {
-		icon: contentJustificationLeftIcon,
+		icon: justifyLeft,
 		title: __( 'Justify content left' ),
 	},
 	center: {
-		icon: contentJustificationCenterIcon,
+		icon: justifyCenter,
 		title: __( 'Justify content center' ),
 	},
 	right: {
-		icon: contentJustificationRightIcon,
+		icon: justifyRight,
 		title: __( 'Justify content right' ),
 	},
 };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { upperFirst } from 'lodash';
+import { upperFirst, replace } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -24,7 +24,12 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useBlockNavigator from './use-block-navigator';
-import * as navIcons from './icons';
+import {
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+	justifySpaceBetween,
+} from '@wordpress/icons';
 import NavigationPlaceholder from './placeholder';
 
 function Navigation( {
@@ -41,15 +46,27 @@ function Navigation( {
 	hasItemJustificationControls = true,
 	hasListViewModal = true,
 } ) {
+	const navIcons = {
+		justifyLeft,
+		justifyCenter,
+		justifyRight,
+		justifySpaceBetween,
+	};
+
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems
 	);
 
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
+	// We replace B with -b to allow spaceBetween to become space-between as a classname.
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
-			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
+			[ `items-justified-${ replace(
+				attributes.itemsJustification,
+				'B',
+				'-b'
+			) }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
 		} ),
 	} );
@@ -120,34 +137,42 @@ function Navigation( {
 								? navIcons[
 										`justify${ upperFirst(
 											attributes.itemsJustification
-										) }Icon`
+										) }`
 								  ]
-								: navIcons.justifyLeftIcon
+								: navIcons.justifyLeft
 						}
 						label={ __( 'Change items justification' ) }
 						isCollapsed
 						controls={ [
 							{
-								icon: navIcons.justifyLeftIcon,
+								icon: justifyLeft,
 								title: __( 'Justify items left' ),
 								isActive:
 									'left' === attributes.itemsJustification,
 								onClick: handleItemsAlignment( 'left' ),
 							},
 							{
-								icon: navIcons.justifyCenterIcon,
+								icon: justifyCenter,
 								title: __( 'Justify items center' ),
 								isActive:
 									'center' === attributes.itemsJustification,
 								onClick: handleItemsAlignment( 'center' ),
 							},
 							{
-								icon: navIcons.justifyRightIcon,
+								icon: justifyRight,
 								title: __( 'Justify items right' ),
 								isActive:
 									'right' === attributes.itemsJustification,
 								onClick: handleItemsAlignment( 'right' ),
 							},
+							{
+								icon: justifySpaceBetween,
+								title: __( 'Space between items' ),
+								isActive:
+									'spaceBetween' ===
+									attributes.itemsJustification,
+								onClick: handleItemsAlignment( 'spaceBetween' ),
+							},
 						] }
 					/>
 				) }

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

@@ -18,3 +18,7 @@
 .items-justified-right > ul {
 	justify-content: flex-end;
 }
+
+.items-justified-space-between > ul {
+	justify-content: space-between;
+}

packages/components/src/dropdown-menu/index.js

@@ -9,6 +9,7 @@ import { flatMap, isEmpty, isFunction } from 'lodash';
  */
 import { DOWN } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
+import { menu } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -37,7 +38,7 @@ function DropdownMenu( {
 	children,
 	className,
 	controls,
-	icon = 'menu',
+	icon = menu,
 	label,
 	popoverProps,
 	toggleProps,

packages/icons/src/index.js

@@ -92,6 +92,10 @@ export { default as image } from './library/image';
 export { default as info } from './library/info';
 export { default as insertAfter } from './library/insert-after';
 export { default as insertBefore } from './library/insert-before';
+export { default as justifyLeft } from './library/justify-left';
+export { default as justifyCenter } from './library/justify-center';
+export { default as justifyRight } from './library/justify-right';
+export { default as justifySpaceBetween } from './library/justify-space-between';
 export { default as keyboardClose } from './library/keyboard-close';
 export { default as keyboardReturn } from './library/keyboard-return';
 export { default as layout } from './library/layout';

packages/icons/src/library/justify-center.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyCenter = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20 9h-7.2V4h-1.6v5H4v6h7.2v5h1.6v-5H20z" />
+	</SVG>
+);
+
+export default justifyCenter;

packages/icons/src/library/justify-left.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 9v6h11V9H9zM4 20h1.5V4H4v16z" />
+	</SVG>
+);
+
+export default justifyLeft;

packages/icons/src/library/justify-right.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 15h11V9H4v6zM18.5 4v16H20V4h-1.5z" />
+	</SVG>
+);
+
+export default justifyRight;

packages/icons/src/library/justify-space-between.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifySpaceBetween = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 15h6V9H9v6zm-5 5h1.5V4H4v16zM18.5 4v16H20V4h-1.5z" />
+	</SVG>
+);
+
+export default justifySpaceBetween;

packages/icons/src/library/menu.js

@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const menu = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M17 7V5H3v2h14zm0 4V9H3v2h14zm0 4v-2H3v2h14z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M5 5.5V7h14V5.5H5zM5 13h14v-1.5H5V13zm0 6h14v-1.5H5V19z" />
 	</SVG>
 );