Render_blocks è uno shortcode esclusivo del wordpress Gpci framework e serve a generare uno o più blocchi gutenberg inline o in zone in cui non sarebbe facilmente permesso. Questo shortcode è nato soprattutto per inserire semplicemente un'immagine o un'icona inline, ma poi ho deciso di espanderlo a tutti i blocchi in quanto voglio che il codice html finale sia il più omogeneo possibile. E' comunque uno shortcode ancora sperimentale: nei casi semplici dovrebbe funzionare senza problemi, nei casi di blocchi nested o multipli potrebbero esserci per ora delle incongruenze.
Attributi
Lo shortcode per ora ha un solo attributo:
blocks
Contenuto convertito del blocco o dei blocchi gutenberg. E' da specificare subito che le virgolette che racchiudono il contenuto dell'attributo in questo attributo devono essere singole. Utilizzare il convertitore blocco/shortcode in quanto pensa già a tutto. I blocchi utilizzabili come contenuto devono essere messi preventivamente in whitelist in quanto nel frontend verrà eseguita una verifica dei nomi dei blocchi con quelli approvati. Se esiste anche solo un blocco non in whitelist lo shortcode non funzionerà e il suo contenuto diventerà un messaggio di errore.
Esempi
Per ora gli esempi sono limitati ai casi semplici come immagine e icona.
Genera un'immagine inline a un paragrafo:
Blocco gutenberg originale:
<!-- wp:image {"id":3303,"sizeSlug":"thumbnail","linkDestination":"none","ClientId":"8a584144-6674-43da-a8fc-a9914b1776d6","AdminOnlySettings":[]} -->
<figure class="wp-block-image size-thumbnail"><img src="https://www.gigitopcinformatica.it/wp-content/uploads/paesaggio-autunno.jpg-220x141.webp" alt="" class="wp-image-3303"/></figure>
<!-- /wp:image -->Blocco convertito a shortcode:
[render_blocks blocks='<!-- wp:image {"id":3303,"sizeSlug":"thumbnail","linkDestination":"none"} --><figure class="wp-block-image size-thumbnail"><img src="https://www.gigitopcinformatica.it/wp-content/uploads/paesaggio-autunno.jpg-220x141.webp" alt="" class="wp-image-3303"/></figure><!-- /wp:image -->']Risultato dello shortcode:
paragrafo inline:
Genera un'icona inline a un titolo:
Blocco gutenberg originale:
<!-- wp:gpci/icon {"SvgOutputType":"id","SvgContent":"house","textColor":"verde","style":{"elements":{"link":{"color":{"text":"var:preset|color|verde"}}}},"ClientId":"d7613713-f6e4-460d-b3c4-48458caa7dae","AdminOnlySettings":[]} -->
<div class="wp-block-gpci-icon has-verde-color has-text-color has-link-color" style="width:3rem;height:3rem;fill:currentColor"><svg><use xlink:href="#house"></use></svg></div>
<!-- /wp:gpci/icon -->Blocco convertito a shortcode:
[render_blocks blocks='<!-- wp:gpci/icon {"SvgOutputType":"id","SvgContent":"house","textColor":"verde","style":{"elements":{"link":{"color":{"text":"var:preset|color|verde"}}}}} --><div class="wp-block-gpci-icon has-verde-color has-text-color has-link-color" style="width:3rem;height:3rem;fill:currentColor"><svg><use xlink:href="#house"></use></svg></div><!-- /wp:gpci/icon -->']Risultato dello shortcode: