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 user/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 user/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 user/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 user/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>,
});