Решено: плавающие блоки в редакторе Гутенберга

Я пытаюсь разработать блок, который может выравниваться влево / вправо плавающим способом, например, блоки core / image, core / audio, ... Я имею в виду, что пользовательский интерфейс Gutenberg адаптируется к этой позиции, и вы можете иметь абзац вокруг выровненный / плавающий блок. Все очень натуральное / родное.

Я сравнивал 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.