为古腾堡创建动态区块 register_block_type

PHP

<?php
// 注册区块类型
function hl_register_block_type() {
    $re = register_block_type(
        'hl/block-fangchan', // 区块类型的名称，用于在代码中引用
        array(
            'editor_script'   => 'block-fangchan-script',   // 在编辑器中加载的 JavaScript 脚本
            'render_callback' => 'block_fangchan_render_callback', // 渲染区块内容的回调函数
        )
    );
}
add_action('init', 'hl_register_block_type', 10);

// 注册JS脚本
function hl_block_enqueue_scripts() {
    wp_enqueue_script(
        'block-fangchan-script',
        get_bloginfo('template_url') . '/hl/js/block-fangchan.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        true
    );
}
add_action('enqueue_block_assets', 'hl_block_enqueue_scripts');

// 注册回调函数
function block_fangchan_render_callback($attributes, $content) {
    // 读取HTML文件内容并返回
    return file_get_contents(__DIR__ . "/html/block-fangchan.html");
}

JS

(function (blocks, editor, element) {
    var el = element.createElement;
    var registerBlockType = blocks.registerBlockType;

    registerBlockType('hl/block-fangchan', {
        title: '房产图文',           // 区块的标题
        icon: 'smiley',              // 区块的图标
        category: 'themepark-block-b2', // 区块的分类
        keywords: ["房产"],           // 搜索关键词
        description: "房产图文",       // 区块描述

        // 编辑器中显示的内容和控制界面
        edit: function (props) {
            return el(
                'div',
                {},
                el('h2', {}, '房产图文模块')
            );
        },

        // 前台显示的内容（动态渲染，返回 null）
        save: function (props) {
            return null;
        }
    });
})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.element
);

需要注意hl/block-fangchan 这个目录