为古腾堡创建动态区块 register_block_type

2023.12.06 分享 1441 人浏览 留言

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);
    13. // 注册js
    14. function hl_block_enqueue_scripts() {
    15.   wp_enqueue_script( 'block-fangchan-script', get_bloginfo('template_url') . '/hl/js/block-fangchan.js', array('wp-blocks', 'wp-element', 'wp-editor'), true
    16.   );
    17. }
    18. add_action('enqueue_block_assets', 'hl_block_enqueue_scripts');
    19. // 注册callback
    20. function block_fangchan_render_callback($attributes$content) {
    21.   return file_get_contents(__DIR__."/html/block-fangchan.html"); //读取这个文件的html内容 省略
    22. }

JS

  1. (function (blocks, editor, element) {
  2.     var el = element.createElement;
  3.     var registerBlockType = blocks.registerBlockType;
  4.     registerBlockType('hl/block-fangchan', {
  5.         title: '房产图文', // 区块的标题
  6.         icon: 'smiley', // 区块的图标
  7.         category: 'themepark-block-b2', // 区块的分类
  8.         keywords: ["房产"],
  9.         description: "房产图文",
  10.         // 在编辑器中显示的内容和控制界面
  11.         edit: function (props) {
  12.             return el('div', {}, el('h2', {}, '房产图文模块'));
  13.         },
  14.         // 在前台显示的内容
  15.         save: function (props) {
  16.             return null
  17.         },
  18.     });
  19. })(
  20.     window.wp.blocks,
  21.     window.wp.editor,
  22.     window.wp.element
  23. );

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

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

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif