Tiny File Manager

Back Back Up Advanced Editor

import ToolbarGroup from './ToolbarGroup';
import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor';
import isFlexItem from '../../../utils/is-flex-item';
import getAttribute from '../../../utils/get-attribute';
import typographyOptions from '../../../extend/inspector-control/controls/typography/options';
import getDeviceType from '../../../utils/get-device-type';

export default function HeadlineBlockControls( props ) {
	const {
		attributes,
		setAttributes,
	} = props;

const {
		element,
		isCaption,
		display,
		displayTablet,
		displayMobile,
	} = attributes;

const device = getDeviceType();

return (
		<BlockControls>
			<ToolbarGroup
				setAttributes={ setAttributes }
				element={ element }
				isCaption={ isCaption }
			/>

{ ! isFlexItem( { device, display, displayTablet, displayMobile } ) &&
				<>
					<AlignmentToolbar
						value={ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType: device } ) }
						onChange={ ( value ) => {
							setAttributes( {
								typography: {
									[ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType: device }, true ) ]: value,
								},
							} );
						} }
						alignmentControls={ typographyOptions.alignments }
					/>
				</>
			}
		</BlockControls>
	);
}