-
Notifications
You must be signed in to change notification settings - Fork 8
AxisControl Component
Josh_soporte edited this page Jul 20, 2020
·
3 revisions
Include 4 boxes with a sync option and unit option on Inspector Control for the Block.
'/src/components/axis-control'
Renders axis control on Inspector Control:
const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { registerBlockType } = wp.blocks;
#Component
import AxisControl from '../components/axis-control/';
registerBlockType( 'maxi-blocks/example-block', {
title: __('Example block', 'maxi-blocks'),
icon: icon,
category: 'maxi-blocks',
attributes: {
axisControlExample: {
type: 'string',
default: JSON.stringify(mainObject)
}
},
edit: (props) => {
return (
<InspectorControls>
<AxisControl
values={props.attributes.axisControlExample}
onChange={value => props.setAttributes({ props.attributes.backgroundControlExample: value })}
breakpoint={deviceType}
/>
</InspectorControls>
)
}
save: () => {
return null;
}
} );
Value should content a class with next structure:
{
"label": "someLabel",
"general": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "px",
},
"xl": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "",
},
"l": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "",
},
"m": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "",
},
"s": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "",
},
"xs": {
"option-top": "",
"option-right": "",
"option-bottom": "",
"option-left": "",
"sync": true,
"unit": "",
}
}
Name | Type | Default | Required | Description |
---|---|---|---|---|
className | string |
maxi-axis-control |
N | Retrieve a class for the component |
values | string |
none |
Y | Block property with stringified object saved value |
onChange | function |
undefined |
Y | Retrieve input value to be saved |
disableImage/disableVideo | boolean |
false |
N | Toggle image/video options |
breakpoint | string |
none |
Y | Responsive stage |
disabeAuto | boolean |
false |
N | Disable checkbox with 'auto' options |