How to get appender icon to appear more often for innerblock usage

With me being new to this process, I’m sure there is still room for improvement, but I was able to experiment with some online resources to get the following working for me.

From within my plugin directory, in my edit.js file I am making use of both components (InnerBlocks and useInnerBlocksProps) to get the action I want. By referencing both sources, I can use renderAppender: InnerBlocks.ButtonBlockAppender below to meet my needs.


import {
} from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {

    const blockProps = useBlockProps({ className: 'my-class' });

    const innerBlocksProps = useInnerBlocksProps(blockProps, {

        allowedBlocks: ['course-blocks/team-member'],
        template: [
                    name: 'Template Name 1',
                    bio: 'Template Bio 1',
                    name: 'Template Name 2',
                    bio: 'Template Bio 2',
        renderAppender: InnerBlocks.ButtonBlockAppender,

    return (
        <div {...useBlockProps()}>
            <section {...innerBlocksProps} />

As a result, when I run my plugin, and go to my edit page in the UI, I get consistent appender button that remains in place. In the image below, its the far right plus-sign button. I’m 99% sure it can be styled in either your editor.scss or style.scss file to look a lot better.

enter image description here

FYI – my save.js file is still the same as mentioned in my original post.