Gutenberg块:如何将RichText添加到无序列表

Gutenberg块：如何将RichText添加到无序列表

基础概念

Gutenberg是WordPress中的一个编辑器，它使用块（blocks）来构建内容。RichText块允许用户输入和格式化文本，而无序列表（Unordered List）是一种常见的列表类型，通常用于展示项目或任务。

类型

RichText块：用于输入和格式化文本。
无序列表块：用于创建项目列表。

应用场景

博客文章：在文章中使用无序列表来列出要点或步骤。
产品说明：在产品页面中使用无序列表来列出产品的特性或功能。
任务管理：在项目管理工具中使用无序列表来列出待办事项。

如何将RichText添加到无序列表

要在Gutenberg中实现这一点，可以使用嵌套块的方式。具体步骤如下：

创建无序列表块：首先，创建一个无序列表块。
嵌套RichText块：在无序列表块中嵌套RichText块。

以下是一个示例代码，展示了如何在Gutenberg中实现这一功能：

import { registerBlockType } from '@wordpress/blocks';
import { RichText, BlockControls } from '@wordpress/block-editor';
import { useBlockProps } from '@wordpress/block-layout';

registerBlockType('my-plugin/rich-text-list', {
    title: 'RichText List',
    icon: 'list-ul',
    category: 'text',
    attributes: {
        items: {
            type: 'array',
            default: [],
        },
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const { items } = attributes;

        const blockProps = useBlockProps();

        const onChangeItem = (index, newContent) => {
            const newItems = [...items];
            newItems[index] = newContent;
            setAttributes({ items: newItems });
        };

        return (
            <div {...blockProps}>
                {items.map((item, index) => (
                    <div key={index}>
                        <BlockControls>
                            <RichText
                                tagName="li"
                                value={item}
                                onChange={(newContent) => onChangeItem(index, newContent)}
                            />
                        </BlockControls>
                    </div>
                ))}
                <RichText.Block
                    tagName="ul"
                    value=""
                    onChange={(newContent) => setAttributes({ items: [newContent] })}
                />
            </div>
        );
    },
    save: (props) => {
        const { attributes } = props;
        const { items } = attributes;

        const blockProps = useBlockProps.save();

        return (
            <ul {...blockProps}>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        );
    },
});