1

I have created a gutenberg block and a select control that has some class names.

The select control is in its own panel in the sidebar.

My issue is when I try to call the select controls value/size. All I get is undefined.

Where am I going wrong how do I get the MySelectControls value and have that value stored when editing/saving the block?


//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const { Panel, PanelBody, PanelRow, SelectControl } = wp.components;
const { createHigherOrderComponent, withState } = wp.compose;
const { createHooks, addFilter, removeFilter, applyFilters  } = wp.hooks;



// Create my select control
const MySelectControl = withState( {
    size: 'display-2',
} )( ( { size, setState } ) => (
    <SelectControl
    label="Size"
    value={ size }
    options={ [
        { label: 'Display-1', value: 'display-1' },
        { label: 'Display-2', value: 'display-2' },
        { label: 'Display-3', value: 'display-3' },
        { label: 'Display-4', value: 'display-4' },
    ] }
    onChange={ ( size ) => { setState( { size }  ) } }
    />
) );

//Block Options - Render it in a panel
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {

    return (props) => {
        return (


            <Fragment>
            <BlockEdit { ...props } />
            <InspectorControls>

            <PanelBody
            title="My Block Settings"
            icon="welcome-widgets-menus"
            initialOpen={ true }
            >
            <PanelRow>

            <MySelectControl  /> // get this value

            </PanelRow>
            </PanelBody>




            </InspectorControls>

            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'cgb/block-display-heading', withInspectorControls );





function handleSize(){

    return MySelectControl.size; // get the value

}


const sizeH = handleSize(); // store the value

registerBlockType( 'cgb/block-display-heading', {

    title: __( 'display-heading - CGB Block' ),
    icon: 'shield',
    category: 'common',
    keywords: [
        __( 'Display Heading' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h1',
        }
    },



    edit: function( props ) {

        console.log(sizeH);

        const { attributes: { content }, setAttributes, className, size } = props;

        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );

        };

        return (

            <div class="display_wrapper">
            <RichText
            tagName="h1"
            className={ className + ' ' + sizeH } // display the value here
            onChange={ onChangeContent }
            value={ content }
            placeholder="Enter text..."
            />
            </div>
        );
    },

    save: function( props ) {

        return (
            <div class="display_wrapper">
            <RichText.Content tagName="h1" className={`testing ` + sizeH } value={ props.attributes.content } /> // and here!
            </div>
        );
    },
} );

0

I managed to solve this by doing this: -

  1. Create a select control in the edit function.
{

  <SelectControl
      label="Size"
      value={ size }
      options={ [
          { label: 'Display 1', value: 'display-1' },
          { label: 'Display 2', value: 'display-2' },
          { label: 'Display 3', value: 'display-3' },
          { label: 'Display 4', value: 'display-4' },
      ] }
   onChange={ ( size ) => props.setAttributes( { size: size } ) }
      />

}
  1. Create an attribute (size)
  2. Change the select control to change the size attribute
  3. Pass the props to the save function props.attributes.size

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.