Tiny File Manager

Back Back Up Advanced Editor

import { Fragment } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import { BaseControl, ButtonGroup, Button } from '@wordpress/components';
import getAttribute from '../../../utils/get-attribute';
import getDeviceType from '../../../utils/get-device-type';

function GridItemSettings( content, props ) {
	const { attributes, setAttributes, name } = props;
	const { isGrid, sizing } = attributes;

if ( 'generateblocks/container' !== name || ! isGrid ) {
		return content;
	}

const device = getDeviceType();

function getValue( attributeName ) {
		return sizing && sizing[ getAttribute( attributeName, { attributes, deviceType: device }, true ) ]
			? sizing[ getAttribute( attributeName, { attributes, deviceType: device }, true ) ]
			: '';
	}

const widths = [
		{ value: '25%', label: '25' },
		{ value: '33.33%', label: '33' },
		{ value: '50%', label: '50' },
		{ value: '66.66%', label: '66' },
		{ value: '75%', label: '75' },
		{ value: '100%', label: '100' },
	];

return (
		<>
			<BaseControl
				id="gridItemWidth"
				label={ __( 'Grid Item Width (%)', 'generateblocks' ) }
				help={ __( 'More values can be set in the Sizing panel.', 'generateblocks' ) }
			>
				<ButtonGroup id="gridItemWidth" className="gblocks-flex-button-group">
					{
						Object.values( widths ).map( ( width, index ) => {
							return (
								<Fragment key={ 'gridItemWidth' + index }>
									<Button
										isPrimary={ width.value === getValue( 'width' ) }
										onClick={ () => setAttributes( { sizing: { [ getAttribute( 'width', { attributes, deviceType: device }, true ) ]: width.value } } ) }
									>
										{ width.label }
									</Button>
								</Fragment>
							);
						} )
					}
				</ButtonGroup>
			</BaseControl>

{ content }
		</>
	);
}

addFilter(
	'generateblocks.editor.settingsPanel',
	'generateblocks/grid/gridItemSettings',
	GridItemSettings
);