Get content from another site in the network, Rest API?

[Marky]

So I’ve a multisite network with a dynamic block that’s pulling in posts. All good. I need to get it working across the network though, which is easy on the front end with the addition of the following in the index.php file for this particular block…

switch_to_blog( CCS_BLOG_ID );
$recent_posts = wp_get_recent_posts( [
    'post_type' => 'factsheets',
    'numberposts' => 3,
    'post_status' => 'publish',
] );
restore_current_blog();

Doing the same in the index.js file though… :-/
The section of code in question is below, but I’m guessing this is going to involve a call via the Rest API? ANy pointers would be really welcome. Thanks!

edit: withSelect( select => {
    return {
        posts: select( 'core' ).getEntityRecords( 'postType', 'factsheets', { per_page: 3 } )
    };
    
    <!-- other block js here -->

} ) // end withAPIData

[Zac Gordon]

Howdy!

So, a few things here: first this is a pretty straightforward React question of where to put in an Ajax call to another site and grab the data. And can help with that if it’s something you’re not familiar with.

The complication is I am not sure, but it is possible withSelect may work with multisite. I don’t think it does but that would be a question to verify in the Core Editor WP Slack (happy to ask on your behalf if you’re not on the WP Slack, but if you are a good question for there).

The one thing tho I’m not completely sure is are you trying to pull in content from across multiple sites or just content from the site where the block is used?

[Marky]

Thanks for getting back to me Zac!

To clarify, there’s three sites in my network. There’s some content that’s global to all sites so I’ve picked one of the sites to be the ‘parent’ site where this global content is administered. In this case a post type called ‘factsheets’.

So the requirement is to pull this content from the parent site and into the two other sites. The block is used across the entire Network.

I’m totally new to React but have done plenty of ajax stuff before, I’ll look into it, but if you’ve a quick basic example to hand that would be great. I’m not part of the WP Slack group but should be able to find if withSelect can handle Multisite.

Thanks again!

[Marky]

Sorted it!

So you can use the ServerSideRender wp component. That looks for the blocks related php file and pulls the output from there into the attributes. Amazing. Thanks for setting me on the right path!

edit( { className, attributes, setAttributes } ) {
            return (
                <Fragment>
                    <ServerSideRender
                        block="ccsblocks/dynamic-factsheet"
                        attributes={ {
                            stuff: attributes.stuff
                        } }
                     />
                </Fragment>
            );

[Marky]

Ahh, spoke too soon… it’s not showing up in the editor.

this block has encountered an error and cannot be previewed

And it looks like it’s a bit more of a legacy approach. Gah…

[Marky]

Hey Zac, I’m having a little issue with that ajax call… I’m not sure how to piece it together within this gutenberg/react context. If you’ve got a quick pointer that’d be great.

Thanks mate,

Mark

[Zac Gordon]

Okay, so first thing with an API call inside React is that the basic way is to add it to the componentDidMount method. Now you can’t do that in edit setting without creating your own custom component.

However here is an example of how to add a basic API call in React

https://github.com/zgordon/react-book/blob/master/9-component-lifecycle/completed/src/Practice2.js

Let me know if that helps get you there

[Author]

Posts