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.

• An introduction guide on innerblocks and renderAppender details.

• A WordPress Core article on using innerblockprops

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.

edit.js

import {
    useBlockProps,
    InnerBlocks,
    useInnerBlocksProps,
} 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: [
            [
                'course-blocks/team-member',
                {
                    name: 'Template Name 1',
                    bio: 'Template Bio 1',
                },
            ],
            [
                'course-blocks/team-member',
                {
                    name: 'Template Name 2',
                    bio: 'Template Bio 2',
                },
            ],
        ],
        renderAppender: InnerBlocks.ButtonBlockAppender,
    });

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

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.

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