Gutenberg add style attribute using block filter

Question

I'm trying to add a style attribute in the block editor to a block's wrapper using a block filter:

const addStyle = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        return <BlockListBlock { ...props } className="my-class" style="color: red" />;
    };
}, 'addStyle' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/add-style', addStyle );

Only the my-class class name is added to the class attribute but no style attribute. Is it possible to add a style attribute as well? The documentation states:

It receives the original BlockListBlock component and returns a new wrapped component.

but does not say you can add only class names.

I might be wrong, but I think your syntax is incorrect. Pretty sure it should be style={{color: 'red'}} for React inline styles... — dafoxuk

Jonas Merhej Jonas Merhej · Accepted Answer · 2020-03-24T16:19:58

For the rendering part it's:

wp.hooks.addFilter('blocks.getSaveContent.extraProps','my-plugin/add-style', function(props, name, atts){
    return Object.assign(props, { 'style': 'color: red' });
});

Couldn't figure it out for the edit function tho.

Gutenberg add style attribute using block filter

1 Answers