Skip to content

BlockStylesControl Component

Josh_soporte edited this page Jul 15, 2020 · 1 revision

Block Styles Control

Includes Maxi styles selector on Inspector Control for the Block. Related with this article

Files path

'/src/components/block-styles-control'

Usage

Renders BlockStylesControl on Inspector Control:

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

#Component
import BlockStylesControl from '../components/block-style-control';

registerBlockType( 'maxi-blocks/example-block', {
	title: __('Example block', 'maxi-blocks'),
	icon: icon,
	category: 'maxi-blocks',
	attributes: {
	    blockStyle: {
            type: 'string',
            default: 'maxi-custom'
        },
        defaultBlockStyle: {
            type: 'string',
            default: 'maxi-def-light'
        },
	},
	edit: (props) => {
	    return (
	        <InspectorControls
                <BlockStylesControl
                    blockStyle={props.attributes.blockStyle}
                    onChangeBlockStyle={value => props.setAttributes({ props.attributes.blockStyle: value })}
                    defaultBlockStyle={props.attributes.defaultBlockStyle}
                    onChangeDefaultBlockStyle={props.value => setAttributes({ props.attributes.defaultBlockStyle: value })}
                    isFirstOnHierarchy={isFirstOnHierarchy}
                />
	        </InspectorControls>
	    )
	}
	save: () => {
	    return null;
	}
} );

Props

Name Type Default Required Description
blockStyle string none Y Input selector value
onChangeBlockStyle function none Y Function that retrieves value
defaultBlockStyle string none Y Input selector value
onChangeDefaultBlockStyle function none Y Function that retrieves value
isFirstOnHierarchy boolean none Y Determinates if is the first element on the canvas
Clone this wiki locally