Issue when using editor.BlockListBlock block hook

Hi,

This is a great plugin that help hide blocks without having to delete it in the editor, but it’s causing an issue when I am these WordPress hooks to extend the core blocks.

I am using these WordPress block hooks:

• blocks.registerBlockType
• blocks.getSaveContent.extraProps
• editor.BlockEdit
• editor.BlockListBlock

I was able to add an extra ToggleControl field.
My issue happens when I use editor.BlockListBlock ) to add a class name in the editor.

Once I enable my custom toggleControl to true, it adds in my custom class name, but is also add in this plugin block visibility class name (block-visibility__has-visibility). Now this block has these contextual indicator styles showing up (red outline, opacity set to 40% and the eye icon on the top right) even though this block visibility is set to false.

Screenshots below:

The ‘Enable Drop Shadow’ ToggleControl is a custom control that I’ve created using the WordPress block hooks. When I removed the ‘editor.BlockListBlock’ hook in my code the issue is gone.

I would like to know is there a way to fix this issue?

Below is the editor.BlockListBlock code:

addFilter(
  'editor.BlockListBlock',
  'theme/shadow-class',
  shadowBlockListBlock
);


const shadowBlockListBlock  = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {

        if ( ! enableDropShadowControlOnBlocks.includes( props.name ) ) {
            return (
                <BlockListBlock { ...props } />
            );
        }
        const { attributes } = props;
        const { hasDropShadow } = attributes;

			return <BlockListBlock { ...props } className={ hasDropShadow ? 'has-drop-shadow' : '' } />;
    };
}, 'shadowBlockListBlock' );

Thanks!