Skip to content

ShapeDividerControl Component

Jump to bottom
Javad edited this page Jul 16, 2020 · 2 revisions

Include shape divider options on Inspector Control for the Block.

Files path

'/src/components/shape-divider-control'

Usage

Renders shape divider options on Inspector Control:

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

#Component
import ShapeDividerControl from '../components/shape-divider-control';

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

Main object

{
    "label": "Shape Divider",
    "top": {
        "height": "100",
        "heightUnit": "px",
        "opacity": 1,
        "shapeStyle": "",
        "colorOptions": {
            "color": "#000000",
            "defultColor": "#000000",
            "gradient": "",
            "defaultGradient": "",
            "gradientAboveBackground": false
        }
    },
    "bottom": {
        "height": "100",
        "heightUnit": "px",
        "opacity": 1,
        "shapeStyle": "",
        "colorOptions": {
            "color": "#000000",
            "defultColor": "#000000",
            "gradient": "",
            "defaultGradient": "",
            "gradientAboveBackground": false
        }
    }
}

Props

Name Type Default Required Description
shapeDividerOptions string none Y Stringified object with values
onChange function none Y A function that receives the value of the input on headers level
Clone this wiki locally