最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

admin css - How to add a class to the <InnerBlocks.ButtonBlockAppender > element in a custom Gutenberg block

programmeradmin0浏览0评论

I have InnerBlocks which contain ButtonBlockAppender.

I would like to add any className to the 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'} />
    )}
/>

Unfortunately my class is not included. Generally nothing has changed.

The console is clear (no errors).

I have InnerBlocks which contain ButtonBlockAppender.

I would like to add any className to the 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'} />
    )}
/>

Unfortunately my class is not included. Generally nothing has changed.

The console is clear (no errors).

Share Improve this question asked Oct 15, 2020 at 14:13 kanlukaszkanlukasz 5448 silver badges24 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 2

That documentation is for the base ButtonBlockAppender component in the @wordpress/block-editor package, and that component is exported with the name ButtonBlockerAppender (note the "Blocker" vs "Block").

But your code is actually using InnerBlocks.ButtonBlockAppender which is an enhanced version of that base ButtonBlockAppender component, and as of writing, that enhanced version does not include the className prop — check the source (from the last commit in April 2020) where you can see BaseButtonBlockAppender is called without the className prop, and that BaseButtonBlockAppender is the one I've mentioned above (i.e. ButtonBlockerAppender).

So if you want that className prop, you can try one of these:

  1. Clone the enhanced version (i.e. InnerBlocks.ButtonBlockAppender) and include that className prop, but it'll be up to you on how to clone it..

  2. Or don't use that enhanced version, and use the base one instead. E.g.

    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" />
        )}
    />
    
发布评论

评论列表(0)

  1. 暂无评论