Cómo modificar un bloque de imagen en Gutenberg WordPress 5

Después de investigar y probar varias opciones, he encontrado un par de soluciones. Estaba buscando una solución para "Gutenberg" para evitar usar str_replace.

Primero, necesitamos encolar nuestro JS e incluir el paquete wp.blocks

// Añadir a functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        // get_template_directory_uri() . '/js/gutenberg.js', // Para temas padres
        get_stylesheet_directory_uri() . '/js/gutenberg.js', // Para temas hijos
        array('wp-blocks') // Incluir el paquete wp.blocks             
    );
}

add_action('enqueue_block_editor_assets', 'gutenberg_enqueue');

A continuación, encontré un par de soluciones, la primera probablemente sea la mejor para tu caso específico.

Método #1

Usar una función de filtro para sobrescribir la clase predeterminada. En este caso, vamos a mantener la clase "wp-block-image" y simplemente añadir la clase de Bootstrap mt-2. Pero fácilmente podrías añadir cualquier clase que necesites. Añade el código siguiente y crea un nuevo bloque de imagen, inspecciónalo para ver que la etiqueta figure ahora tiene la nueva clase.

// Añadir a tu archivo 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
);

Método #2

Añadir un ajuste en la configuración de estilos del bloque en la barra lateral para añadir una clase a la imagen.

// Añadir a tu archivo JS

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

Esto añadirá tu clase, pero desafortunadamente Gutenberg antepone is-style- antes de la clase, resultando en is-style-test-image-class. Tendrías que ajustar tu CSS en consecuencia.

Método #3

Añadir manualmente la clase mediante la opción Bloque > Avanzado > Clase CSS adicional. Obviamente, la clase tendría que añadirse para cada bloque de imagen.

Nota: Al añadir o editar cualquiera de los JS anteriores, necesité eliminar el bloque, actualizar la página y volver a añadir el bloque para evitar un error de validación del bloque.

Referencias:

Variaciones de Estilo de Bloques

blocks.getBlockDefaultClassName

Usa el 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;
}

Funciona en WP 5.5.

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

La siguiente respuesta es una solución para Bootstrap 4 y centrar imágenes en una etiqueta <figure>.

Generado por WordPress por defecto:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="texto alternativo" class="wp-image-1391"/>
    <figcaption>Esta es una prueba de imagen.</figcaption>
</figure>

Usando preg_replace() y 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');

producirá:

<figure class="text-center my-3">
    <img class="figure-img img-fluid" src="http://localhost:8888/time.png" alt="texto alternativo" />
    <figcaption class="text-muted">Esta es una prueba de imagen.</figcaption>
</figure>

El código podría acortarse a:

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

Si quisieras añadir <small> podrías hacerlo así:

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

El resultado en el backend es el bloque de imagen sin selección de alineación:

Publicación renderizada:

La mejor manera de manejar problemas en el frontend de bloques principales es "sobrescribir el renderizado de bloques principales"

ejemplo:

<?php
function foo_gallery_render( $attributes, $content ) {
    /**
     * Aquí encontrarás un array con los IDs de todas 
     * las imágenes que están en tu galería.
     * 
     * por ejemplo: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * ¡Ahora diviértete consultándolas,
     * organizándolas y devolviendo tu marcado personalizado!
    */
    return '<h1>Galería renderizada personalizada</h1>';
}
function foo_register_gallery() {
    register_block_type( 'core/gallery', array(
        'render_callback' => 'foo_gallery_render',
    ) );
}
add_action( 'init', 'foo_register_gallery' );

Esto funciona para todos los bloques principales de Gutenberg, lo que significa que puedes aprovechar los excelentes bloques ya desarrollados y organizar su salida como desees.

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