Skip to content

TextShadowControl Component

Josh_soporte edited this page Jul 15, 2020 · 1 revision

Include options for text shadow on Inspector Control for the Block.

Files path

'/src/components/text-shadow-control'

Usage

Renders TextShadowControl on Inspector Control:

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

#Component
import TextShadowControl from '../components/text-shadow-control/';

registerBlockType( 'maxi-blocks/example-block', {
    title: __('Example block', 'maxi-blocks'),
    icon: icon,
    category: 'maxi-blocks',
    attributes: {
        textShadowExample: {
            type: 'string',
            default: 'none'
        },
    },
    edit: (props) => {
        return (
            <InspectorControls>
                <TextShadow
                    value={props.attributes.textShadowExample}
                    onChangeValue={value => props.setAttributes({props.attributes.textShadowExample: value})}
                    defaultColor='#000'
                />
            </InspectorControls>
        )
    }
    save: () => {
        return null;
    }
} );

Props

Name Type Default Required Description
value number '' Y Defines the value of the text shadow
onChangeValue function undefined Y Retrieve input value to be saved
defaultColor string none N Send a default color in case is reset
Clone this wiki locally