From bec7890b7fd91e20bb506f8ad80f4e16860392ab Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 7 Sep 2018 12:14:12 +0100
Subject: [PATCH] Collapse Text Alignment Toolbar for paragraphs and mobile

---
 packages/block-library/src/paragraph/edit.js      |  1 +
 .../src/components/alignment-toolbar/index.js     | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 0d12b7f8e4d7db..597ddc38ddeb3f 100644
--- 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
index 73fac92bdd7686..87bff9fee249d0 100644
--- 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 );