通过将自定义图块按钮放在div中对齐

我制作了我的自定义块按钮。我想把它包起来，水平对齐一个按钮。你怎么能把它包起来？下面的代码有两个问题

不允许编辑按钮中的文本，不允许按钮居中对齐

(function (element, blocks, blockEditor) {
  var el = element.createElement;
  var RichText = blockEditor.RichText;
  blocks.registerBlockType(
    \'custome-namespace/button\',
    {
      title: \'nice button\',
      icon: \'button\',
      category: \'layout\',
      example: {},
      attributes: {
        text: {
          type: \'string\',
          default: \'\',
          source: \'html\',
          selector: \'button\'
        },
        align: {
          type: \'string\',
          default: \'center\',
        }
      },
      supports: {
        align: true,
        justifyContent: true,
        alignItems: true
      },
      edit: function (props) {
        var blockProps = blockEditor.useBlockProps();
        var buttonBlock = el(
          RichText, Object.assign(blockProps, {
            onChange: function handleChange(text) {
              props.setAttributes({ text: text })
            },
            value: props.attributes.text,
            placeholder: \'Input button label\',
            tagName: \'button\',
            className: props.className,
          })
        );
        return el(\'div\', blockProps, buttonBlock)
      },
      save: function (props) {
        var blockProps = blockEditor.useBlockProps.save();
        var buttonBlock = el(
          RichText.Content,
          Object.assign(blockProps, {
            value: props.attributes.text,
            tagName: \'button\',
          })
        );
        return el(\'div\', blockProps, buttonBlock)
      },
    }
  );

})(window.wp.element, window.wp.blocks, window.wp.blockEditor)

非常感谢！

var buttonBlock = el( // RichText, Object.assign(blockProps, { // bad // and it\'s bad because it adds the tagName property to the blockProps. RichText, Object.assign({}, blockProps, { // good ... your props. }) ); return el(\'div\', blockProps, buttonBlock)

相关推荐