Skip to content

Alignment Control Component

Jump to bottom
Josh_soporte edited this page Jul 16, 2020 · 8 revisions

Include alignment options on Inspector Control for the Block.

Files path

'/src/components/alignment-control'

Usage

Renders alignment options on Inspector Control:

const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { registerBlockType } = wp.blocks;

#Component
import AlignmentControl from '../components/alignment-control';

registerBlockType( 'maxi-blocks/example-block', {
    title: __('Example block', 'maxi-blocks'),
    icon: icon,
    category: 'maxi-blocks',
    attributes: {
        alignmentExample: {
            type: 'string',
            default: JSON.stringify(mainObject)
        }
    },
    edit: (props) => {
        return (
            <InspectorControls>
                <AlignmentControl
                    value={prop.attributes.alignmentExample}
                    onChange={value => prop.setAttributes({alignmentExample: value})}
                    breakpoint={props.attributes.deviceType}
                />
            </InspectorControls>
        )
    }
    save: () => {
        return null;
    }
} );

Main object

{
    "label": "Alignment",
    "general": {
        "alignment": "left"
    },
    "xl": {
        "alignment": ""
    },
    "l": {
        "alignment": ""
    },
    "m": {
        "alignment": ""
    },
    "s": {
        "alignment": ""
    },
    "xs": {
        "alignment": ""
    }
}

Props

Name Type Default Required Description
alignment string none Y Block property with saved value
onChange function none Y A function that receives the value of the input on headers level
label string '' N Label to show in case is required
disableLeft boolean false N Disables left button
disableCenter boolean false N Disables center button
disableRight boolean false N Disables right button
disableJustify boolean false N Disables justify button
breakpoint string none Y Responsive stage
Clone this wiki locally