diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 9b6131d9c074dd..26151270856fb1 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -8,6 +8,7 @@ import { View } from 'react-native'; * WordPress dependencies */ import { + BlockControls, __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider, InnerBlocks, } from '@wordpress/block-editor'; @@ -15,20 +16,23 @@ 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> + </> ); }