Possible to have custom class name for gutenberg blocks?

Feature Request
1

Hi,

Current class name for a custom block:
image

What I wish for:
image

I don’t use default gutenberg styling. I remove all the preloaded gutenberg css from a fresh wp installation. Any way to be able to use block just with a class name instead of wp-block+theme name+block name+custom class?

2

There is an __experimentalSelector in gutenberg which might be related to this. Introduction to WordPress’s Global Styles and Global Settings – Riad Benguella

3

Solved. I was able to achieve it via a filter. This post guided me to the filter. Rename class names in Gutenberg blocks - poolghost.com

Filter name is blocks.getBlockDefaultClassName

const setClassToBlockWithDefaultClassName = (className, blockName) => {
    if (blockName === 'theme-name/myblock') {
        return 'myblock';
    }
    
    return className;
};

wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'your-namespace/block-filters',
    setClassToBlockWithDefaultClassName
);

@matjaz Can Pinegrow add support for this filter in the editor? So we tick an option and enter our custom class name.

4

@Pinegrow_Learner why not just add the class “myblock” to the HTML element where the block is defined? The exported block top element will then have both the default WP class and “myblock”.

5

@matjaz Yes. I know that. I don’t want the default WP class as I don’t use any default gutenberg styling. I also prefer clean source for better readability. Above filter works well and only show my custom class. It will be nice if you can integrate the same in the block options.