plugins - Passing select control value to block

admin管理员组

文章数量:1325708

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 } = wpponents;
const { createHigherOrderComponent, withState } = wppose;
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>
        );
    },
} );

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 } = wpponents;
const { createHigherOrderComponent, withState } = wppose;
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>
        );
    },
} );

• plugins
• plugin-development
• javascript
• block-editor

Share Improve this question edited May 3, 2019 at 15:08 Astrid asked May 3, 2019 at 13:14 AstridAstrid 12311 silver badge1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

}

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

本文标签： pluginsPassing select control value to block