创建一个获取 api 数据的 Wordpress 块

Question

我是 WordPress 开发新手，所以我正在努力解决以下问题：

我们希望在 WordPress 中创建一个自定义块，从 api 端点获取数据，并通过用该 api 中的数据替换占位符来将其显示在 Richtext 中。

您可以假设我们知道如何做这些事情：

• 如何用数据替换文本中的占位符。
• 如何在 WordPress 中编写短代码插件（我们已经这样做了并且它有效）
• 短代码始终返回关联数组

每次渲染博客文章时都应该获取数据。出于 SEO 目的，文本需要在服务器端呈现，因此我们想要调用 php 服务器上的 api。 换句话说：它始终需要是最新的。

该块应该有两个字段来自定义它：

1. 一个需要短代码的文本字段，每次在服务器上呈现该块时都会执行该短代码以获取数据。
2. 一个富文本字段，需要一个将在页面上呈现的富文本，并使用通过执行短代码提供的数据。

首先我尝试在wordpress中创建一个动态块，因为我认为这是每次请求该块时获取数据的方法。 为此，我使用了带有选项dynamic-block的npm包@wordpress/create-block（v 4.22.0）。 我现在有一个如下所示的编辑组件

export default function Edit({attributes, setAttributes }) {
 const setText = (val) => setAttributes({text:val});
 const setShortCode = (val) => setAttributes({apiShortcode:val});
    return (
        <div { ...useBlockProps() }>
   <h3>My Comp</h3>
            <PlainText onChange={setShortCode} value={attributes.apiShortcode}/>
   <RichText onChange={setText} value={attributes.text}/>
        </div>
    );
}

在我的 block.json 中，我这样定义它们：

"attributes": {
    "apiShortcode": {
        "type": "string",
        "source": "text"
    },
    "text": {
        "type": "string",
        "source": "html"
    }
},

现在我需要从属性中获取短代码并在服务器上执行它。 然而我坚持这一点。我的问题结合了如此多的 WordPress 概念，以至于我的大脑第一次难以处理。

我的php代码仍然是默认生成的php代码：

<?php
function my_block_text_block_init() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_block_text_block_init' );

如何从编辑功能访问这两个属性？

另外 - 这种方法有意义还是我忽略了一些东西？或者有什么更好的吗？

Answer 1

为了解决这个问题，我添加了一个

render_callback

函数并将其注册到块中。 仅当我也在 php 代码中提供我的属性时，才会填充

$block_attributes

参数 - 不仅在blocks.json 文件中。

function render_callback( $block_attributes, $content ) {
    $apiCode = $block_attributes["apiShortcode"];
    $data = do_shortcode($apiCode);
    $richText = $block_attributes["text"];
    return sprintf(
        '<div class="data-wrapper" >
                    <p>My Block</p>
                    <div class="my-data" >%s</div>
                    <div>data: %s</div>
                </div>',$richText, $data
    );
}

function my_plugin_text_block_init() {
    register_block_type_from_metadata(
        __DIR__ . '/build',
        [
            'render_callback' => 'render_callback',
            'attributes'        => [
                'apiShortcode'   => ['type' => 'string' ],
                'text' => ['type' => 'string' ],
            ],

        ]
    );
}

add_action( 'init', 'my_plugin_text_block_init' );