rest api - Using Nested Blocks With Custom Query Block

admin管理员组

文章数量:1122832

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.

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.

• block-editor
• rest-api
• query-posts
• meta-query
• endpoints

Share Improve this question asked Oct 2, 2024 at 19:15 Austin AllenAustin Allen 2144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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; 
    },
});

本文标签： rest apiUsing Nested Blocks With Custom Query Block