Question

我为WordPress 5.0.0创建了一系列自定义块，到目前为止，我真的很喜欢Gutenberg的经验。但是，我很难在网上找到任何东西来允许我更改默认块的输出，例如段落块？

例如，段落块的默认输出为：

<p>Text content</p>

但是我想将其更改为以下内容：

<div class="wrapper">
    <p class="my-class">Text Content</p>
</div>

如果我无法实现上述要求，则需要用自定义块替换默认块，考虑到可用块，这似乎很疯狂。

谢谢。

Answer 1

您需要使用 editor.BlockEdit hook来修改块的编辑组件。

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;

const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>
                        My custom control
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );

如何编辑标记/添加类到默认的WordPress块？

1 个答案: