0

When registering new blocks, on front-end I get only the markup that I specify inside of save method. Cool! That's what I need. But when using the edit method I get my markup wrapped in a div. That's not what I need, because it limits my possibilities of styling.

How can I get rid of that div and have it similar to what the current core/paragraph block does, for example, with the p tag?


Here is how I have it now:

image

and that's how it should become: image

For reference the code is simple like this:

edit: () => {
    return (
        <span className="sample-block">
            <mark>Sample</mark>
        </span>
    );
},
save: () => {
    return (
        <span className="sample-block">
            <mark>Sample</mark>
        </span>
    );
},
0

Update: WordPress 5.6 will be released soon and this will include a block API version 2 which allows all these modifications noted in OP. https://make.wordpress.org/core/2020/11/18/block-api-version-2/


I found a filter that allows me to modify the wrapper. Still, I can't change the HTML tag, but it's better than nothing.

const { createHigherOrderComponent } = wp.compose;

const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        const newClassName = "block-" + props.clientId + ' sample-block';
        return <BlockListBlock { ...props } className={ newClassName } />;
    };
}, 'withClientIdClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'awps/modify-blocks-wrapper', withClientIdClassName );

And the methods:

edit: () => {
    return (
        <mark>Sample</mark>
    );
},
save: () => {
    return (
        <span className="sample-block">
            <mark>Sample</mark>
        </span>
    );
},

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.