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

by

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 🙂

3 s
3

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>

Leave a Comment