plugin development - How to re-render inspector controls?

admin管理员组

文章数量:1313347

I'm making a moderately complicated block, with a lot of configuration parameters. I'd like to do something like

export default function MyBlockEdit( props ) {
        const {
                attributes: {
                    pickSomething,
                    fancyProp1,
                    fancyProp2, // etc... etc...
                },
                setAttributes,
        } = props;

        function MyConfigurator( { myChoice = '' } ) {
                switch ( myChoice ) {
                    case 'foo':
                        return (
                            <PanelRow>
                                    <Button
                                      onClick={ () => {
                                        setAttributes( {
                                          fancyProp1: ! fancyProp1 } )
                                      } }>Clicke Me</Button>
                                      // lots more stuff here
                            </PanelRow>
                        );
                        break;
                    case 'bar':
                        return (
                            <PanelRow>
                                    <ToggleControl
                                      checked={ fancyProp2 }
                                      onChange={ () => {
                                        setAttributes( {
                                          fancyProp2: ! fancyProp2 } )
                                      } }/>
                                    // lots more totally different stuff here
                            </PanelRow>
                        );
                        break;
                }
         }

        return (
          <>
            <Fragment>
               <InspectorControls>
                   <PanelBody>
                        <MyConfigurator
                          myChoice={pickSomething} />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
            <Fragment>
                <div>
                    <SelectControl
                      label={ 'Change your config options' }
                      value={ pickSomething } 
                      options={ [ { value: 'foo', label: 'Foo' },
                                  { value: 'bar', label: 'Bar' } ] }
                      onChange={ (myPick) => {
                        setAttributes( {
                          pickSomething: myPick } );
                        doSomething; // re-render InspectorControls w/new value
                      }} />
                </div>
            </Fragment>
          </>
        );
}

That's obviously quite simplified for purposes of asking this question, but, is there a way to do that? Even just a pointer to an existing block that updates the InspectorControls on some change would probably be sufficient, but I don't see anything.

Thanks!

本文标签： plugin developmentHow to rerender inspector controls