wp.blockEditor.RichText multiline属性弃用后，如何实现无序列表？

问题背景 #

收到如下警告：

wp.blockEditor.RichText 的 multiline 属性自版本6.1起已被弃用，将在6.3版本中移除。请使用嵌套区块（InnerBlocks）替代。

原代码片段：

el( RichText, {
    tagName: 'ul',
    multiline: 'li',
    placeholder: i18n.__(
        'Enter a list of price options…',
        'simplified-menu'
    ),
    value: attributes.price_list,
    onChange: function( value ) {
        props.setAttributes( { price_list: value } );
    },
    className: 'price_list',
} )

解决方案：用InnerBlocks实现 #

要替代multiline的列表功能，需要拆分出列表项子区块，再在主区块中用InnerBlocks管理这些子项，具体实现如下：

1. 注册列表项子区块 #

先创建一个仅用于编辑单条列表项的自定义子区块：

wp.blocks.registerBlockType('simplified-menu/price-list-item', {
    title: i18n.__('Price List Item', 'simplified-menu'),
    parent: ['simplified-menu/price-list'], // 限定只能作为主区块的子项
    icon: 'list-view',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'li'
        }
    },
    edit: ({ attributes, setAttributes }) => {
        return el(RichText, {
            tagName: 'li',
            placeholder: i18n.__('Enter price option…', 'simplified-menu'),
            value: attributes.content,
            onChange: (value) => setAttributes({ content: value })
        });
    },
    save: ({ attributes }) => {
        return el('li', {}, attributes.content);
    }
});

2. 修改主区块使用InnerBlocks #

把原代码中的RichText替换为InnerBlocks，限定仅允许添加上面注册的列表项子区块：

// 主区块的edit逻辑
edit: ({ className }) => {
    const ALLOWED_BLOCKS = ['simplified-menu/price-list-item'];
    return el('div', { className }, [
        el('h3', {}, i18n.__('Price Options', 'simplified-menu')),
        el(wp.blockEditor.InnerBlocks, {
            allowedBlocks: ALLOWED_BLOCKS,
            template: [
                ['simplified-menu/price-list-item'] // 默认生成一个空列表项
            ]
        })
    ]);
},

// 主区块的save逻辑
save: ({ className }) => {
    return el('ul', { className: 'price_list' },
        el(wp.blockEditor.InnerBlocks.Content, {})
    );
}

3. 旧数据迁移（可选） #

如果之前用price_list属性存储了旧的列表HTML内容，可添加迁移逻辑将旧数据转换为子区块格式：

migrations: {
    // 根据你的区块版本调整版本号
    2: (attributes) => {
        if (!attributes.price_list) return attributes;
        // 解析旧ul/li内容，生成子区块数组
        const parser = new DOMParser();
        const doc = parser.parseFromString(attributes.price_list, 'text/html');
        const items = Array.from(doc.querySelectorAll('li')).map(li => ({
            blockName: 'simplified-menu/price-list-item',
            attributes: { content: li.innerHTML }
        }));
        return {
            ...attributes,
            innerBlocks: items,
            price_list: undefined // 移除旧属性
        };
    }
}

这种实现完全符合Block Editor的最新规范，同时保留了原有的列表编辑体验。

内容的提问来源于stack exchange，提问作者AJ ISM