Tiny File Manager

Back Back Up Advanced Editor

import { __ } from '@wordpress/i18n';
import { MenuGroup, MenuItem } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore, useSetting } from '@wordpress/block-editor';
import { alignNone, stretchWide, stretchFullWidth } from '@wordpress/icons';
import { applyFilters } from '@wordpress/hooks';

export function BlockWidth( { align, onChange, clientId } ) {
	const hasWideSize = useSetting( 'layout.wideSize' );
	const { themeSupportsAlignWide } = useSelect(
		( select ) => {
			const { getSettings } = select( blockEditorStore );
			return {
				themeSupportsAlignWide: getSettings()?.alignWide,
			};
		},
		[]
	);
	const {
		getBlockRootClientId,
	} = useSelect( ( select ) => select( blockEditorStore ), [] );

const removeBlockWidthOptions = applyFilters(
		'generateblocks.editor.removeBlockWidthOptions',
		false,
		{ clientId }
	);

if ( ( ! themeSupportsAlignWide && ! hasWideSize ) || removeBlockWidthOptions ) {
		return null;
	}

const parentBlockId = getBlockRootClientId( clientId );

if ( parentBlockId ) {
		return null;
	}

const options = [
		{
			label: __( 'Default', 'generateblocks' ),
			value: '',
			icon: alignNone,
		},
		{
			label: __( 'Wide', 'generateblocks' ),
			value: 'wide',
			icon: stretchWide,
		},
		{
			label: __( 'Full', 'generateblocks' ),
			value: 'full',
			icon: stretchFullWidth,
		},
	];

return (
		<MenuGroup label={ __( 'Block Width', 'generateblocks' ) }>
			{ options.map( ( option ) => {
				return (
					<MenuItem
						key={ option.value }
						isPressed={ align === option.value }
						onClick={ () => onChange( option.value ) }
						icon={ option.icon }
					>
						{ option.label }
					</MenuItem>
				);
			} ) }
		</MenuGroup>
	);
}