Add class to container div?

[jbr]

Just trying to figure out if something’s possible at the moment.

I’ve got a setup involving responsive columns, with a row block and child column blocks. In the front end it’s working perfectly, but in the editor everything’s wrapped in various container divs which make things a lot trickier.

<div class="editor-inner-blocks">
<div class="editor-block-list__layout">

<div id="block-3a502b1f-90ca-4bd1-86c4-95699c8d4c67" class="editor-block-list__block" data-type="example/example" tabindex="0" aria-label="Block: Example Column">
...
CHILD BLOCK HTML
...

</div>

</div>
</div>

Is there a way to add a class to the editor-block-list__block div? This would be in the editor only.

[Zac Gordon]

Does getEditWrapperProps() do the job?

Here is an example of it in use https://github.com/zgordon/gutenberg-course/blob/master/blocks/04-block-alignment-toolbar/index.js

[jbr]

Thanks, that’s definitely the right direction!

I’ve got

getEditWrapperProps() {
         
              return { 'class': 'editor-block-list__block EXTRA CLASSES HERE' };
          
      },

The problem I’m having now is that any custom class I have is being removed when the block is selected or hovered, and replaced with

editor-block-list__block is-selected or editor-block-list__block is-hovered, and then back to editor-block-list__block

Any idea if there’s a way to keep the class added? It looks like the editor completely replaces the classes on the div rather than just toggling specific ones.

[Zac Gordon]

Hmm that I’m not too sure about. Would you mind asking in the WordPress #core-editor Slack channel and let us know what you find?

[stevensau]

Where you able to figure this out? I am stuck on the exact same thing.

[Zac Gordon]

This should be possible with the editor.BlockListBlock filter 🙂

`
const { createHigherOrderComponent } = wp.compose;

const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
return ;
};
}, ‘withClientIdClassName’ );

wp.hooks.addFilter( ‘editor.BlockListBlock’, ‘my-plugin/with-client-id-class-name’, withClientIdClassName );
`

Here are the docs on it – https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#editor-blocklistblock

We get into Filters in the Advanced Gutenberg Course if you wanted some extra guidance with filters in general.

[mikemcalister]

Howdy folks,

I’m also working on something that uses filters to adjust classes, but I’m using blocks.getBlockDefaultClassName. Any clues on the cleanest way to get attributes (attributes.bgType) from the block passed through to this function? I tried a few different ways but haven’t been able to tap into them yet since it runs outside of the block’s render where attributes are defined. Thanks in advance for any tips!

wp.hooks.addFilter(
	"blocks.getBlockDefaultClassName",
	"atomicblocks/ab-column-block-class-name",
	abCustomClassName
);

function abCustomClassName( className, name ) {
	if ( 'atomic-blocks/ab-columns' === name ) {
		return classnames(
			className,
			'ab-has-bg-' + attributes.bgType
		);
	}
	return className;
}

[mikemcalister]

I was actually able to solve this by using withClientIdClassName instead, which has props available to it. I’d still be curious to know if it’s possible to pass attributes as mentioned above!

[Zac Gordon]

Hey Mike!

This should be possible with the blocks.getSaveContent.extraProps filter. It let’s you get the props, which includes the attributes, as well as return a new props, which includes the className, so you should be able to update classname using attributes, if that is what you are after.

Not exact solutions, but examples that should get you there:

– https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#blocks-getsavecontent-extraprops
– https://github.com/zgordon/advanced-gutenberg-course/blob/master/filters/getSaveContentExtraProps.js

Let me know if you need a hand tweaking this to your need or if I’m missing something!

[mikemcalister]

Thanks for the reply! This looks super handy.

[Author]

Posts