From b77c411db447c7a724d6c691d119fb10b12b7202 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Sat, 17 Oct 2020 06:14:01 +0200
Subject: [PATCH] Mobile - Buttons block - Support content justification and
 ContentJustificationDropdown (#26166)

---
 .../block-library/src/buttons/edit.native.js  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index 7c35a762935c98..b190907b7b1eeb 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -7,25 +7,28 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { name as buttonBlockName } from '../button/';
 import styles from './editor.scss';
+import ContentJustificationDropdown from './content-justification-dropdown';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 export default function ButtonsEdit( {
-	attributes: { align },
+	attributes: { contentJustification },
 	clientId,
 	isSelected,
+	setAttributes,
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ maxWidth, setMaxWidth ] = useState( 0 );
@@ -85,6 +88,12 @@ export default function ButtonsEdit( {
 		selectBlock( insertedBlock.clientId );
 	}, 200 );
 
+	function onChangeContentJustification( updatedValue ) {
+		setAttributes( {
+			contentJustification: updatedValue,
+		} );
+	}
+
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
@@ -98,6 +107,19 @@ export default function ButtonsEdit( {
 
 	return (
 		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<ContentJustificationDropdown
+								toggleProps={ toggleProps }
+								value={ contentJustification }
+								onChange={ onChangeContentJustification }
+							/>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
+			</BlockControls>
 			{ resizeObserver }
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
@@ -106,7 +128,7 @@ export default function ButtonsEdit( {
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}
 				orientation="horizontal"
-				horizontalAlignment={ align }
+				horizontalAlignment={ contentJustification }
 				onDeleteBlock={
 					shouldDelete ? () => removeBlock( clientId ) : undefined
 				}