Using Nested Blocks With Custom Query Block

Question

I'm experimenting with a custom query block for the fun of it. I would like to leverage the components that come with core query inner blocks (title, excerpt, featured image, etc..). For this test, I'd like to leverage core/post-title within my custom query. However, that doesn't seem to be possible.

My custom query block works if I set the value of a component value={post.title}. When trying the same thing with InnerBlocks, the query is not passed to the InnerBlocks.

I'm still green when it comes to Wordpress development, direction or experience is much appreciated.

edit: () => {

<!--useState and useEffect and custom apiFetch stuff-->

    return (
   
                <div>
                     <InnerBlocks /> <!--utilize core/post-title with custom query-->
                </div>
    );
}

note: I'm aware that I can just use a query block. Humor me.

Answer 1

It is not possible to pass query parameters (data) to the component <InnerBlocks />. However, there is a work around. You can fetch and store data in a parent block and then create separate "child" blocks according to the attributes (data) you want to pass (title, featured image, etc.)

import { registerBlockType } from '@wordpress/blocks';
import { useEffect, useState } from '@wordpress/element';
import { Spinner, InnerBlocks } from '@wordpress/components';

registerBlockType('my-plugin/custom-api-fetch', {
    title: 'Custom API Fetch Block',
    icon: 'format-image',
    category: 'widgets',

    attributes: {
        fetchData: {
            type: 'array',
            default: [],
        },
    },

    edit: ({ attributes, setAttributes }) => {
        const { fetchData } = attributes;
        const [loading, setLoading] = useState(true);

        // Fetch posts automatically on block load
        useEffect(() => {
            const fetchPosts = async () => {
                try {
                    const response = await fetch(`https://yourwebsite.com/wp-json/wp/v2/posts?categories=1&_embed`);
                    const data = await response.json();
                    setAttributes({ fetchData: data });
                } catch (error) {
                    console.error('Fetch error:', error);
                } finally {
                    setLoading(false);
                }
            };

            fetchPosts();
        }, []);

        const template = fetchData.map(post => ([
            'my-plugin/custom-post', { title: post.title.rendered, imageUrl: post._embedded['wp:featuredmedia'][0].source_url, postId: post.id }
        ]));

        return (
            <div>
                {loading ? (
                    <Spinner />
                ) : (
                    fetchData.length > 0 ? (
                        <InnerBlocks template={template} />
                    ) : (
                        <p>No posts found.</p>
                    )
                )}
            </div>
        );
    },

    save: () => {
        return null; 
    },
});