JavaScript for WordPress Forums Gutenberg Development Add class to container div?

This topic contains 9 replies, has 4 voices, and was last updated by  mikemcalister 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #55507

    jbr
    Participant

    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.

    #55517

    Zac Gordon
    Keymaster

    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

    #55550

    jbr
    Participant

    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.

    #55578

    Zac Gordon
    Keymaster

    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?

    • This reply was modified 7 months, 3 weeks ago by  Zac Gordon.
    • This reply was modified 7 months, 3 weeks ago by  Zac Gordon.
    #102459

    stevensau
    Participant

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

    #102481

    Zac Gordon
    Keymaster

    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.

    • This reply was modified 2 weeks, 2 days ago by  Zac Gordon. Reason: Added code snippet
    #103759

    mikemcalister
    Participant

    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;
    }
    #103944

    mikemcalister
    Participant

    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!

    #104493

    Zac Gordon
    Keymaster

    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!

    #104503

    mikemcalister
    Participant

    Thanks for the reply! This looks super handy.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.