JavaScript for WordPress Forums Gutenberg Development Inspector controls inside dynamic block

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44989
    raquelmsmith
    Participant

    I’m trying to combine what I’ve learned about inspector controls with a dynamic block. I’m using the Inspector controls example block as a starting point, and then adding the withAPIData function to the edit function. I can get the API call working properly, but I can’t see to pull in the Inspector controls into the Edit function. Here’s my edit function:

    
    edit: withAPIData( props => {
                    return {
                        posts: '/wp/v2/posts?per_page=3'
                    };
                } )( ( { attributes, posts, className, isSelected, setAttributes, RadioControl } ) => {
                    if ( ! posts.data ) {
                        return (
                            <p className={className} >
                                <Spinner />
                                { 'Loading Posts' }
                            </p>
                        );
                    }
                    if ( 0 === posts.data.length ) {
                        return [
                          isSelected && <Inspector { ...{ setAttributes, ...props} } />,
                          <p>{ 'No Posts' }</p>
                        ];
                    }
                    return [
                      isSelected && <Inspector { ...{ setAttributes, ...props} } />,
                        <ul className={ className }>
                            { posts.data.map( post => {
                                return (
                                    <li>
                                        <a className={ className } href={ post.link }>
                                            { post.title.rendered }
                                        </a>
                                    </li>
                                );
                            }) }
                        </ul>
                    ];
                } ) // end withAPIData
            , // end edit
    

    And the error I get is ReferenceError: props is not defined.

    Any suggestions for using Inspector controls with the example dynamic code?

    #45036
    Zac Gordon
    Keymaster

    Okay, so this line here is actually taking props and destructuring it.

    
      } )( ( { attributes, posts, className, isSelected, setAttributes, RadioControl } ) => {
    

    You could instead just let props be passed down instead of destructuring it here and update your other code to props.posts etc or you can just pass down the specific things you need into the inspector rather than passing all of props.

    The other thing to mention here is that if changes in the inspector settings change the API request it will redraw the entire block and inspector, which is annoying.

    If you look at the core latest posts block you’ll see its much more complex. I have talked with a core dev about how to improve this and will likely have an example not using withAPIData and rather making the API call using some other options they are working on adding. This isn’t ready quite yet, but you can look at this example from V1 of the course for an alternative approach to withAPIData:

    https://github.com/zgordon/gutenberg-course/tree/v1/jsforwp-blocks/blocks/examples/13-dynamic-alt

    Hope that helps!

    #45137
    raquelmsmith
    Participant

    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 🙂

    #45992
    forge-web
    Participant

    Hi! I’m working on something very similar, using inspector controls to toggle a dynamic block rendering between two custom post types. The example via ‘v1/jsforwp-blocks/blocks/examples/13-dynamic-alt’ has been really helpful but I’m having trouble with front-end rendering. Does the WP API approach still allow for the same rendering in PHP (using save: props => { // fetch in php return null; }?

    #46005
    raquelmsmith
    Participant

    Does the WP API approach still allow for the same rendering in PHP (using save: props => { // fetch in php return null; }?

    Yes, you render on the front-end with PHP. What are you having trouble with specifically?

    #46032
    forge-web
    Participant

    Thanks for your response- what I’m having trouble with is the rendering anything on the front-end. my PHP is based directly on the 13-dynamic-alt example (with a index.php file added in the block directory), but is not outputting anything, appears that jsforwpblocks_dynamic_block_render() is not being called at all.

    #46894
    Zac Gordon
    Keymaster

    Does the example block work for you out of the box? If so I might suggest starting over and seeing at what point it broke. Might be as simple as something named incorrectly.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.