Come estendere il blocco galleria in Gutenberg?

Ok, ho sperimentato con questo per un po' e sono riuscito a modificare l'output del blocco Gallery, con le seguenti avvertenze:

• L'anteprima non corrisponde all'output. Penso che sia possibile ma sembra essere un po' più complesso.
• Alcune classi e markup sono necessari nell'output affinché il blocco possa analizzare il contenuto e mantenerlo modificabile. Queste classi hanno stili front-end che dovranno essere gestiti. Non sono sicuro a questo punto se esista un modo per filtrare come il blocco fa questo. Se fosse possibile, potrebbe non essere nemmeno una buona idea se significa che i blocchi Gallery si rompono quando un tema o un plugin viene disattivato. Un blocco completamente nuovo sarebbe probabilmente la strada da percorrere per situazioni dove ciò sarebbe richiesto.
• Non sono veramente sicuro di come funzionino le dimensioni delle immagini a questo stadio.
• Il metodo degli hook JavaScript utilizzati potrebbe non essere rilevante nella versione finale. Gutenberg utilizza @wordpress/hooks mentre la discussione su quale sistema di hook utilizzare in Core è in corso.
• Poiché l'output dei Blocchi viene salvato come HTML, non come shortcode o meta, non sarà possibile modificare l'output delle Gallerie esistenti senza modificarle.

La prima cosa che dobbiamo fare è registrare uno script. Questo viene fatto con wp_enqueue_scripts(), ma sull'hook enqueue_block_editor_assets.

Lo script dovrebbe avere lo script wp-blocks come dipendenza. È quasi certamente già caricato nell'editor, ma impostarlo come dipendenza presumibilmente assicura che venga caricato prima del nostro script.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

L'HTML per l'output di un blocco è gestito dal metodo save() del blocco. Puoi vedere quello del blocco Gallery in questo file.

A questo stadio (marzo 2018) Gutenberg supporta un filtro sul metodo save dei blocchi, blocks.getSaveElement. Possiamo aggiungere un hook a questo in JavaScript in questo modo:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

Il primo argomento è il nome dell'hook, il secondo argomento è - credo - un namespace, e l'ultimo argomento è la funzione di callback.

Poiché stiamo sostituendo il metodo save() del blocco, dobbiamo restituire un nuovo elemento. Tuttavia, questo non è un normale elemento HTML che dobbiamo restituire. Dobbiamo restituire un elemento React.

Quando guardi il metodo save() originale del blocco, quello che vedi è JSX. React, che Gutenberg utilizza sotto il cofano, lo supporta per il rendering degli elementi. Vedi questo articolo per maggiori informazioni su questo.

JSX normalmente richiede un passaggio di build, ma poiché non sto introducendo un passaggio di build per questo esempio, abbiamo bisogno di un modo per creare un elemento senza JSX. React lo fornisce con createElement(). WordPress fornisce un wrapper per questo e altre funzionalità React nella forma di wp.element. Quindi per usare createElement() usiamo wp.element.createElement().

Nella funzione di callback per blocks.getSaveElement otteniamo:

• element L'elemento originale creato dal blocco.
• blockType Un oggetto che rappresenta il blocco utilizzato.
• attributes Le proprietà dell'istanza del blocco. Nel nostro esempio questo include le immagini nella galleria e impostazioni come il numero di colonne.

Quindi la nostra funzione di callback deve:

• Restituire l'elemento originale per le gallerie non-blocco.
• Prendere gli attributi, in particolare le immagini, e creare un nuovo elemento React che rappresenta la galleria.

Ecco un esempio completo che semplicemente restituisce un ul con una classe, my-gallery, e li per ogni immagine con la classe my-gallery-item e un img in ognuno con l'attributo src impostato all'URL dell'immagine.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Alcune cose da notare:

• Il blocco galleria originale trova le immagini cercando ul.wp-block-gallery .blocks-gallery-item, quindi questo markup e quelle classi sono necessari per poter modificare il blocco. Questo markup è anche utilizzato per lo stile predefinito.
• attributes.images.map sta iterando su ogni immagine e restituendo un array di elementi figli come contenuto per l'elemento principale. All'interno di questi elementi c'è un altro elemento figlio per l'immagine stessa.