-
Notifications
You must be signed in to change notification settings - Fork 8
BlockStylesControl Component
Josh_soporte edited this page Jul 15, 2020
·
1 revision
Includes Maxi styles selector on Inspector Control for the Block. Related with this article
'/src/components/block-styles-control'
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;
}
} );
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 |