Gutenberg Boilerplate 使用教程

项目介绍

Gutenberg Boilerplate 是一个易于理解和广泛内联文档的 WordPress 插件，旨在为新的 Gutenberg 编辑器提供一个类似于 create-react-app 的入门模板。该项目由 @AhmadAwais 维护，是一个免费且开源的软件（FOSS）项目。

项目快速启动

安装步骤

1. 安装并激活 Gutenberg WordPress 插件：

   • 从 WordPress 官方插件库下载并安装 Gutenberg 插件。
   • 在 WordPress 后台激活该插件。

2. 下载并安装 Gutenberg Boilerplate 插件：

   • 点击此链接下载 Gutenberg Boilerplate 插件。
   • 在 WordPress 后台上传并激活该插件。

示例代码

以下是一个简单的 Gutenberg 块示例代码：

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('gutenberg-boilerplate/example-block', {
    title: '示例块',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: (props) => {
        const { attributes: { content }, setAttributes } = props;
        return (
            <RichText
                tagName="p"
                onChange={(newContent) => setAttributes({ content: newContent })}
                value={content}
            />
        );
    },
    save: (props) => {
        const { attributes: { content } } = props;
        return <RichText.Content tagName="p" value={content} />;
    },
});

应用案例和最佳实践

应用案例

Gutenberg Boilerplate 可以用于创建各种自定义 Gutenberg 块，例如：

• 文本块：用于显示和编辑富文本内容。
• 图像块：用于插入和编辑图像。
• 列表块：用于创建有序或无序列表。

最佳实践

• 模块化开发：将不同的功能模块化，便于管理和维护。
• 内联文档：为代码添加详细的内联文档，方便其他开发者理解和使用。
• 测试驱动开发：使用测试驱动开发（TDD）方法，确保代码的稳定性和可靠性。

典型生态项目

create-guten-block

推荐使用 create-guten-block 工具，这是一个新的工具包，用于创建 Gutenberg 块。它提供了更简洁的开发流程和更好的维护性。

• 项目链接：create-guten-block
• 许可证：GPL-3.0 许可证
• GitHub 仓库：ahmadawais/create-guten-block

通过使用 create-guten-block，开发者可以更快速地构建和部署 Gutenberg 块，提高开发效率。

---

以上是 Gutenberg Boilerplate 的使用教程，希望对您有所帮助。