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

Question

I'm on WordPress 6.1.1 locally in my development environment.

I referenced this article to setup an in improvement over innerblocks, by using useInnerBlocksProps.

• I can see my parent block "Team Members Local" from my block selections...

• I can add it to my edit page and begin to add my sub-block item "team-member" one by one...

• If I use my mouse to hover over the first sub-block I added, an appender icon appears in the middle of my block area to add another row...

If I lose focus of this area, that middle appender icon goes away.

My Question

Is there way to have an appender button show all the time, in the bottom left of the last sub-block? rather than depending on hovering over the block area, or clicking on the parent block icon to see it?

Here's my code within my plugin called teamMembers:

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "course-blocks/team-members-local",
    "version": "0.1.0",
    "title": "Team Members Local",
    "category": "media",
    "description": "A Team Members Grid Platform",
    "keywords": ["Team", "Local", "Members", "Grid"],
    "supports": {
        "html": false
    },
    "textdomain": "tml",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

index.js

import { registerBlockType } from '@wordpress/blocks';
import './team-member';
import './style.scss';
import Edit from './edit';
import save from './save';
import metadata from './block.json';

registerBlockType(metadata.name, {
    icon: {
        src: 'groups',
        background: '#f03',
        foreground: '#fff',
    },
    edit: Edit,
    save,
});

edit.js

import { useBlockProps, 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',
        ],
    });

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

save.js

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export default function save() {
    const blockProps = useBlockProps.save({ className: 'my-class' });
    const innerBlocksProps = useInnerBlocksProps.save(blockProps);

    return <section {...innerBlocksProps} />;
}

src/team-member/block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "course-blocks/team-member",
    "version": "0.1.0",
    "title": "Team Member",
    "category": "media",
    "description": "An individual member for Team Members Local",
    "keywords": ["Team", "Local", "Member", "Grid", "individual"],
    "supports": {
        "html": false
    }
}

src/team-member/index.js

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';

registerBlockType(metadata.name, {
    title: metadata.title,
    description: metadata.description,
    icon: 'admin-users',
    parent: ['course-blocks/team-members-local'],
    edit: () => <p>read only edit text</p>,
    save: () => <p>read only save text</p>,
});

Answer 1

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.