Gutenberg extend blocks add new class name
-
23-03-2021 - |
سؤال
I'm trying to add an extra class name to all the blocks by extending them. Documentation: Extending Blocks
I'm using blocks.BlockEdit
to modify the edit component. I want to add a custom class name.
So far I have this
const withClass = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
let wrapperProps = props.wrapperProps;
wrapperProps = {
...wrapperProps,
className: 'my-custom-class',
};
return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
};
}, 'withClass' );
It's working by adding the custom class to the wrapper but it is overwriting the default block class. Is it possible to append to the current classes without overriding?
المحلول
Yes, you can do this via the classnames()
function.
import classnames from 'classnames';
const withClass = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
let wrapperProps = props.wrapperProps;
wrapperProps = {
...wrapperProps,
className={ classnames( 'my-custom-class', props.className ) }
};
return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
};
}, 'withClass' );
لا تنتمي إلى wordpress.stackexchange