Wrapped custom block style element causes Gutenberg editor to lose Additionnal CSS Class on refresh

[piljac1]

Describe the bug
Once you modify the HTML structure of a block style element (by adding a wrapper in this case), the editor isn't able to retrieve the selected style.

To Reproduce
Steps to reproduce the behavior:

1. Register a new block style in a JavaScript file (in this case I also remove the original styles)

wp.domReady( function() {
    wp.blocks.registerBlockStyle( 'core/table', {
        name: 'custom-table',
        label: 'Custom Table',
        isDefault: true,
    } );
    
    wp.blocks.unregisterBlockStyle( 'core/table', 'regular' );
    wp.blocks.unregisterBlockStyle( 'core/table', 'stripes' );
} );

2. Create a JSX file and add a filter to modify the HTML structure of the returned element (in this case, I apply it on tables)

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'slug/modify-get-save-content-extra-props',
    modifyGetSaveContentExtraProps
);

function modifyGetSaveContentExtraProps( element, blockType, attributes  ) {
    if (blockType.name !== 'core/table') {
        return element;
    }

    return React.createElement(
        'div',
        { className: 'table-wrapper' },
        element
    );
}

3. Create a PHP file to enqueue scripts (also tested with enqueue_block_editor_assets, which gives me a Block validation failed error)

defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

function gestion_blocs_gutenberg_scripts() {
    wp_enqueue_script( 'custom_table_script', get_stylesheet_directory_uri() . '/inc/plugins/blocs-gutenberg/assets/js/custom_table.js', array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ) );
    wp_enqueue_script( 'custom_table_wrap', get_stylesheet_directory_uri() . '/inc/plugins/blocs-gutenberg/assets/js/table_wrap.jsx', array( 'wp-blocks', 'wp-element', 'wp-edit-post' ) );
}
add_action( 'enqueue_block_assets', 'gestion_blocs_gutenberg_scripts' );

4. Create a post, then create a custom block which can apply the style you created (a table in my case) and select the custom style.
   

5. Check if the custom style has been added to the Additional CSS Class input (it should have been added)
   

6. Save the post.

7. Refresh the page (post editing page).

8. Check the Additional CSS Class input... The class is gone !
   

Expected behavior
The block style CSS class should remain in the Additional CSS Class input as long as the block is still alive and the custom block style is applied.

Current behavior
The block style CSS class is being removed from the Additional CSS Class input when the editing page is reloaded even if the block was not deleted and the block style is still active.

Additional context
Wordpress version : 5.1

[youknowriad]

We don't recommend extending the "save" function of the blocks as it creates a lot of issues:

• invalid blocks
• classes applied to the wrong wrapper
  ...

If you want to wrap a Core Block in a plugin, consider using the server-side render_block instead. Thanks.

[youknowriad]

https://developer.wordpress.org/reference/hooks/render_block/