为古腾堡创建动态区块 register_block_type记忆碎片-网络技术分享 - 记忆碎片-网络技术分享

为古腾堡创建动态区块 register_block_type

2023.12.06 分享 299 人浏览留言

PHP

1. <?php
2. // 注册区块类型
3. function hl_register_block_type() {
4. $re = register_block_type(
5. 'hl/block-fangchan', // 区块类型的名称，用于在代码中引用
6. array(
7. 'editor_script' => 'block-fangchan-script', // 在编辑器中加载的 JavaScript 脚本
8. 'render_callback' => 'block_fangchan_render_callback', // 渲染区块内容的回调函数
9. )
10. );
11. }
12. add_action('init', 'hl_register_block_type', 10);
14. // 注册js
15. function hl_block_enqueue_scripts() {
16. wp_enqueue_script( 'block-fangchan-script', get_bloginfo('template_url') . '/hl/js/block-fangchan.js', array('wp-blocks', 'wp-element', 'wp-editor'), true
17. );
18. }
19. add_action('enqueue_block_assets', 'hl_block_enqueue_scripts');
21. // 注册callback
22. function block_fangchan_render_callback($attributes, $content) {
23. return file_get_contents(__DIR__."/html/block-fangchan.html"); //读取这个文件的html内容省略
24. }

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', {}, '房产图文模块'));
},
// 在前台显示的内容
save: function (props) {
return null
},
});
})(
window.wp.blocks,
window.wp.editor,
window.wp.element
);

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

文章地址：https://huilang.me/register_block_type/

回复本文取消回复