Do not wrap custom block in an additional DIV but instead use only the JSX I provide

admin管理员组

文章数量:1314480

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:

and that's how it should become:

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>
    );
},

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:

and that's how it should become:

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>
    );
},

• block-editor

Share Improve this question asked Nov 20, 2020 at 10:41 Andrei SurduAndrei Surdu 64911 gold badge77 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/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 } = wppose;

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>
    );
},

本文标签： Do not wrap custom block in an additional DIV but instead use only the JSX I provide