Come modificare un blocco immagine in Gutenberg WordPress 5?

Dopo alcune ricerche e tentativi/errori, ho trovato un paio di soluzioni. Cercavo una soluzione "Gutenberg" per evitare di usare str_replace.

Innanzitutto, dobbiamo caricare il nostro JS e includere il pacchetto wp.blocks

// Aggiungi a functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        // get_template_directory_uri() . '/js/gutenberg.js', // Per temi genitore
        get_stylesheet_directory_uri() . '/js/gutenberg.js', // Per temi figlio
        array('wp-blocks') // Includi il pacchetto wp.blocks             
    );
}

add_action('enqueue_block_editor_assets', 'gutenberg_enqueue');

Successivamente, ho trovato un paio di soluzioni, la prima è probabilmente la migliore per il tuo caso d'uso specifico.

Metodo #1

Usa una funzione di filtro per sovrascrivere la classe predefinita. In questo caso manterremo la classe "wp-block-image" e aggiungeremo solo la classe bootstrap necessaria mt-2. Ma potresti facilmente aggiungere qualsiasi classe desiderata. Aggiungi il codice qui sotto e crea un nuovo blocco immagine, ispezionalo per vedere che il tag figure ora ha la nuova classe.

// Aggiungi al tuo file JS

function setBlockCustomClassName(className, blockName) {
    return blockName === 'core/image' ?
        'wp-block-image mt-2' :
        className;
}

wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'my-plugin/set-block-custom-class-name',
    setBlockCustomClassName
);

Metodo #2

Aggiungi un'impostazione nelle impostazioni degli stili dei blocchi nella barra laterale per aggiungere una classe all'immagine.

// Aggiungi al tuo file JS

wp.blocks.registerBlockStyle('core/image', {
    name: 'test-image-class',
    label: 'Test Class'
});

Questo aggiungerà la tua classe ma sfortunatamente Gutenberg antepone is-style- prima della classe, quindi il risultato sarà is-style-test-image-class. Dovresti adattare il tuo CSS di conseguenza.

Metodo #3

Aggiunta manuale della classe tramite l'opzione Blocco > Avanzato > Classe CSS aggiuntiva. Ovviamente, la classe dovrebbe essere aggiunta per ogni blocco immagine.

Nota: Quando aggiungi o modifichi uno degli JS sopra, ho dovuto eliminare il blocco, aggiornare la pagina e poi riaggiungere il blocco per evitare un errore di validazione del blocco.

Riferimenti:

Variazioni di stile dei blocchi

blocks.getBlockDefaultClassName

Usa l'hook del filtro render_block:

add_filter( 'render_block', 'wrap_my_gallery_block', 10, 2 );

function wrap_my_gallery_block( $block_content, $block ) {

    if ( 'core/gallery' !== $block['blockName'] ) {
        return $block_content;
    }

    $return  = 'my-gallery-block<div class="my-gallery-block">';
    $return .= $block_content;
    $return .= '</div>';

    return $return;
}

Funziona su WP 5.5.

Riferimento: https://wordpress.org/support/topic/modify-gutenberg-core-block-render-result/#post-11716464

La seguente risposta è una soluzione per Bootstrap 4 e il centraggio delle immagini in un tag <figure>.

Default generato da WordPress:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="testo alternativo" class="wp-image-1391"/>
    <figcaption>Questo è un test di immagine.</figcaption>
</figure>

Utilizzando preg_replace() e the_content:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>(.*?)<\/figcaption><\/figure>/i";
    $replacement    = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted">$3</figcaption></figure>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

produrrà:

<figure class="text-center my-3">
    <img class="figure-img img-fluid" src="http://localhost:8888/time.png" alt="testo alternativo" />
    <figcaption class="text-muted">Questo è un test di immagine.</figcaption>
</figure>

Il codice potrebbe essere abbreviato in:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>/i";
    $replacement    = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted">';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

se si volesse aggiungere <small> si potrebbe fare così:

function add_image_fluid_class($content) {
    global $post;
    $pattern       = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>(.*?)<\/figcaption><\/figure>/i";
    $replacement   = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted"><small>$3</small></figcaption></figure>';
    $content       = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

il risultato nel backend è il blocco immagine senza selezione di allineamento:

post renderizzato:

Il modo migliore per gestire i problemi di frontend dei blocchi core è "sovrascrivere il rendering dei blocchi core".

esempio:

<?php
function foo_gallery_render( $attributes, $content ) {
    /**
     * Qui trovi un array con gli ID di tutte 
     * le immagini presenti nella tua galleria.
     * 
     * per esempio: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * Ora divertiti a richiamarle,
     * organizzarle e restituire il tuo markup personalizzato!
    */
    return '<h1>Galleria renderizzata personalmente</h1>';
}
function foo_register_gallery() {
    register_block_type( 'core/gallery', array(
        'render_callback' => 'foo_gallery_render',
    ) );
}
add_action( 'init', 'foo_register_gallery' );

Questo funziona per tutti i blocchi core di Gutenberg, il che significa che puoi sfruttare i fantastici blocchi già sviluppati e organizzare il loro output come preferisci.

Riferimento: https://antistatique.net/en/we/blog/2019/01/29/gutenberg-override-core-blocks-rendering