Skip to content

ZIndexControl Component

Jump to bottom
Josh_soporte edited this page Jul 16, 2020 · 1 revision

Include a z-index option on Inspector Control for the Block.

Files path

'/src/components/zindex-control/'

Usage

Renders ZIndexControl on Inspector Control:

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

#Component
import ZIndexControl from '../components/zindex-control';

registerBlockType( 'maxi-blocks/example-block', {
    title: __('Example block', 'maxi-blocks'),
    icon: icon,
    category: 'maxi-blocks',
    // zIndex prop is a common attribute
    edit: (props) => {
        return (
            <InspectorControls>
                <ZIndexControl
                    zindex={props.attributes.zIndex}
                    onChange={value => setAttributes({zIndex: value})}
                    breakpoint={props.deviceType}
                />
            </InspectorControls>
        )
    }
    save: () => {
        return null;
    }
} );

Main Object

Value should content a class with next structure:

{
    "label": "Z-Index",
    "general": {
        "z-index": ""
    },
    "xl": {
        "z-index": ""
    },
    "l": {
        "z-index": ""
    },
    "m": {
        "z-index": ""
    },
    "s": {
        "z-index": ""
    },
    "xs": {
        "z-index": ""
    }
}

Props

Name Type Default Required Description
zindex string none Y Stringified object that contains all the information for the attribute
onChange function none Y Function that returns the new stringified input value
className string maxi-zindex-control N Extra class name
breakpoint string none Y Responsive stage
Clone this wiki locally