Add classname to Gutenberg block wrapper in the editor?

Question

I'm trying to create custom columns block in Gutenberg. Is it possible to add class to the wrapper of the element in the editor based on the attributes? I'd like to switch ??? to class based e.g. columns-4. Otherwise it's not possible to use flex.

<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
 <div>
      <div class="this-can-be-set-in-edit-or-attributes">
         ...
     </div>
 </div>

</div>

Answer 1

Actually it can be done with the filter:

const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        if(props.attributes.size) {
            return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
        } else {
            return <BlockListBlock {...props} />
        }

    };
}, 'withClientIdClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withCustomClassName );

Answer 2

I think is also possible to manage wrapper classes with useBlockProps. I found this solution in the official Gutenberg doc, here

import { useBlockProps } from '@wordpress/block-editor';

// ...
const blockSettings = {
apiVersion: 2,

// ...

edit: () => {
    const blockProps = useBlockProps( {
        className: 'my-random-classname',
    } );

    return <div { ...blockProps }>Your block.</div>;
},
};