Reply To: Inspector controls inside dynamic block

[raquelmsmith]

Thanks for the help! For anyone else looking to do this, here’s what I did:

Edit function in index.js:

edit: withAPIData( props => {
                return {
                    posts: '/wp/v2/posts?per_page=3'
                };
            } )( props => {
                if ( ! props.posts.data ) {     // Used props. with all props subprops (sorry, don't know the correct terminology!)
                    return (
                        <p className={props.className} >
                            <Spinner />
                            { 'Loading Posts' }
                        </p>
                    );
                }
                if ( 0 === props.posts.data.length ) {
                    return [
                      props.isSelected && <Inspector { ...props } />,    // Simplified what I included in the Inspector class to just ...props
                      <p>{ 'No Posts' }</p>
                    ];
                }
                return [
                    props.isSelected && <Inspector { ...props } />,
                    <ul className={ props.className }>
                        { props.posts.data.map( post => {
                            return (
                                <li>
                                    <a className={ props.className } href={ post.link }>
                                        { post.title.rendered }
                                    </a>
                                </li>
                            );
                        }) }
                    </ul>
                ];
            } ) // end withAPIData
        , // end edit

And then in inspector.js:

render() {
        const { attributes: { radioControl, rangeControl, toggleControl, }, setAttributes } = this.props;    // have to use this.props

Working great!

It is annoying that everything reloads when anything is changed in the inspector controls, but it’s something I can deal with for now 🙂