4

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 :)

1

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>
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.