Updates for CSS and usage clarification

- Simplifies CSS for toolbar to be generic, not just ul tag.
- Adds CSS back to navigation block since it is needed for > ul
- Updated documentation for using controls

packages/block-editor/src/components/justify-toolbar/README.md

@@ -2,7 +2,9 @@
 
 The `JustifyToolbar` component renders a toolbar that displays justify options for the selected block.
 
-This component is used in the Navigation block to set the flex justification for the elements, allowing for justify `left`, `center`, `right`, and `space-between`.
+This component is used to set the flex justification for the elements in the block, allowing to justify `left`, `center`, `right`, and `space-between`. In comparison, the alignment options are for the block itself.
+
+See the Navigation block for an example usage.
 
 ## Development guidelines
 
@@ -13,19 +15,29 @@ Renders an justification toolbar with options.
 ```jsx
 import { JustifyToolbar } from '@wordpress/block-editor';
 
-const MyJustifyToolbar = () => (
+const MyJustifyToolbar = ( { attributes, setAttributes } ) => (
 	<BlockControls>
 		<JustifyToolbar
-			value={ textAlign }
-			onChange={ ( nextAlign ) => {
-				setAttributes( { textAlign: nextAlign } );
+			value={ attributes.justification }
+			onChange={ ( next ) => {
+				setAttributes( { justfication: next } );
 			} }
 		/>
 	</BlockControls>
 );
 ```
+
+**NOTE:** The justfify toolbar does not add any classes to your component, you must do this using the `setAttributes` function. The toolbar does define the following classnames you should use:
+
+	items-justified-left
+	items-justified-center
+	items-justified-right
+	items-justified-space-between
+
+
 _Note:_ In this example that we render `JustifyToolbar` as a child of the `BlockControls` component.
 
+
 ### Props
 
 #### `allowedControls`

packages/block-editor/src/components/justify-toolbar/style.scss

@@ -1,16 +1,16 @@
 // Justification.
-.items-justified-left > ul {
+.items-justified-left {
 	justify-content: flex-start;
 }
 
-.items-justified-center > ul {
+.items-justified-center {
 	justify-content: center;
 }
 
-.items-justified-right > ul {
+.items-justified-right {
 	justify-content: flex-end;
 }
 
-.items-justified-space-between > ul {
+.items-justified-space-between {
 	justify-content: space-between;
 }

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

@@ -5,3 +5,15 @@
 		background-color: $white;
 	}
 }
+
+.items-justified-center > ul {
+	justify-content: center;
+}
+
+.items-justified-right > ul {
+	justify-content: flex-end;
+}
+
+.items-justified-space-between > ul {
+	justify-content: space-between;
+}