0

我有一个旧的 wordpress 插件,用于显示最新的帖子选择。该插件使用带有选项的简码。现在我正在稍微转换插件,以便它可以用作古腾堡块。我保持 php 代码完整,并尝试创建一个具有一些设置的块(用于块的右侧设置框)。我不想像其他块一样在块编辑器中显示帖子,而是只在前端显示数据。所以在管理员中,除了占位符文本和设置之外,什么都不会显示。在插件的init.php 中我有这段代码(请忽略这里的编码错误,我只是放了一些部分来理解这个想法):

final class Dcposts {

function dcposts_block_assets() {
    register_block_type(
                'dc/block-dcposts', array(
                    'style'         => 'dcposts-style-css',
                    'editor_script' => 'dcposts-block-js',
                    'editor_style'  => 'dcposts-block-editor-css',
                    'render_callback' => array($this, 'mytest')
                )
            );
}

public function mytest($attributes) {
        return '[some_shortcode]'; // I will generate a dynamic shortcode with $attributes
    }
}

这工作正常。如果我添加块,它会显示帖子前端。但是我在管理员中收到一条错误消息:
更新失败。响应不是有效的 JSON 响应。
同时使用块保存页面;并且短代码在管理员中执行。我怎样才能防止这种情况?这是我采用的正确方法吗?请给我一些想法。

4

1 回答 1

0

错误消息“更新失败。响应不是有效的 JSON 响应。” 当您的render_callback函数返回与 Gutenberg Edit() 函数不同的内容时发生。对于动态块,save() 函数应该返回 null

ServerSideRender块非常适合将现有 PHP 函数迁移/集成到 Gutenberg 块中。

dc/block-dcposts在 PHP 中注册你的块是正确的。接下来,ServerSideRender在 JavaScript 中块声明的 Edit 函数中添加一个组件,例如:

index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

/**
* Registering our block in JavaScript
*/
registerBlockType('dc/block-dcposts', {
    title: __('DCPosts', 'dc'),
    description: __(
        'What DCPosts does..',
        'dc'
    ),
    category: 'layout',
    icon: 'star-filled',
    edit: () => {
        return (
            <ServerSideRender
                block="dc/block-dcposts"
            />
        );
    },
    save: () => { return null } // Dynamic blocks should return null to avoid validation error.
});

plugin.php(简化示例)

function dc_block_dcposts($attributes){
    return '<div>Dynamically rendered content</div>';
}

function dc_block_dcposts_init(){
    register_block_type( 'dc/block-dcposts', array(
        'render_callback' => 'dc_block_dcposts',
    ) );
};

add_action( 'init', 'dc_block_dcposts_init' );

一旦基本设置工作正常,下一步可能是迁移 PHP 函数所需的任何属性。这些属性需要在块设置中定义,然后通过ServerSideRender 组件传入,以便您的 PHP 函数接收。

于 2020-10-24T14:31:41.107 回答