OpacityControl Component

Include opacity options on Inspector Control for the Block.

Files path

'/src/components/opacity-control'

Usage

Renders OpacityControl on Inspector Control:

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

#Component
import OpacityControl from '../components/opacity-control/';

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

Props

Name	Type	Default	Required	Description
opacity	string	none	Y	Block property with stringified object saved value
className	string	maxi-opacity-control	N	Retrieve a class for the component
onChange	function	undefined	Y	Retrieve input value to be saved
breakpoint	string	none	Y	Responsive stage