Jestem na WordPress 6.1.1 lokalnie w moim środowisku programistycznym.

Odniosłem się do tego artykułu, aby skonfigurować ulepszenie w stosunku do bloków wewnętrznych, używając useInnerBlocksProps.

• Widzę mój blok nadrzędny „Członkowie zespołu lokalni” z moich wybranych bloków …

• Mogę dodać go do mojej strony edycji i zacząć dodawać element podbloku „członek zespołu” jeden po drugim…

• Jeśli użyję myszy, aby najechać kursorem na pierwszy dodany blok podrzędny, na środku obszaru bloku pojawi się ikona dołączania, aby dodać kolejny wiersz …

Jeśli stracę koncentrację na tym obszarze, ikona środkowego dodatku zniknie.

Moje pytanie

Czy istnieje sposób, aby przycisk dołączania był wyświetlany przez cały czas w lewym dolnym rogu ostatniego bloku podrzędnego? zamiast polegać na najechaniu kursorem na obszar bloku lub kliknięciu ikony bloku nadrzędnego, aby go zobaczyć?

Oto mój kod w mojej wtyczce o nazwie teamMembers:

block.json

{
    "$schema": "
    "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": "
    "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>,
});