How to concatenate back office styles in React Js with the wrapperProps property

Viewed 18

how to concatenate border-radius & box-shadow styles with wrapperProps property to style a Gutenberg block?

const withMyWrapperProp = createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
        if (props.name === 'core/column') {
            if (withBorderRadius) {
                const wrapperProps = {
                    ...props.wrapperProps,
                    style:{borderRadius: radius},
                };
                return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />
            }       

            if (withBoxShadow) {
                const wrapperProps = {
                    ...props.wrapperProps,
                    style: {  
                            boxShadow: horizontalBoxShadowAttribute + 'px ' + verticalBoxShadowAttribute + 'px ' +
                            blurBoxShadowAttribute + 'px ' + spreadBoxShadowAttribute + 'px ' +
                            colorBoxShadowAttribute 
                          },
            };
            return <BlockListBlock { ...props } />
        }
    };
}, 'withMyWrapperProp' );

wp.hooks.addFilter(
    'editor.BlockListBlock',
    'my-plugin/with-my-wrapper-prop',
    withMyWrapperProp
);
0 Answers
Related