Gutenberg get block name

时间：2019-03-02 作者：CyberJ

我正在使用块API中的过滤器将类名添加到块的包装器中。我必须将类名添加到特定块，而不是所有块。

我试过：

const addClassName = createHigherOrderComponent( ( BlockListBlock ) => {    
  return ( props, blockType ) => {      
    if ( blockType.name === \'myplugin/myblock\' ) {
        return <BlockListBlock { ...props } className="test" />;
    }
    return <BlockListBlock { ...props } />
  }
}, \'addClassName\' );

wp.hooks.addFilter( \'editor.BlockListBlock\', \'myplugin/add-class-name\', addClassName );
问题：blockType.name 返回未定义的。我也试过了getBlockType.name 它还返回未定义的。我还尝试获取核心块的块名。例如core/columns.

3 个回复
最合适的回答,由SO网友:Alvaro 整理而成

从props对象可以获得块信息。对象包含name 您正在寻找的财产；代码如下：

const addClassName = createHigherOrderComponent(BlockListBlock => {
    return props => {
        if (props.name === "myplugin/myblock") {
            return <BlockListBlock {...props} className="test" />;
        }
        return <BlockListBlock {...props} />;
    };
}, "addClassName");

wp.hooks.addFilter(
    "editor.BlockListBlock",
    "myplugin/add-class-name",
    addClassName
);

SO网友:Mehmood Ahmad

可以使用以下命令获取选定的块名称wp.data.select( \'core/editor\' ).getSelectedBlock().name; 在块编辑或保存功能中。这就是你的问题标题的答案。

顺便说一下，您可以轻松地在编辑功能内的布局中的任何位置添加类，那么您为什么要这么麻烦呢。

SO网友:Michel Moraes

您可以简单地使用wp data api获得块的默认类名，如下所示：

const className = getBlockDefaultClassName("namespace/yourblockname");
getBlockDefaultClassName 来自wp.blocks 因此，您可以导入它：

import { getBlockDefaultClassName } from "@wordpress/blocks";
或

const { getBlockDefaultClassName } = wp.blocks;
希望有帮助！

标签： block-editor   小码农  

相关推荐