Cum să extinzi blocul de galerie în Gutenberg?

OK, am experimentat cu asta pentru o vreme și am reușit să modific output-ul blocului Gallery, cu următoarele limitări:

• Previzualizarea nu se potrivește cu output-ul. Cred că acest lucru este posibil, dar pare a fi mai complex.
• Anumite clase și markup sunt necesare în output pentru ca blocul să poată analiza conținutul și să-l păstreze editabil. Aceste clase au stiluri pentru front-end care vor trebui gestionate. Nu sunt sigur în acest moment dacă există o modalitate de a filtra cum face blocul acest lucru. Chiar dacă ar fi posibil, s-ar putea să nu fie o idee bună dacă înseamnă că blocurile Gallery sunt stricate atunci când o temă sau un plugin este dezactivat. Un bloc complet nou ar fi probabil soluția pentru situațiile în care acest lucru ar fi necesar.
• Nu sunt sigur cum funcționează dimensiunile imaginilor în acest stadiu.
• Metoda de hook-uri JavaScript folosită s-ar putea să nu fie relevantă în versiunea finală. Gutenberg folosește @wordpress/hooks în timp ce discuția despre ce sistem de hook-uri să fie folosit în Core este în desfășurare.
• Deoarece output-ul blocurilor este salvat ca HTML, nu ca shortcode sau meta, nu va fi posibil să modifici output-ul galeriilor existente fără să le editezi.

Primul lucru pe care trebuie să-l facem este să înregistrăm un script. Acest lucru se face cu wp_enqueue_scripts(), dar pe hook-ul enqueue_block_editor_assets.

Scriptul ar trebui să aibă wp-blocks ca dependință. Este aproape sigur că este deja încărcat în editor, dar marcându-l ca dependință asigurăm că este încărcat înaintea scriptului nostru.

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

HTML-ul pentru output-ul unui bloc este gestionat de metoda save() a blocului. Puteți vedea metoda pentru blocul Gallery în acest fișier.

În acest stadiu (martie 2018), Gutenberg suportă un filtru pe metoda save() a blocurilor, blocks.getSaveElement. Putem adăuga un hook pentru acesta în JavaScript astfel:

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

Primul argument este numele hook-ului, al doilea este - cred - un namespace, iar ultimul argument este funcția callback.

Deoarece înlocuim metoda save() a blocului, trebuie să returnăm un element nou. Totuși, acesta nu este un element HTML normal pe care trebuie să-l returnăm. Trebuie să returnăm un element React.

Când te uiți la metoda save() originală a blocului, vezi JSX. React, pe care Gutenberg îl folosește în spate, suportă JSX pentru randarea elementelor. Consultați acest articol pentru mai multe detalii.

JSX necesită în mod normal un pas de build, dar deoarece nu introduc un pas de build pentru acest exemplu, avem nevoie de o modalitate de a crea un element fără JSX. React oferă acest lucru cu createElement(). WordPress oferă un wrapper pentru această funcționalitate și alte funcționalități React sub forma wp.element. Deci, pentru a folosi createElement(), folosim wp.element.createElement().

În funcția callback pentru blocks.getSaveElement primim:

• element Elementul original creat de bloc.
• blockType Un obiect care reprezintă blocul folosit.
• attributes Proprietățile instanței blocului. În exemplul nostru, acestea includ imaginile din galerie și setări precum numărul de coloane.

Deci, funcția noastră callback trebuie să:

• Returneze elementul original pentru galeriile care nu sunt blocuri.
• Preia atributele, în special imaginile, și creează un nou element React din ele reprezentând galeria.

Iată un exemplu complet care simplu afișează un ul cu o clasă, my-gallery, și li pentru fiecare imagine cu clasa my-gallery-item și un img în fiecare cu src setat la URL-ul imaginii.

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
}

Câteva aspecte de remarcat:

• Blocul original de galerie găsește imagini căutând ul.wp-block-gallery .blocks-gallery-item, deci acest markup și aceste clase sunt necesare pentru ca editarea blocului să fie posibilă. Acest markup este folosit și pentru stilizarea implicită.
• attributes.images.map parcurge fiecare imagine și returnează un array de elemente copil ca conținut pentru elementul principal. În interiorul acestor elemente există un alt element copil pentru imaginea în sine.