Skip to content

Box Shadow Control Component

Jump to bottom
Josh_soporte edited this page Jul 15, 2020 · 4 revisions

Include box shadow options on Inspector Control for the Block.

Files path

'/src/components/box-shadow-control'

Usage

Renders popover control on Inspector Control:

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

#Component
import BoxShadowControl from '../components/box-shadow-control';

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

#Main prop: boxShadowOptions

{
    "label": "Box Shadow",
    "general": {
        "shadowColor": "#ffffff",
        "defaultShadowColor": "#ffffff",
        "shadowHorizontal": 0,
        "shadowVertical": 0,
        "shadowBlur": 0,
        "shadowSpread": 0
    },
    "xl": {
        "shadowColor": "",
        "defaultShadowColor": "",
        "shadowHorizontal": "",
        "shadowVertical": "",
        "shadowBlur": "",
        "shadowSpread": ""
    },
    "l": {
        "shadowColor": "",
        "defaultShadowColor": "",
        "shadowHorizontal": "",
        "shadowVertical": "",
        "shadowBlur": "",
        "shadowSpread": ""
    },
    "m": {
        "shadowColor": "",
        "defaultShadowColor": "",
        "shadowHorizontal": "",
        "shadowVertical": "",
        "shadowBlur": "",
        "shadowSpread": ""
    },
    "s": {
        "shadowColor": "",
        "defaultShadowColor": "",
        "shadowHorizontal": "",
        "shadowVertical": "",
        "shadowBlur": "",
        "shadowSpread": ""
    },
    "xs": {
        "shadowColor": "",
        "defaultShadowColor": "",
        "shadowHorizontal": "",
        "shadowVertical": "",
        "shadowBlur": "",
        "shadowSpread": ""
    }
}

Props

Name Type Default Required Description
boxShadow string none Y Block property with stringified object saved value
onChange function undefined Y Retrieve input value to be saved
className string maxi-shadow-control N Classes for the component
breakpoint string none Y Responsive stage
Clone this wiki locally