Использование вложенных блоков с пользовательским блоком запроса

На чтение 3 мин Опубликовано 03.10.2024

Вопрос или проблема

Я экспериментирую с пользовательским блоком запроса просто ради удовольствия. Я хотел бы использовать компоненты, которые идут с основными вложенными блоками запроса (название, отрывок, изображение и т.д.). Для этого теста я хотел бы использовать core/post-title в своем пользовательском запросе. Однако, похоже, это невозможно.

Мой пользовательский блок запроса работает, если я устанавливаю значение компонента value={post.title}. Когда я пробую сделать то же самое с InnerBlocks, запрос не передается в InnerBlocks.

Я все еще новичок в разработке на WordPress, буду признателен за направление или советы.

edit: () => {

<!--useState и useEffect, а также пользовательские apiFetch-->

    return (
   
                <div>
                     <InnerBlocks /> <!--используйте core/post-title с пользовательским запросом-->
                </div>
    );
}

Примечание: Я понимаю, что могу просто использовать блок запроса. Пошутите надо мной.

Ответ или решение

Для использования вложенных блоков с пользовательским запросом в WordPress, вам необходимо правильно настроить ваш компонент так, чтобы он мог передавать данные о записях в вложенные блоки. Поскольку вы хотите использовать core/post-title и, возможно, другие внутренние блоки, такие как core/post-excerpt, вам нужно немного изменить ваш подход.

Вот пошаговое руководство по реализации вашей идеи с объяснением каждого этапа:

Создайте пользовательский блок запроса:
Убедитесь, что в вашем пользовательском блоке используется InnerBlocks для работы с внутренними блоками.
Настройте состояние:
Используйте useState и useEffect для хранения и извлечения данных о записях. Чтобы передать данные на уровень вложенных блоков, нужно передать их через attributes.
Настройте InnerBlocks:
Вам нужно будет использовать специальный атрибут для передачи данных в вложенные блоки. Это можно сделать с помощью функции InnerBlocks.Content.
Пример кода:
Вот пример того, как может выглядеть ваш компонент:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { useEffect, useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';

const MyCustomQueryBlock = (props) => {
    const blockProps = useBlockProps();
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        // Здесь предполагается, что вы загружаете данные о записях с помощью apiFetch
        apiFetch({ path: '/wp/v2/posts' })
            .then((data) => {
                setPosts(data);
            });
    }, []);

    return (
        <div {...blockProps}>
            {posts.map((post) => (
                <div key={post.id}>
                    <InnerBlocks
                        template={[['core/post-title', { title: post.title.rendered }]]}
                        templateLock={false} // позволяет добавлять/удалять блоки
                    />
                    {/* Вы также можете использовать другие блоки здесь */}
                </div>
            ))}
        </div>
    );
};

export default MyCustomQueryBlock;

Объяснение кода:
- Мы используем useState для хранения массива записей и useEffect для загрузки данных о записях при монтировании компонента.
- Мы перебираем массив posts, чтобы создать новый блок InnerBlocks для каждой записи.
- Внутри InnerBlocks, мы передаем данные для core/post-title, используя template, который может содержать любые блоки, которые вам нужны.
Настройка в block.json:
Убедитесь, что ваш блок правильно настроен в block.json, чтобы поддерживать внутренние блоки.

{
    "apiVersion": 2,
    "name": "namespace/my-custom-query",
    "title": "My Custom Query",
    "category": "widgets",
    "icon": "smiley",
    "supports": {
        "html": false
    },
    "editorScript": "file:./index.js",
    "innerBlocks": [
        ["core/post-title", {}],
        ["core/post-excerpt", {}]
    ]
}

Заключение:
Используя этот подход, вы должны успешно интегрировать вложенные блоки с данными из пользовательского запроса. Это даст вам возможность использовать встроенные блоки WordPress (такие как core/post-title, core/post-excerpt и другие) в вашем собственном пользовательском блоке. Если у вас есть дополнительные вопросы или нужна помощь по конкретным аспектам, не стесняйтесь задавать!