Skip to content

Font Level Control Component

Josh_soporte edited this page Jul 15, 2020 · 2 revisions

Font Level control

Include a selector with paragraph and headers options on Inspector Control for the Block.

Files path

'/src/components/font-level-control'

Usage

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;
	}
} );

Props

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
Clone this wiki locally