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 badges1 Answer
Reset to default 2That 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:
Clone the enhanced version (i.e.
InnerBlocks.ButtonBlockAppender
) and include thatclassName
prop, but it'll be up to you on how to clone it..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" /> )} />