import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor';
import getAttribute from '../../../utils/get-attribute';
import typographyOptions from '../../../extend/inspector-control/controls/typography/options';
import getDeviceType from '../../../utils/get-device-type';
import AlignmentMatrixControl from '../../../extend/block-controls/controls/alignment-matrix-control';
export default ( { attributes, setAttributes } ) => {
const deviceType = getDeviceType();
const {
display,
displayTablet,
displayMobile,
flexDirection,
flexDirectionTablet,
flexDirectionMobile,
alignItems,
alignItemsTablet,
alignItemsMobile,
justifyContent,
justifyContentTablet,
justifyContentMobile,
} = attributes;
return (
<BlockControls group="block">
<AlignmentToolbar
value={ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType } ) }
onChange={ ( value ) => {
setAttributes( {
typography: {
[ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType }, true ) ]: value,
},
} );
} }
alignmentControls={ typographyOptions.alignments }
/>
<AlignmentMatrixControl
attributes={ {
display,
displayTablet,
displayMobile,
flexDirection,
flexDirectionTablet,
flexDirectionMobile,
alignItems,
alignItemsTablet,
alignItemsMobile,
justifyContent,
justifyContentTablet,
justifyContentMobile,
} }
setAttributes={ setAttributes }
/>
</BlockControls>
);
};