For example:

Before: <div id="block-fc502ca9-0d7b-440c-959c-3da152db0192" class="wp-block editor-block-list__block" data-type="wordcamp/schedule">

After: <div id="block-fc502ca9-0d7b-440c-959c-3da152db0192" class="wp-block editor-block-list__block" data-type="wordcamp/schedule" data-foo="bar">

For example:

Before: <div id="block-fc502ca9-0d7b-440c-959c-3da152db0192" class="wp-block editor-block-list__block" data-type="wordcamp/schedule">

After: <div id="block-fc502ca9-0d7b-440c-959c-3da152db0192" class="wp-block editor-block-list__block" data-type="wordcamp/schedule" data-foo="bar">

• block-editor

Share Improve this question asked Apr 22, 2019 at 18:44 Ian DunnIan Dunn 4,88755 gold badges4444 silver badges7070 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

You can define a getEditWrapperProps function when you register the block, and return an object that sets the props for the wrapper.

The function will be passed the props for the block, in case those are needed.

registerBlockType( 'wpse/example-get-edit-wrapper-props', {
    title : 'getEditWrapperProps() Example',
    // ...

    getEditWrapperProps( props ) {
        return {
            'data-foo': 'bar',
            'data-quix': props.quix || false,
        };
    },
} );

That also lets you change any of other other props that get passed to the container, like id, className, onClick, tabIndex, etc. Obviously, you probably shouldn't mess with those unless you really know what you're doing, and understand the consequences.

Declaration in Gutenberg source: 1, 2.

Examples in Core blocks: 1, 2, 3