Как изменить блок изображения в Gutenberg WordPress 5?

После некоторых исследований и проб/ошибок я нашел несколько решений. Я искал решение для "Gutenberg", чтобы избежать использования str_replace.

Сначала нам нужно подключить наш JS и включить пакет wp.blocks.

// Добавить в functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        // get_template_directory_uri() . '/js/gutenberg.js', // Для родительских тем
        get_stylesheet_directory_uri() . '/js/gutenberg.js', // Для дочерних тем
        array('wp-blocks') // Включаем пакет wp.blocks             
    );
}

add_action('enqueue_block_editor_assets', 'gutenberg_enqueue');

Далее я нашел несколько решений, первое, вероятно, лучше всего подходит для вашего конкретного случая.

Метод #1

Используем функцию фильтра, чтобы переопределить класс по умолчанию. В этом случае мы сохраним класс "wp-block-image" и просто добавим нужный класс Bootstrap mt-2. Но вы легко можете добавить любой другой класс. Добавьте код ниже и создайте новый блок изображения, проверьте тег figure — теперь он содержит новый класс.

// Добавить в ваш 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
);

Метод #2

Добавляем настройку в панели стилей блока в боковой панели, чтобы добавить класс к изображению.

// Добавить в ваш JS файл

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

Это добавит ваш класс, но, к сожалению, Gutenberg добавляет префикс is-style-, поэтому результат будет is-style-test-image-class. Вам придется соответствующим образом скорректировать CSS.

Метод #3

Ручное добавление класса через Блок > Дополнительно > Дополнительные CSS классы. Очевидно, класс нужно добавлять для каждого блока изображения вручную.

Примечание: При добавлении или изменении любого из JS-кода выше мне потребовалось удалить блок, обновить страницу и затем заново добавить блок, чтобы избежать ошибки валидации блока.

Ссылки:

Вариации стилей блоков

blocks.getBlockDefaultClassName

Используйте хук фильтра 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;
}

Работает на WP 5.5.

Ссылка: https://wordpress.org/support/topic/modify-gutenberg-core-block-render-result/#post-11716464

Следующее решение предназначено для Bootstrap 4 и центрирования изображений внутри тега <figure>.

Стандартный вывод WordPress:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="альтернативный текст" class="wp-image-1391"/>
    <figcaption>Это тестовое изображение.</figcaption>
</figure>

Использование preg_replace() и 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');

Результат:

<figure class="text-center my-3">
    <img class="figure-img img-fluid" src="http://localhost:8888/time.png" alt="альтернативный текст" />
    <figcaption class="text-muted">Это тестовое изображение.</figcaption>
</figure>

Код может быть сокращён до:

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

Если вы хотите добавить <small>, это можно сделать так:

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

Результат в админке — блок изображения без выравнивания:

Отображение в записи:

Лучший способ решения проблем с отображением основных блоков — это "переопределение рендеринга основных блоков".

Пример:

<?php
function foo_gallery_render( $attributes, $content ) {
    /**
     * Здесь вы найдете массив с идентификаторами всех 
     * изображений, которые находятся в вашей галерее.
     * 
     * Например: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * Теперь можно запросить их,
     * организовать и вернуть свою собственную разметку!
     */
    return '<h1>Кастомный рендеринг галереи</h1>';
}
function foo_register_gallery() {
    register_block_type( 'core/gallery', array(
        'render_callback' => 'foo_gallery_render',
    ) );
}
add_action( 'init', 'foo_register_gallery' );

Это работает для всех основных блоков Гутенберга, что означает, что вы можете воспользоваться преимуществами уже разработанных блоков и настроить их вывод по своему усмотрению.

Ссылка: https://antistatique.net/en/we/blog/2019/01/29/gutenberg-override-core-blocks-rendering