这很容易通过两个自定义块实现：（1）对于包装器<ul>...</ul> 元素和（2）另一个元素<li>...</li> 项目。每个人都会使用InnerBlocks 允许您在<li> 项目。

入门的基本示例：

import { __ } from \'@wordpress/i18n\';
import { registerBlockType } from \'@wordpress/blocks\';
import {
    useBlockProps,
    InnerBlocks,
    __experimentalUseInnerBlocksProps as useInnerBlocksProps,
} from \'@wordpress/block-editor\';

// List block
registerBlockType(\'pb/list\', {
    apiVersion: 2,

    title: __(\'List\', \'pb\'),

    category: \'text\',

    edit: (props) => {
        const blockProps = useBlockProps();

        const innerBlocksProps = useInnerBlocksProps(blockProps, {
            allowedBlocks: [\'pb/list-item\'],
        });

        return (
            <ul { ...innerBlocksProps } />
        );
    },

    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <ul { ...blockProps }>
                <InnerBlocks.Content />
            </ul>
        );
    },
});

// List item block
registerBlockType(\'pb/list-item\', {
    apiVersion: 2,

    title: __(\'List Item\', \'pb\'),

    parent: [\'pb/list\'],

    category: \'text\',

    edit: (props) => {
        const blockProps = useBlockProps();

        const innerBlocksProps = useInnerBlocksProps(blockProps);

        return (
            <li { ...innerBlocksProps } />
        );
    },

    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <li { ...blockProps }>
                <InnerBlocks.Content />
            </li>
        );
    },
});