0

I'm using Gutenberg block filters to add a class name to the block’s wrapper component in the editor.

registerBlockType( name, {

    title: __( 'My Block' ),

    parent: [ 'myplugin/myblock' ],

    category: 'common',

    attributes: attributes,


    edit( { attributes, setAttributes, className } ) {      

        const { someName } = attributes;

        return (
            /* render something */
        );
    },

    save( { attributes } ) {

        const { someName } = attributes;

        return (
            /* render something */
        );
    },
});



const customClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        return <BlockListBlock { ...props } className={ someName } />;
    };
}, 'customClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'myplugin/myblock', customClassName );

How can I pass someName from my block attributes to the customClassName filter? Adding constant customClassName and wp.hooks.addFilter() in the edit function does not seem to work well because it causes repeatable filtering/rendering.

  • You want to add a class in the (default) className attribute that includes some value from your own attribute? – Alvaro Jan 7 at 19:41
  • Yes it will include some dynamic value – at least three characters Jan 7 at 20:23

Your Answer

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

Browse other questions tagged or ask your own question.