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

Question

I have created a series of custom blocks for WordPress 5.0.0, and really enjoying the Gutenberg experience thus far. However, I'm struggling to find anything online that will allow me to alter the output of default blocks, such as the paragraph block?

For example, the default output of a paragraph block is:

<p>Text content</p>

But I would like to change it to something like the following:

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

If I can't achieve the above, then I will need to replace the default blocks with custom ones, which seems crazy given the blocks they have available.

Thanks.

Answer 1

You need to use editor.BlockEdit hook to modify the block’s edit component.

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