(Gutenberg Block Editor) Using editor.BlockEdit filter, need to alter html/ CSS class of BlockEdit Component

Question

I am working with the onClick action on a custom IconButton like so:

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { BlockControls } = wp.editor;
const { Toolbar } = wp.components;
const { IconButton } = wp.components;

const withCollapseControl =  createHigherOrderComponent( ( BlockEdit ) => {

    return ( props ) =>
    {
      props.toggleBlockCollapse = (event) => {

      props.setAttributes({
        collapsed:!props.attributes.collapsed,
      }

      let iconProps = {
        onClick: props.toggleBlockCollapse.bind(props),
        class: "components-icon-button components-toolbar__control",
        label: props.attributes.collapsed ? 'Collapse' : 'Expand',
        icon: props.attributes.collapsed ? 'arrow-down' : 'arrow-up'
      }
      return (
        <Fragment>
          <BlockEdit { ...props } className='collapsed'/>
          <BlockControls>
            <Toolbar>
              <IconButton { ...iconProps } />
            </Toolbar>
          </BlockControls>
        </Fragment>
      );


     };
    }, "withCollapseControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withCollapseControl );

I seem to be unable to add/ remove an HTML/ CSS class to the BlockEdit component. I am able to toggle the icon button, and my call to setAttributes triggers re-render...

I was hoping I could mimic the example in the accepted answer here, but on my BlockEdit component: Add classname to Gutenberg block wrapper in the editor?

After taking a deeper look, it appears that className may not be overrideable on the BlockEdit component the way it is on the BlockListBlock component.

Perhaps the best approach would be to try to modify the class of the BlockListBlock component, but I am not certain how I would go about linking those together, so possibly looking for a solution in that vein.

Thanks!

Edit: Please note I have hardcoded in a value for the className in the example BlockEdit component, to demonstrate where things fail ( adding classname ) independent of the other logic in the code. The entirety of the code is shared to help provide answerers with some broader context and my intent :)

Answer 1

In this specific situation (using the editor.BlockEdit filter), the className is actually an attribute. So right after you set your 'collapsed' attribute, you can also set the className:

  props.setAttributes({
    collapsed:!props.attributes.collapsed,
    className: 'myClass'
  });

This originally surprised me, but here is how it's used in the source:

// Generate a class name for the block's editable form
const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
    getBlockDefaultClassName( name ) : null;
const className = classnames( generatedClassName, attributes.className );

from https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-edit/edit.js

Answer 2

I was able to solve this by wrapping the BlockEdit component in my own markup:

    <Fragment>
      <div className="customClass">
        <BlockEdit { ...props }/>
      <div>
      <BlockControls>
        <Toolbar>
          <IconButton { ...iconProps } />
        </Toolbar>
      </BlockControls>
    </Fragment>

Answer 3

Spent a few hours today trying to crack this one. The solution is to use the filter: editor.BlockListBlock.

The usage example from the docs:

const { createHigherOrderComponent } = wp.compose;
 
const withClientIdClassName = createHigherOrderComponent(
    ( BlockListBlock ) => {
        return ( props ) => {
            return (
                <BlockListBlock
                    { ...props }
                    className={ 'block-' + props.clientId }
                />
            );
        };
    },
    'withClientIdClassName'
);
 
wp.hooks.addFilter(
    'editor.BlockListBlock',
    'my-plugin/with-client-id-class-name',
    withClientIdClassName
);

I believe the problem with editor.BlockEdit is that it gets overriden by this component. There's a github issue addresing this problem here.