如何将任意的`data-`属性添加到块的`edit()`容器中?

时间:2019-04-22 作者:Ian Dunn

例如:

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

1 个回复
最合适的回答,由SO网友:Ian Dunn 整理而成

您可以定义getEditWrapperProps 函数,并返回一个为包装器设置道具的对象。

如果需要,该函数将被传递给块的道具。

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

    getEditWrapperProps( props ) {
        return {
            \'data-foo\': \'bar\',
            \'data-quix\': props.quix || false,
        };
    },
} );
这还允许您更改传递到容器的任何其他道具,如id, className, onClick, tabIndex, 显然,除非你真的知道自己在做什么,并了解后果,否则你可能不应该与这些人为伍。

古腾堡声明来源:1, 2.

核心模块示例:1, 2, 3

相关推荐