Добавить контейнер Div для каждого блока Гутенберга в WordPress

Question

Я использую редактор Gutenberg и фреймворк Bootstrap CSS.По умолчанию, вокруг блока Гутенберга нет контейнера или чего-то подобного.

В некоторых блоках есть опция alignwide и alignfull для добавления чего-то вроде контейнера вокруг них.Эти параметры хороши для обложек или абзацев.

Но в блоке заголовка (по умолчанию) такой опции нет.

И я хотел бы добавить дополнительный флажок для каждого блока Гутенберга, чтобыпереключить дополнительный контейнер div вокруг него.Не просто класс.

Я нашел что-то, чтобы добавить дополнительный стиль к каждому блогу Гутенберга: https://www.billerickson.net/block-styles-in-gutenberg/

Вот код оттуда:

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

Хорошо работает, чтобы придать блоку дополнительный класс / стиль.Но это не оборачивает что-то вокруг блока.

Есть ли возможность добавить что-то вроде переключения контейнера (добавляет div с .container классом) в блок?

Answer 1

Можно добавить обертку в основной блок с помощью блочного фильтра , но это не так просто, и я бы не рекомендовал добавлять модификацию ко всем основным блокам. Гораздо более простым и гибким решением было бы добавить пользовательский блок-оболочку , который принимает InnerBlocks (из wp.editor) в качестве дочерних элементов (вы даже можете определить, какие блоки принимать) и установить поддержка параметров выравнивания (на панели инструментов) и привязки / идентификатора на боковой панели настроек блока. Класс для оболочки будет автоматически создан из вашего имени блока. Затем вы можете использовать свой пользовательский блок-обертку, только если он вам нужен, и поместить в него все остальные блоки (например, блок заголовка).

Answer 2

Возможно, вам придется использовать blocks.getSaveElement, чтобы обернуть элемент

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsaveelement

function modifyGetSaveContentExtraProps( element, blockType, attributes ) {
    return (
        <div className = 'heading-wrapper' >
            { element }
        </div>
    );
}


wp.hooks.addFilter(
    'blocks.getSaveElement',
    'slug/modify-get-save-content-extra-props',
    modifyGetSaveContentExtraProps
);