Gutenberg extend blocks add new class name
-
23-03-2021 - |
Pregunta
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?
Solución
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' );
Licenciado bajo: CC-BY-SA con atribución
No afiliado a wordpress.stackexchange