如何将类添加到自定义Gutenberg块中的<InnerBlocks.ButtonBlockAppender/>元素

时间：2020-10-15 作者：kanlukasz

我有InnerBlocks 其中包含ButtonBlockAppender.

我想添加任何className 到ButtonBlockAppender

ButtonBlockAppender documentation says:

className
    Type: String
    Default: ""
A CSS class to be prepended to the default class of "button-block-appender".

So i tried to do this like this:

<InnerBlocks
    renderAppender={() => (
        <InnerBlocks.ButtonBlockAppender className={\'TESTEDCLASSSTRING\'} />
    )}
/>
不幸的是，我的课不包括在内。一般来说，一切都没有改变。

控制台已清除（无错误）

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

That documentation 用于基础ButtonBlockAppender 中的组件@wordpress/block-editor 包，并且该组件将以名称导出ButtonBlockerAppender （请注意“阻止者”与“阻止者”）。

但您的代码实际上使用InnerBlocks.ButtonBlockAppender 这是基础的增强版本ButtonBlockAppender 组件，并且在编写时，该增强版本不包括className 道具-check the source (from the last commit in April 2020) 你能看到的地方BaseButtonBlockAppender 在没有className 道具，还有BaseButtonBlockAppender 就是我上面提到的那个（即。ButtonBlockerAppender).

如果你想要的话className 道具，您可以尝试以下方法之一：

克隆增强版本（即。InnerBlocks.ButtonBlockAppender) 包括className 道具，但如何克隆它将取决于你。。

或者不要使用增强版，而是使用基本版。例如。

const { InnerBlocks, ButtonBlockerAppender } = wp.blockEditor;
// or if you\'d rather import:
//import { InnerBlocks, ButtonBlockerAppender } from \'@wordpress/block-editor\';

// Then in the block edit():
<InnerBlocks
    renderAppender={() => (
        <ButtonBlockerAppender className="your-custom-class" />
    )}
/>

标签： block-editor   admin-css   小码农  

相关推荐