古腾堡自定义块的带有RichText的可编辑按钮

我正在为古腾堡编辑器制作一个可编辑按钮。我写了下面的代码，但它不允许我编辑按钮中的文本。有人知道怎么了吗？提前谢谢你。

主题图像/自定义块/块。js公司

var el = window.wp.element.createElement;
var RichText = window.wp.blockEditor.RichText;

wp.blocks.registerBlockType( 
  \'custom-namespace/button\',
  {
    title: \'nice_button\',
    icon: \'button\',
    category: \'layout\',
    example: {},
    attributes: {
      text: {
        type: \'string\',
        default: \'\',
        source: \'html\',
        selector: \'button\'
      },
    },
    edit: function (props) {
      var blockProps = wp.blockEditor.useBlockProps();
      return el(
        RichText, Object.assign(blockProps, {
          onChange: function(text) {
            props.setAttributes({text: text})
          },
          value: props.attributes.text,
          placeholder: \'Input your text\',
          tagName: \'button\',
          className: props.className,
        })
      );
    },
    save: function (props) {
      var blockProps = wp.blockEditor.useBlockProps.save();
      return el(
        RichText.Content,
        Object.assign(blockProps, {
          value: props.attributes.text,
          tagName: \'button\',
        })
      );
    },
  }
);

已编辑：更改了名称空间，使其不包含下划线。下面的文件加载块。js公司

主题IR/自定义块/寄存器块。php

<?php
defined(\'ABSPATH\') || exit;

function custom_gutenberg_block_enqueue() {
  wp_register_script(
    \'block-script\',
    get_theme_file_uri(\'/custom-block/block.js\'),
    array(\'wp-block-editor\', \'wp-element\'),
    filemtime(get_theme_file_path(\'/custom-block/block.js\'))
  );

  wp_register_style(
    \'block-editor\',
    get_theme_file_uri(\'/custom-block/editor.css\'),
    array(\'wp-edit-blocks\'),
    filemtime(get_theme_file_path(\'/custom-block/editor.css\'))
  );

  wp_register_style(
    \'block-front\',
    get_theme_file_uri(\'/custom-block/front.css\'),
    array(),
    filemtime(get_theme_file_path(\'/custom-block/front.css\'))
  );

  register_block_type(
    \'custom-namespace/button\',
    array(
      \'editor_script\' => \'block-script\',
      \'editor_style\' => \'block-editor\',
      \'style\' => \'block-front\',
    )
  );
}
add_action(\'init\', \'custom_gutenberg_block_enqueue\');

( ( function () { // <- 1. Add this line var el = window.wp.element.createElement; var RichText = window.wp.blockEditor.RichText; wp.blocks.registerBlockType( ... your code ); } )(); // <- 2. Add this line

相关推荐