Modificarea unui bloc de imagine în Gutenberg WordPress 5

După ce am cercetat și am încercat diverse soluții, am găsit câteva variante. Căutam o soluție pentru "Gutenberg" pentru a evita utilizarea str_replace.

Mai întâi, trebuie să încărcăm JS-ul nostru și să includem pachetul wp.blocks

// Adăugat în functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        // get_template_directory_uri() . '/js/gutenberg.js', // Pentru teme părinte
        get_stylesheet_directory_uri() . '/js/gutenberg.js', // Pentru teme copil
        array('wp-blocks') // Include pachetul wp.blocks             
    );
}

add_action('enqueue_block_editor_assets', 'gutenberg_enqueue');

Apoi, am găsit câteva soluții, prima fiind probabil cea mai bună pentru cazul tău specific.

Metoda #1

Folosește o funcție de filtru pentru a suprascrie clasa implicită. În acest caz, vom păstra clasa "wp-block-image" și vom adăuga clasa necesară din Bootstrap, mt-2. Dar poți adăuga orice clasă dorești. Adaugă codul de mai jos și creează un nou bloc de imagine, inspectează-l pentru a vedea că tag-ul figure are acum noua clasă.

// Adăugat în fișierul 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
);

Metoda #2

Adaugă o setare în panoul lateral pentru stilurile blocului, pentru a adăuga o clasă imaginii.

// Adăugat în fișierul JS

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

Aceasta va adăuga clasa ta, dar din păcate Gutenberg adaugă prefixul "is-style-" înaintea clasei, rezultând în "is-style-test-image-class". Va trebui să ajustezi CSS-ul în consecință.

Metoda #3

Adăugarea manuală a clasei prin opțiunea Bloc > Avansat > Clasă CSS suplimentară. Evident, clasa va trebui adăugată pentru fiecare bloc de imagine.

Notă: Când adaugi sau editezi oricare dintre codurile JS de mai sus, a fost necesar să șterg blocul, să reîncarci pagina și apoi să adaug blocul din nou pentru a evita eroarea de validare a blocului.

Referințe:

Variații de stil pentru blocuri

blocks.getBlockDefaultClassName

Folosește hook-ul de filtrare 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;
}

Funcționează pe WP 5.5.

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

Următorul răspuns este o soluție pentru Bootstrap 4 și centrarea imaginilor într-un tag <figure>.

Generat implicit de WordPress:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="text alternativ" class="wp-image-1391"/>
    <figcaption>Acesta este un test de imagine.</figcaption>
</figure>

Folosind preg_replace() și 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');

va produce:

<figure class="text-center my-3">
    <img class="figure-img img-fluid" src="http://localhost:8888/time.png" alt="text alternativ" />
    <figcaption class="text-muted">Acesta este un test de imagine.</figcaption>
</figure>

Codul poate fi scurtat la:

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

dacă doriți să adăugați <small> puteți face asta astfel:

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

rezultatul în backend este blocul de imagine fără selecție de aliniere:

postare randată:

Cea mai bună metodă de a rezolva problemele de frontend ale blocurilor de bază este "suprascrierea randării blocurilor de bază"

exemplu :

<?php
function foo_gallery_render( $attributes, $content ) {
    /**
     * Aici găsiți un array cu ID-urile tuturor 
     * imaginilor care se află în galeria dumneavoastră.
     * 
     * de exemplu: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * Acum vă puteți distra interogându-le,
     * aranjându-le și returnând markup-ul construit!
    */
    return '<h1>Galerie randată personalizat</h1>';
}
function foo_register_gallery() {
    register_block_type( 'core/gallery', array(
        'render_callback' => 'foo_gallery_render',
    ) );
}
add_action( 'init', 'foo_register_gallery' );

Această metodă funcționează pentru toate blocurile de bază Gutenberg, ceea ce înseamnă că puteți beneficia de blocurile deja dezvoltate și le puteți aranja output-ul după preferințele dumneavoastră.

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