Mobile - Buttons block - Support content justification and ContentJus…

…tificationDropdown (#26166)
WordPress · Oct 17, 2020 · 7b3c4fe · 7b3c4fe
1 parent 225ff95
commit 7b3c4fe
Showing 1 changed file with 46 additions and 20 deletions.
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
@@ -8,27 +8,31 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import {
+ BlockControls,
  __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
  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 );
@@ -89,6 +93,12 @@ export default function ButtonsEdit( {
  selectBlock( insertedBlock.clientId );
  }, 200 );
 
+ function onChangeContentJustification( updatedValue ) {
+ setAttributes( {
+ contentJustification: updatedValue,
+ } );
+ }
+
  const renderFooterAppender = useRef( () => (
  <View style={ styles.appenderContainer }>
  <InnerBlocks.ButtonBlockAppender
@@ -104,24 +114,40 @@ export default function ButtonsEdit( {
  };
 
  return (
- <AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
- { resizeObserver }
- <InnerBlocks
- allowedBlocks={ ALLOWED_BLOCKS }
- template={ BUTTONS_TEMPLATE }
- renderFooterAppender={
- shouldRenderFooterAppender && renderFooterAppender.current
- }
- orientation="horizontal"
- horizontalAlignment={ align }
- onDeleteBlock={
- shouldDelete ? () => removeBlock( clientId ) : undefined
- }
- onAddBlock={ onAddNextButton }
- parentWidth={ maxWidth }
- marginHorizontal={ spacing }
- marginVertical={ spacing }
- />
- </AlignmentHookSettingsProvider>
+ <>
+ <BlockControls>
+ <ToolbarGroup>
+ <ToolbarItem>
+ { ( toggleProps ) => (
+ <ContentJustificationDropdown
+ toggleProps={ toggleProps }
+ value={ contentJustification }
+ onChange={ onChangeContentJustification }
+ />
+ ) }
+ </ToolbarItem>
+ </ToolbarGroup>
+ </BlockControls>
+ <AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
+ { resizeObserver }
+ <InnerBlocks
+ allowedBlocks={ ALLOWED_BLOCKS }
+ template={ BUTTONS_TEMPLATE }
+ renderFooterAppender={
+ shouldRenderFooterAppender &&
+ renderFooterAppender.current
+ }
+ orientation="horizontal"
+ horizontalAlignment={ contentJustification }
+ onDeleteBlock={
+ shouldDelete ? () => removeBlock( clientId ) : undefined
+ }
+ onAddBlock={ onAddNextButton }
+ parentWidth={ maxWidth }
+ marginHorizontal={ spacing }
+ marginVertical={ spacing }
+ />
+ </AlignmentHookSettingsProvider>
+ </>
  );
 }