2

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...

enter image description here

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

enter image description here

  • 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...

enter image description here

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>,
});
5
  • have you looked at the parameters useInnerBlocksProps and InnerBlocks take? You can specify a different inserter, or even pass it a custom inserter component of your own. The official WP.org docs even demonstrate using the alternative inserter that does exactly what you asked for, and is linked to directly from the section of that article you linked to in your question, immediatley after a sentence that names the parameter you'd need
    – Tom J Nowell
    Mar 16, 2023 at 20:35
  • Thanks Tom. Am I on the right track by seeing examples of "renderAppender" and / or "InnerBlocks.ButtonBlockAppender" as components to use? Is that what I should be experimenting with to reach my goal?
    – klewis
    Mar 16, 2023 at 20:51
  • thanks Tom. that documentation was key for me. I got it working now.
    – klewis
    Mar 16, 2023 at 21:13
  • 1
    yes! But I think you should undelete this and post that as an answer, I can't upvote a deleted question :(
    – Tom J Nowell
    Mar 17, 2023 at 10:05
  • I did not try it ever, but I think it may be possible to show appender by tweaking CSS. It depends on how appender is built in react. If it is element that conditionally appears in a DOM, then you must build your own appender. If it is just hidden by css and shown on hover with css, which I suspect, then you can show it constantly by tweaking css.
    – Lovor
    Mar 19, 2023 at 22:31

1 Answer 1

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.

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.