Füge Container Div zu jedem Gutenberg-Block in WordPress hinzu

Lesezeit: 2 Minuten

Ich verwende den Gutenberg-Editor und das Bootstrap-CSS-Framework. Standardmäßig gibt es keinen Container oder ähnliches um einen Gutenberg-Block herum.

Einige der Blöcke haben eine alignwide und alignfull Möglichkeit, so etwas wie einen Container um sie herum hinzuzufügen. Diese Optionen eignen sich gut für Titelbilder oder Absätze.

Aber ein Headline-Block hat (standardmäßig) keine solche Option.

Und ich würde gerne jedem Gutenberg-Block ein zusätzliches Kontrollkästchen hinzufügen, um einen zusätzlichen Container umzuschalten div drumherum. Nicht nur eine Klasse.

Ich habe etwas gefunden, um jedem Gutenberg-Blog einen zusätzlichen Stil zu verleihen: https://www.billerickson.net/block-styles-in-gutenberg/

Hier der Code von dort:

wp.domReady( () => {

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

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

} );

Es funktioniert gut, um dem Block eine zusätzliche Klasse/Stil zu geben. Aber es wickelt nichts um den Block.

Gibt es eine Option, um so etwas wie einen Containerumschalter hinzuzufügen (adds div mit .container Klasse) zu einem Block?

Wenn jemand das auch braucht (wie ich) hat WordPress heutzutage schon einen anderen Filter, der einfacher zu implementieren ist, genannt render_block

https://developer.wordpress.org/reference/hooks/render_block/

Hier ist ein Beispiel

    function wporg_block_wrapper( $block_content, $block ) {
        if ( $block['blockName'] === 'core/paragraph' ) {
            $content="<div class="wp-block-paragraph">";
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        } elseif ( $block['blockName'] === 'core/heading' ) {
            $content="<div class="wp-block-heading">";
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        }
        return $block_content;
    }

    add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );

Es ist möglich, einen Wrapper zu einem Kernblock hinzuzufügen, indem man a verwendet Filter blockieren aber es ist nicht so einfach und ich würde nicht empfehlen, allen Kernblöcken eine Modifikation hinzuzufügen. Eine viel einfachere und flexiblere Lösung wäre das Hinzufügen von a benutzerdefinierter Wrapper-Block das akzeptiert InnerBlocks (aus wp.editor) als untergeordnete Elemente (Sie können sogar definieren, welche Blöcke akzeptiert werden sollen) und Unterstützung für Ausrichtungsoptionen (in der Symbolleiste) und einen Anker/eine ID in der Seitenleiste der Blockeinstellungen festlegen. Die Klasse für den Wrapper wird automatisch aus Ihrem Blocknamen erstellt. Sie können dann Ihren benutzerdefinierten Wrapper-Block nur dann verwenden, wenn Sie ihn benötigen, und jeden anderen Block darin einfügen (z. B. einen Headline-Block).

Sie müssen wahrscheinlich das blocks.getSaveElement verwenden, um das Element zu umschließen

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
);

  • Es funktioniert im Frontend, aber im Editor wird immer noch das Standard-Rendering angezeigt.

    – Laurent

    4. Mai 2021 um 8:24 Uhr

  • Dies liegt daran, dass Sie die Speicherfunktion mit dem Haken bearbeiten 'blocks.getSaveElement'. Vielleicht gibt es inzwischen eine Funktion zum Bearbeiten der Edit-Funktion.

    – Jonas Merhej

    8. Mai 2021 um 20:28 Uhr


1001350cookie-checkFüge Container Div zu jedem Gutenberg-Block in WordPress hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy