解决：古腾堡编辑器中的浮动块

Question

我正在尝试开发一个可以像块核心/图像、核心/音频一样以浮动方式左/右对齐的块......我的意思是古腾堡的 UI 适应那个位置，你可以有围绕对齐/浮动块的段落。所有这一切都非常自然/原生。

我一直在对比他们的块和源代码生成的 HTML。

在第一个例子中，有一个带有 wp-block 类的段落。这是正常的组成。块的最外部元素获得所有古腾堡类。

在第二个例子中，有一个 div，只有类 wp-block 和 data-align 属性。这就是我想要复制的行为。

由核心/音频块创建的 HTML 结构：

如何显示核心/音频块：

这是我的代码，并直观地解释了问题。

代码与https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/audio/edit.js非常相似

const { useBlockProps } = wp.blockEditor;
const { BlockAlignmentToolbar, BlockControls } = wp.editor;
const { Component } = wp.element;

wp.blocks.registerBlockType( 'melange/test-aligns', {
    category:    'melangeLayout',
    title:       'Test aligns',
    description: '',
    attributes: {
        align: { type: 'string',  default: null, },
    },
//  supports: { align: true },
    edit: function({attributes, setAttributes}) {
        const blockProps = useBlockProps();
        return <>
            <BlockControls>
                <BlockAlignmentToolbar
                    value    = { attributes.align }
                    onChange = { align => setAttributes({align}) }
                />
            </BlockControls>
            <p {...blockProps}>Hello world!</p>
        </>
    },
    getEditWrapperProps(attrs) {
        return { ...attrs, 'data-align': attrs.align };
    },
    save: function() {
        const blockProps = useBlockProps.save();
        return <p {...blockProps}>Hello world!</p>;
    },
});

我的问题是浮动块有两个块控件，具体取决于鼠标悬停的位置。

原因是创建的 div 与它们在核心块中的结构不同。我不知道为什么，我的块被一个不需要的额外 div 包裹，实际上重复了 id。

Answer 1

解决方案：

wp.blocks.registerBlockType( 'melange/test-aligns', {
    apiVersion: 2,
    ...
});

如https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/

但是，我不知道为什么，他们在 Gutenberg 源代码中不需要它。