-
Notifications
You must be signed in to change notification settings - Fork 8
Font Level Control Component
Josh_soporte edited this page Jul 15, 2020
·
2 revisions
Include a selector with paragraph and headers options on Inspector Control for the Block.
'/src/components/font-level-control'
Renders a selector with headers options on Inspector Control:
const {
InspectorControls,
} = wp.blockEditor;
const { registerBlockType } = wp.blocks;
#Component
import FontLevelControl from '../components/font-level-control';
registerBlockType( 'maxi-blocks/example-block', {
title: __('Example block', 'maxi-blocks'),
icon: icon,
category: 'maxi-blocks',
attributes: {
titleLevel: {
type: 'string',
default: 'h2'
},
},
edit: (props) => {
return (
<InspectorControls>
<FontLevel
value={props.attributes.titleLevel}
onChange={value => props.setAttributes({ props.attributes.titleLevel: value })}
fontOptions={props.attributes.someFontOptions}
fontOptionsHover={props.attributes.someFontOptionsHover}
marginOptions={props.attributes.someMarginOptions}
/>
</InspectorControls>
)
}
save: () => {
return null;
}
} );
Name | Type | Default | Required | Description |
---|---|---|---|---|
className | string |
maxi-fontlevel-control |
N | Selector input class name |
value | string |
'' |
Y | Block property with saved value |
onChange | function |
'' |
Y | A function that receives the value of the input on headers level |
fontOptions | string |
none |
Y | In case the object targeted is under the scope of TypographyControl, this option make them compatible and to don't lose the changes done |
fontOptionsHover | string |
none |
N | In case the object targeted is under the scope of TypographyControl, this option make them compatible and to don't lose the changes done |
marginOptions | string |
none |
Y | As margin defaults changes with font level, is necessary to have this prop to adequate to the new font level |