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 (https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#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!
- The topic ‘Issue when using editor.BlockListBlock block hook’ is closed to new replies.