不要将自定义块包装在额外的DIV中，而是只使用我提供的JSX

时间：2020-11-20 作者：Andrei Surdu

注册新块时，在前端，我只会得到我在其中指定的标记save 方法凉的这就是我需要的。但是当使用edit 方法将标记包装在div. 这不是我需要的，因为它限制了我的造型可能性。

我如何摆脱这个div并使其与当前核心/段落块的功能相似，例如p 标签

<小时/>

Here is how I have it now:

image

and that\'s how it should become:image

参考代码如下：

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

1 个回复
SO网友:Andrei Surdu

Update: WordPress 5.6将很快发布，这将包括一个块API版本2，它允许OP中提到的所有这些修改。https://make.wordpress.org/core/2020/11/18/block-api-version-2/

我找到了一个过滤器，可以修改包装器。尽管如此，我无法更改HTML标记，但这总比什么都不做要好。

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 );
以及方法：

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

标签： block-editor   小码农  

相关推荐