How to modify an image block in Gutenberg WordPress 5?

Adding images to a post with the block editor:

produces the code figure of:

<figure class="wp-block-image">
    <img src="https://localhost:8888/time.png" alt="alt text" class="wp-image-1391"/>
    <figcaption>This is an image test.</figcaption>
</figure>

but I’m using Bootstrap 4 and would like to add Spacing (such as mt-2) and to remove the image class wp-image-1391, result:

<figure class="mt-2">
    <img src="https://localhost:8888/time.png" alt="alt text" class="img-fluid"/>
    <figcaption>This is an image test.</figcaption>
</figure>

or be able to modify it to a div:

<div class="mt-2">
    <img src="https://localhost:8888/time.png" alt="alt text" class="img-fluid"/>
    <figcaption>This is an image test.</figcaption>
</div>

Researching I’ve found get_image_tag_class but testing:

function example_add_img_class($class) {
    return $class . ' img-fluid';    
}
add_filter('get_image_tag_class','example_add_img_class');

doesn’t work. Reading “How can I prevent WordPress from adding extra classes to element in the WYSIWYG editor” I tested:

add_filter('get_image_tag_class','__return_empty_string');

but doesn’t work. I can modify the <img> with a preg_replace using the_content add_filter:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<img(.*?)class=\"(.*?)\"(.*?)>/i";
    $replacement="<img$1class="$2 img-fluid"$3>";
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

but I’ve read that targeting the_content with regex can yield mixed results. I could solve the issue with a simple CSS:

figure img {
    width:100%;
    height:auto;
}
figure figcaption {
    text-align:center;
    font-size:80%;
}

but I’d like to understand more of what filters I can use to modify WordPress. How can I add and remove classes and change figure to a div?

After some digging and trial/error I have came up with a couple solutions. I was looking for a “Gutenberg” solution so I could avoid using str_replace.

First, we need to enqueue our JS and include the wp.blocks package

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

Next, I found a couple solutions, the first is probably the best for your specific use-case.

Method #1

Use a filter function to override the default class. Well, in this case we are going to keep the “wp-block-image” class and just add the needed bootstrap class mt-2. But you could easily add whatever class you wanted. Add the code below and create a new image block, inspect it to see the figure tag now has the new class.

// 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 a setting in the block styles settings in the sidebar to add a class to the image.

// Add to your JS file

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

This will add your class but unfortunately Gutenberg appends is-style- before the class, so it results in is-style-test-image-class. You would have to adjust your CSS accordingly.

Method #3

Manually adding the class via the Block > Advanced > Additional CSS Class option. Obviously, the class would need to be added for each image block.

Note: When adding or editing any of the JS above I needed to delete the block, refresh the page and then re-add the block to avoid getting a block validation error.

References:

Block Style Variations

blocks.getBlockDefaultClassName