经过一些挖掘和尝试/错误，我想出了几个解决方案。我在寻找一种“古腾堡”解决方案，这样我就可以避免使用str_replace.

首先，我们需要将JS排队并包含wp。blocks包

// Add to functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        \'myguten-script\',
        // get_template_directory_uri() . \'/js/gutenberg.js\', // For Parent Themes
        get_stylesheet_directory_uri() . \'/js/gutenberg.js\', // For Child Themes
        array(\'wp-blocks\') // Include wp.blocks Package             
    );
}

add_action(\'enqueue_block_editor_assets\', \'gutenberg_enqueue\');

接下来，我找到了两种解决方案，第一种可能最适合您的特定用例。

Method #1

使用筛选函数重写默认类。在这种情况下，我们将保留“wp block image”类，只需添加所需的引导类mt-2。但是你可以很容易地添加任何你想要的类。添加下面的代码并创建一个新的图像块，检查它以查看figure标记现在具有新的类。

// Add to your JS file

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

<小时>

Method #2

在侧栏的“块样式设置”中添加设置，以向图像添加类。

// Add to your JS file

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

这将添加您的类，但不幸的是，Gutenberg在类之前附加了is style，因此它将生成is style test image类。您必须相应地调整CSS。

<小时>

Method #3

通过“块>高级>附加CSS类”选项手动添加类。显然，需要为每个图像块添加该类。

<人力资源>Note: 当添加或编辑上面的任何JS时，我需要删除块，刷新页面，然后重新添加块，以避免block validation error.

References:

Block Style Variations

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

工作包5.5。

参考号：https://wordpress.org/support/topic/modify-gutenberg-core-block-render-result/#post-11716464

下面的答案是引导4和在<figure> 标签

WordPress生成的默认值：

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="alt text" class="wp-image-1391"/>
    <figcaption>This is an image test.</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="alt text" />
    <figcaption class="text-muted">This is an image test.</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 ) {
    /**
     * Here you find an array with the ids of all 
     * the images that are in your gallery.
     * 
     * for example: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * Now have fun querying them,
     * arrangin them and returning your constructed markup!
    */
    return \'<h1>Custom rendered gallery</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