Skip to content

Instantly share code, notes, and snippets.

@adamclasic

adamclasic/WP Gutenberg inspector inputs examples.js

Last active February 5, 2021 15:00
Show Gist options
  • Save adamclasic/3a2f3b2d22b7a0f9bd98b369a7b2978f to your computer and use it in GitHub Desktop.
Save adamclasic/3a2f3b2d22b7a0f9bd98b369a7b2978f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adamclasic renamed this gist Feb 5, 2021. 1 changed file with 0 additions and 0 deletions.
    0 WP Gutenberg inspector inputs examples → WP Gutenberg inspector inputs examples.js
    View file
    File renamed without changes.
  2. adamclasic created this gist Feb 5, 2021.
    137 changes: 137 additions & 0 deletions WP Gutenberg inspector inputs examples
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    // these are examples to put in the Inspector controle or the block controle (sidebar and tooltip)
    // two more are missing: text, dropdown

    import classnames from 'classnames';
    import block_icons from '../icons/index';

    const { registerBlockType } = wp.blocks;
    const { InspectorControls } = wp.editor;
    const { __ } = wp.i18n;
    const { PanelBody, TextareaControl,
    CheckboxControl,
    RadioControl, RangeControl }= wp.components;

    registerBlockType( 'udemy/inspector-controls-example', {
    title: __( 'Inspector Controls', 'recipe' ),
    description: __( 'Inspector Controls.', 'recipe'),
    category: 'common',
    icon: block_icons.wapuu,
    attributes: {
    textarea_input: {
    type: 'text',
    },
    checkbox_input: {
    type: 'boolean',
    default: true,
    },
    radio_input: {
    type: 'string',
    default: 'foo',
    },
    range_input: {
    type: 'number',
    default: '5',
    }
    },
    edit: ( props ) => {
    return [
    <InspectorControls>
    <PanelBody title={ __( 'Input Examples', 'recipe' ) }>
    <TextareaControl
    label={ __( 'Text Area Control', 'recipe' ) }
    help={ __( 'Help Text', 'recipe' ) }
    value={ props.attributes.textarea_input }
    onChange={( new_val ) => {
    props.setAttributes( { textarea_input: new_val } )
    }} />

    <CheckboxControl
    heading={ __( 'Checkbox Control', 'recipe' ) }
    label={ __( 'Click me!', 'recipe' ) }
    help={ __( 'Help Text', 'recipe' ) }
    checked={ props.attributes.checkbox_input }
    onChange={( new_val ) => {
    props.setAttributes( { checkbox_input: new_val } )
    }}
    />

    <RadioControl
    label={ __( 'Radio Control', 'recipe' ) }
    selected={ props.attributes.radio_input }
    options={[
    { label: 'Foo', value: 'foo' },
    { label: 'Bar', value: 'bar' },
    ]}
    onChange={( new_val ) => {
    props.setAttributes( { radio_input: new_val } )
    }} />

    <RangeControl
    beforeIcon="arrow-left-alt2"
    afterIcon="arrow-right-alt2"
    label={ __( 'Range Control', 'recipe' ) }
    min={ 1 }
    max={ 10 }
    value={ props.attributes.range_input }
    onChange={( new_val ) => {
    props.setAttributes( { range_input: new_val } )
    }} />
    </PanelBody>
    </InspectorControls>,
    <div className={ props.className }>
    <TextareaControl
    label={ __( 'Text Area Control', 'recipe' ) }
    help={ __( 'Help Text', 'recipe' ) }
    value={ props.attributes.textarea_input }
    onChange={( new_val ) => {
    props.setAttributes( { textarea_input: new_val } )
    }} />

    <CheckboxControl
    heading={ __( 'Checkbox Control', 'recipe' ) }
    label={ __( 'Click me!', 'recipe' ) }
    help={ __( 'Help Text', 'recipe' ) }
    checked={ props.attributes.checkbox_input }
    onChange={( new_val ) => {
    props.setAttributes( { checkbox_input: new_val } )
    }}
    />

    <RadioControl
    label={ __( 'Radio Control', 'recipe' ) }
    selected={ props.attributes.radio_input }
    options={[
    { label: 'Foo', value: 'foo' },
    { label: 'Bar', value: 'bar' },
    ]}
    onChange={( new_val ) => {
    props.setAttributes( { radio_input: new_val } )
    }} />

    <RangeControl
    beforeIcon="arrow-left-alt2"
    afterIcon="arrow-right-alt2"
    label={ __( 'Range Control', 'recipe' ) }
    min={ 1 }
    max={ 10 }
    value={ props.attributes.range_input }
    onChange={( new_val ) => {
    props.setAttributes( { range_input: new_val } )
    }} />
    </div>
    ];
    },
    save: ( props ) => {
    return (
    <div>
    <ul>
    <li><strong>Textarea Input</strong> - { props.attributes.textarea_input }</li>
    <li><strong>Checkbox Input</strong> - { props.attributes.checkbox_input.toString() }</li>
    <li><strong>Radio Input</strong> - { props.attributes.radio_input }</li>
    <li><strong>Range Input</strong> - { props.attributes.range_input }</li>
    </ul>
    </div>
    )
    },

    });