为什么onChange的参数嵌套在Gutenberg定制块RichText的<p>...</p>中?

时间:2022-01-17 作者:Watanabe.N

编辑时RichText 在管理面板上,onChange\'s参数嵌套在段落标记中,如<p>my input</p>. 但是,我没有具体说明p 标记源代码中的任意位置。即使我尝试指定tagName=\'h2\' 对于属性和RichText,onChange仍然可以<h2><p>my input</p></h2>. 我无法删除。我不知道怎么修理。有人知道发生了什么事吗?

此外,编辑页面是用我的自定义css设计的,但公共页面不是。这可能有一些作用。

提前感谢您!

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

wp.blocks.registerBlockType( 
  \'myblock/title\',
  {
    title: \'title\',
    icon: \'heading\',
    category: \'text\',
    example: {},
    attributes: {
      text: {
        type: \'string\',
        default: \'\',
      },
    },
    edit: function (props) {
      var blockProps = wp.blockEditor.useBlockProps();
      console.log(props)
      return el(
        RichText, Object.assign(blockProps, {
          onChange: function handleChange(text) {
            console.log(text)
            props.setAttributes({text: text})
          },
          value: props.attributes.text,
          placeholder: \'Input title\',
          multiline: true,
          className: props.className,
        })
      );
    },
    save: function (props) {
      var blockProps = wp.blockEditor.useBlockProps.save();
      return el(
        RichText.Content,
        Object.assign(blockProps, {
          value: props.attributes.text,
        })
      );
    },
  }
);

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

因为你有multiline: true, as documented:

默认情况下,换行符将插入到Enter. 如果editablefield可以包含多个段落,则可以将此属性设置为在上创建新段落Enter.

相关推荐