Collapse Text Alignment Toolbar for paragraphs and mobile

WordPress · Sep 7, 2018 · bec7890 · bec7890
1 parent 238e03b
commit bec7890
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -150,6 +150,7 @@ class ParagraphBlock extends Component {
 			<Fragment>
 				<BlockControls>
 					<AlignmentToolbar
+						isCollapsed
 						value={ align }
 						onChange={ ( nextAlign ) => {
 							setAttributes( { align: nextAlign } );

diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js
@@ -1,8 +1,14 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
+import { withViewportMatch } from '@wordpress/viewport';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -22,13 +28,18 @@ const ALIGNMENT_CONTROLS = [
 	},
 ];
 
-export default function AlignmentToolbar( { value, onChange } ) {
+function AlignmentToolbar( { isCollapsed, isLargeViewport, value, onChange } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
 
+	const activeAlignment = find( ALIGNMENT_CONTROLS, ( control ) => control.align === value );
+
 	return (
 		<Toolbar
+			isCollapsed={ isCollapsed || ! isLargeViewport }
+			icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
+			label={ __( 'Change Text Alignment' ) }
 			controls={ ALIGNMENT_CONTROLS.map( ( control ) => {
 				const { align } = control;
 				const isActive = ( value === align );
@@ -42,3 +53,5 @@ export default function AlignmentToolbar( { value, onChange } ) {
 		/>
 	);
 }
+
+export default withViewportMatch( { isLargeViewport: 'medium' } )( AlignmentToolbar );