How can I add arbitrary `data-` attributes to a block's `edit()` container?

Question

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">

Answer 1

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