我如何在WordPress自定义块中使用动态数据更新块模板？

unhi4e5o 于 2023-02-11 发布在 WordPress

关注(0)|答案(1)|浏览(201)

在下面的代码中，我尝试动态更新一个模板，该模板的属性数据在第一次useEffect调用之前不可用。在下面的代码中，第一次渲染当然有emoty属性并显示默认值。我可以跟踪代码并看到模板得到更新，但在使用修改后的模板调用useInnerBlocksProps后，数据仍然没有渲染。我错过了什么？

export default function Edit(props) {
const { PanelBody, PanelRow } = wp.components;
const { attributes, setAttributes } = props;

useEffect(() => {

    setAttributes({'name': 'Edward Alan Thompson'});
    setAttributes({'birth_date': '1 jan 1900'});
    setAttributes({'death_date': '31 Dec 1990'});
    setAttributes({'imageUrl': 'http://wordpressdevel.local/wp-content/uploads/2022/07/1.png'});
}, []);

const blockProps = useBlockProps( {
    style:{minHeight: 40, width: '100%', border: "1px dotted red"}
});

const innerBlocksProps = useInnerBlocksProps(
    {orientation: "horizontal"},
    {template: [
            [ 'core/columns', { columns: 2 }, [
                [ 'core/column', {width: "20%"}, [
                    [ 'core/image', { url: attributes.imageUrl??''} ]
                ] ],
                [ 'core/column', {}, [
                    [ 'core/heading', { content: attributes.name??''} ],
                    [ 'core/paragraph', { content: 'b. ' + attributes.birth_date??''} ],
                    [ 'core/paragraph', { content: 'd. ' + attributes.death_date??''} ]
                ] ],
            ]
            ]
        ]}
);

return (
    <div >
        <InspectorControls>
            <PanelBody title="General" initialOpen={true}>
                <PanelRow>
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <div {...blockProps}>
            <div {...innerBlocksProps}></div></div>
    </div>
);

}
我验证了最后一个渲染调用确实有正确的模板定义，只是不是屏幕上显示的内容。

wordpress

来源：https://stackoverflow.com/questions/75355838/how-can-i-update-a-block-templates-with-dynamic-data-in-wordpress-custom-blocks

1条答案

按热度按时间

jjjwad0x1#

查看您的代码，问题似乎与useInnerBlocksProps()的调用方式有关：第一个参数期望blockProps，其后是innerBlocks内容，例如：

编辑.js

import { useEffect } from '@wordpress/element';
import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
    // Nb. Removed code not related to issue for clarity

    useEffect(() => {
        // Call setAttributes once 
        setAttributes({
            name: "Edward Alan Thompson",
            birth_date: "1 jan 1900",
            death_date: "31 Dec 1990",
            image_url: "http://wordpressdevel.local/wp-content/uploads/2022/07/1.png",
        });
    }, []);

    const blockProps = useBlockProps({
        style: { minHeight: 40, width: '100%', border: "1px dotted red" }
    });

    const TEMPLATE = [
        ['core/columns', {}, [ // Number of columns not needed
            ['core/column', { width: '20%' }, [
                ['core/image', { url: attributes.image_url ?? '' }]],
            ],
            ['core/column', {}, [
                ['core/heading', { content: attributes.name ?? '' }],
                ['core/paragraph', { content: 'b. ' + attributes.birth_date ?? '' }],
                ['core/paragraph', { content: 'd. ' + attributes.death_date ?? '' }]
            ]]
        ]]]

    const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps,
        {
            orientation: "horizontal",
            template: TEMPLATE
        }
    );

    return (
        <div {...innerBlocksProps}>
            {children}
        </div>
    );
}

参考：内部试验块：使用React钩子
我是在使用<InnerBlocks .../>测试您的template定义本身，然后检查useInnerBlocksProps()的预期之后得出这个结论的。

赞(0）回复(0）举报 2023-02-11

我来回答

我如何在WordPress自定义块中使用动态数据更新块模板？

1条答案

相关问题

热门标签

最新问答