将select控件值传递给块

Question

我已经创建了一个gutenberg块和一个具有某些类名的select控件。

select控件在侧边栏的自己的面板中。

我的问题是当我试图调用select控件值/大小时。我所得到的只是不确定的。

哪里出错了，如何获得MySelectControls值，并在编辑/保存块时存储该值？

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

Answer 1

我设法解决了这个问题：-

1. 在编辑函数中创建一个select控件。

{

  <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. 创建一个属性(大小)
2. 更改select控件以更改size属性
3. 将道具传递给保存函数props.attributes.size