Ok, ci sto giocando da un po 'e sono riuscito a cambiare l'output del blocco Gallery, con le seguenti avvertenze:
- L'anteprima non corrisponde all'output. Penso che questo sia possibile ma sembra essere un po 'più coinvolto.
- Alcune classi e markup sono richiesti nell'output affinché il blocco sia in grado di analizzare il contenuto e mantenerlo modificabile. Queste classi hanno stili front-end che dovranno essere affrontati. Non sono sicuro a questo punto se c'è un modo per filtrare come fa il blocco. Se fosse possibile, potrebbe anche non essere una buona idea se ciò significa che i blocchi della Galleria vengono interrotti quando un tema o un plugin è disattivato. Un blocco totalmente nuovo sarebbe probabilmente la strada da percorrere per situazioni in cui ciò sarebbe richiesto.
- Non sono sicuro di come funzionino le dimensioni delle immagini in questa fase.
- Il metodo di hook JavaScript utilizzato potrebbe non essere rilevante nella versione finale. Gutenberg utilizza
@wordpress/hooksmentre discussione su quello che aggancia sistema di utilizzare Core è in corso .
- Poiché l'output di Blocks viene salvato come HTML, non come shortcode o meta, non sarà possibile modificare l'output di gallerie esistenti senza modificarle.
La prima cosa che dobbiamo fare è registrare uno script. Questo viene fatto con wp_enqueue_scripts(), ma al enqueue_block_editor_assetsgancio.
Lo script dovrebbe avere lo wp-blocksscript come dipendenza. Quasi certamente è già caricato nell'editor, ma renderlo una dipendenza presumibilmente garantisce che sia 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 save()metodo del blocco. Puoi vedere i blocchi della Gallery in questo file .
In questa fase (marzo 2018) Gutenberg supporta un filtro sul metodo di salvataggio di 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 hook, il secondo argomento è - penso - uno spazio dei nomi e l'ultimo argomento è la funzione di callback.
Poiché stiamo sostituendo il save()metodo del blocco, è necessario restituire un nuovo elemento. Tuttavia, questo non è un normale elemento HTML che dobbiamo restituire. Dobbiamo restituire un elemento React .
Quando guardi il save()metodo del blocco originale quello che vedi è JSX. React, che Gutenberg usa sotto il cofano, lo supporta per il rendering di elementi. Vedi questo articolo per saperne di più.
JSX richiede normalmente un passaggio di creazione, ma poiché non sto introducendo un passaggio di creazione per questo esempio, abbiamo bisogno di un modo per creare un elemento senza JSX. React fornisce questo createElement(). WordPress fornisce un wrapper per questa e altre funzionalità di reazione sotto forma di wp.element. Quindi per usare createElement()usiamo wp.element.createElement().
Nella funzione di callback per blocks.getSaveElementotteniamo:
element L'elemento originale creato dal blocco.blockType Un oggetto che rappresenta il blocco in uso.attributesLe proprietà dell'istanza di blocco. Nel nostro esempio questo include le immagini nella galleria e le impostazioni come il numero di colonne.
Quindi la nostra funzione di callback deve:
- Restituisce l'elemento originale per le gallerie non bloccate.
- Prendi gli attributi, in particolare le immagini, e creane uno nuovo che rappresenti la galleria.
Ecco un esempio completo che mostra semplicemente a ulcon una classe, my-gallerye lis per ogni immagine con la classe my-gallery-iteme e imgin ognuna con il srcset nell'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 prendere in considerazione:
- Il blocco della galleria originale trova le immagini cercando
ul.wp-block-gallery .blocks-gallery-item, quindi questo markup e quelle classi sono necessarie per rendere possibile la modifica del blocco. Questo markup viene utilizzato anche per lo stile predefinito.
attributes.images.mapesegue il ciclo su ogni immagine e restituisce una matrice di elementi figlio come contenuto per l'elemento principale. All'interno di questi elementi c'è un altro elemento figlio per l'immagine stessa.