JavaScript for WordPress › Forums › Gutenberg Development › Inspector controls inside dynamic block
- This topic has 6 replies, 3 voices, and was last updated 6 years, 4 months ago by Zac Gordon.
-
AuthorPosts
-
April 12, 2018 at 3:47 am #44989raquelmsmithParticipant
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?
April 12, 2018 at 9:18 pm #45036Zac GordonKeymasterOkay, 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!
April 14, 2018 at 9:24 pm #45137raquelmsmithParticipantThanks 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 🙂
April 30, 2018 at 1:51 pm #45992forge-webParticipantHi! 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; }?
April 30, 2018 at 3:11 pm #46005raquelmsmithParticipantDoes 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?
April 30, 2018 at 6:48 pm #46032forge-webParticipantThanks 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.
May 11, 2018 at 8:23 pm #46894Zac GordonKeymasterDoes 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.
-
AuthorPosts
- You must be logged in to reply to this topic.