WordPress Gutenberg Block Filter: Gallery

Aktuell baue ich mein neues Gutenberg Blank Theme, da ist mir aufgefallen das der WordPress Galerie Block nicht so super aussieht und funktioniert. Ich möchte ein paar Änderungen vornehmen damit es im Frontend schöner aussieht und besser funktioniert.

Da ich für mein Blank Theme das CSS Framework Uikit3 verwende integriere ich folgende Komponenten:

• Lightbox: Mein Galerie Block soll per Klick die Bilder in einer Lightbox vergrößern
• Grid: Anstelle des default Grids nehme ich das Uikit Grid.

Gutenberg Module anzupassen ist im Normalfall gar nicht so leicht, aber es gibt zum Glück einen Filter render_block mit dem man die HTML Ausgabe ein bisschen ändern kann.

Standard Galerie Block Ausgabe

Wenn du einen Galerie Block verwendest, sieht das ausgegebene HTML in etwa so aus.

<figure class="wp-block-gallery alignfull">
    <figure class="wp-block-image size-large">
        <a href="...">
            <img loading="lazy" width="..." height="..." data-id=".." src="..." alt="..." class="...">
        </a>
    </figure>
    <figure class="wp-block-image size-large">
        <a href="...">
            <img loading="lazy" width="..." height="..." data-id=".." src="..." alt="..." class="...">
        </a>
    </figure>
</figure>

Die gewünschte / angepasste Ausgabe

<div class="wp-block-gallery alignfull">
    <div class="uk-grid" data-uk-grid data-uk-lightbox="animation:slide">
        <div class="uk-width-1-1 [email protected]">
            <figure class="wp-block-image size-large">
                <a href="...">
                    <img loading="lazy" width="..." height="..." src="..." alt="..." class="...">
                </a>
            </figure>
        </div>
        <div class="uk-width-1-1 [email protected]">
            <figure class="wp-block-image size-large">
                <a href="...">
                    <img loading="lazy" width="..." height="..." src="..." alt="..." class="...">
                </a>
            </figure>
        </div>
    </div>
</div>

Gutenberg Gallery Block anpassen

Füge folgenden Filter in dein Theme ein um die WP Galerie mit Uikit3 Klassen und Funktionen anzupassen oder nutze den Beispielfilter um dein eigenes HTML anzupassen.

function uikit_gallery_block( $block_content, $block ) {

    // Filter nur bei WP Gallery Block anwenden
    if ( $block['blockName'] !== "core/gallery" ) {
        return $block_content;
    }

    $gallery_html = '';

    if ( array_key_exists( 'innerBlocks', $block ) && is_array( $block['innerBlocks'] ) ) {

        // Überprüfe wie viele Bilder ausgegeben werden und grid Klassen setzen.
        $grid_class = 'uk-width-1-1 [email protected]';
        $image_count = (int) count( $block['innerBlocks'] );
        if ( 1 === $image_count ) {
            $grid_class = 'uk-width-1-1';
        }
        if ( 2 === $image_count || 4 === $image_count ) {
            $grid_class = 'uk-width-1-1 [email protected]';
        }

        // Überprüfe ob wir .uk-lightbox integrieren müssen.
        $lightbox = '';
        if ( 'media' === $block['attrs']['linkTo'] ) {
            $lightbox = 'data-uk-lightbox="animation:slide"';
        }

        // Setze Align Klasses erneut.
        $align_class = '';
        if ( 'full' === $block['attrs']['align'] ) {
            $align_class = 'alignfull';
        }
        if ( 'wide' === $block['attrs']['align'] ) {
            $align_class = 'alignwide';
        }

        // Align Class erneut setzen und $lightbox Attribut setzen.
        $gallery_html .= 
        '<div class="wp-block-gallery '. $align_class .'">
            <div class="uk-grid" data-uk-grid '. $lightbox .'>';
        
        foreach( $block['innerBlocks'] as $innerBlock ) {
            if ( isset($innerBlock['blockName'] ) && $innerBlock['blockName'] === 'core/image' ) {

                $gallery_html .= '<div class="'. $grid_class .'">';
                    
                    // Die innerBlocks so wie sie sind ausgeben core/image (die einzelnen Bilder).
                    $gallery_html .= $innerBlock['innerHTML'];

                $gallery_html .= '</div>';

            }
        }

        $gallery_html .= 
            '</div>
        </div>';

    }

    return $gallery_html ;
    
}
add_filter( 'render_block', 'uikit_gallery_block', 10, 2 );