File "InspectorControls.js"

Full path: /home/webcknlt/admissiontell.com/wp-content/plugins/generateblocks/src/blocks/grid/components/InspectorControls.js
File size: 5.18 B (5.18 KB bytes)
MIME-type: text/x-java
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import { applyFilters } from '@wordpress/hooks';
import NumberControl from '../../../components/number-control';

export default ( props ) => {
	const {
		attributes,
		state,
		deviceType,
		setAttributes,
	} = props;

	const {
		verticalAlignment,
		verticalAlignmentTablet,
		verticalAlignmentMobile,
		horizontalAlignment,
		horizontalAlignmentTablet,
		horizontalAlignmentMobile,
	} = attributes;

	return (
		<>
			<NumberControl
				{ ...props }
				label={ __( 'Horizontal Gap', 'generateblocks' ) }
				attributeName="horizontalGap"
				unit="px"
				units={ [ 'px' ] }
				device={ deviceType }
				presets={
					[
						{
							unit: 'px',
							data: [ 20, 40, 60, 80 ],
						},
					]
				}
			/>

			<NumberControl
				{ ...props }
				label={ __( 'Vertical Gap', 'generateblocks' ) }
				attributeName="verticalGap"
				unit="px"
				units={ [ 'px' ] }
				device={ deviceType }
				presets={
					[
						{
							unit: 'px',
							data: [ 20, 40, 60, 80 ],
						},
					]
				}
			/>

			{ 'Desktop' === deviceType && (
				<Fragment>
					<SelectControl
						label={ __( 'Vertical Alignment', 'generateblocks' ) }
						value={ verticalAlignment }
						options={ [
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Top', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Bottom', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								verticalAlignment: value,
							} );
						} }
					/>

					<SelectControl
						label={ __( 'Horizontal Alignment', 'generateblocks' ) }
						value={ horizontalAlignment }
						options={ [
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Left', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Right', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								horizontalAlignment: value,
							} );
						} }
					/>
				</Fragment>
			) }

			{ 'Tablet' === deviceType && (
				<Fragment>
					<SelectControl
						label={ __( 'Vertical Alignment', 'generateblocks' ) }
						help={ __( 'Align grid items. Removes same height columns and overrides grid item content alignment.', 'generateblocks' ) }
						value={ verticalAlignmentTablet }
						options={ [
							{ label: __( 'Inherit', 'generateblocks' ), value: 'inherit' },
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Top', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Bottom', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								verticalAlignmentTablet: value,
							} );
						} }
					/>

					<SelectControl
						label={ __( 'Horizontal Alignment', 'generateblocks' ) }
						value={ horizontalAlignmentTablet }
						options={ [
							{ label: __( 'Inherit', 'generateblocks' ), value: 'inherit' },
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Left', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Right', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								horizontalAlignmentTablet: value,
							} );
						} }
					/>
				</Fragment>
			) }

			{ 'Mobile' === deviceType && (
				<Fragment>
					<SelectControl
						label={ __( 'Vertical Alignment', 'generateblocks' ) }
						help={ __( 'Align grid items. Removes same height columns and overrides grid item content alignment.', 'generateblocks' ) }
						value={ verticalAlignmentMobile }
						options={ [
							{ label: __( 'Inherit', 'generateblocks' ), value: 'inherit' },
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Top', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Bottom', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								verticalAlignmentMobile: value,
							} );
						} }
					/>

					<SelectControl
						label={ __( 'Horizontal Alignment', 'generateblocks' ) }
						value={ horizontalAlignmentMobile }
						options={ [
							{ label: __( 'Inherit', 'generateblocks' ), value: 'inherit' },
							{ label: __( 'Default', 'generateblocks' ), value: '' },
							{ label: __( 'Left', 'generateblocks' ), value: 'flex-start' },
							{ label: __( 'Center', 'generateblocks' ), value: 'center' },
							{ label: __( 'Right', 'generateblocks' ), value: 'flex-end' },
						] }
						onChange={ ( value ) => {
							setAttributes( {
								horizontalAlignmentMobile: value,
							} );
						} }
					/>
				</Fragment>
			) }

			{ applyFilters( 'generateblocks.editor.controls', '', 'gridLayout', props, state ) }
		</>
	);
};