创建自定义小部件的详细教程：WordPress Gutenberg 编辑器

WordPress 的 Gutenberg 编辑器采用基于区块的系统，您可以将自定义小部件创建为自定义区块。以下是创建自定义 Gutenberg 小部件（区块）的逐步指南：

1. 设置开发环境

在创建自定义区块之前，请确保您的环境已准备就绪：

• WordPress 安装：在本地或服务器上安装 WordPress（版本 5.0 或更高）。
• 代码编辑器：使用像 Visual Studio Code 这样的 IDE。
• Node.js 和 npm：安装 Node.js，它包含 npm（Node 包管理器）。

2. 为自定义区块创建插件

为了避免修改 WordPress 核心文件，您需要创建一个插件：

1. 导航到 wp-content/plugins 目录。
2. 创建一个插件文件夹，例如 my-custom-widget。
3. 在该文件夹内创建一个主 PHP 文件，例如 my-custom-widget.php。

示例 my-custom-widget.php：

<?php
/**
 * Plugin Name: My Custom Widget
 * Description: A custom widget for Gutenberg editor.
 * Version: 1.0
 * Author: Your Name
 */

// Exit if accessed directly.
if (!defined('ABSPATH')) {
    exit;
}

// Enqueue block editor assets for Gutenberg.
function my_custom_widget_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-custom-widget-script',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );

    wp_enqueue_style(
        'my-custom-widget-style',
        plugins_url('block.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'block.css')
    );
}
add_action('enqueue_block_editor_assets', 'my_custom_widget_enqueue_block_editor_assets');

3. 添加区块的 JavaScript

在您的插件文件夹中创建一个 block.js 文件。

示例 block.js：

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

registerBlockType('myplugin/custom-widget', {
    title: 'Custom Widget',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        const { content } = attributes;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={onChangeContent}
                placeholder="Enter your widget text..."
            />
        );
    },
    save({ attributes }) {
        const { content } = attributes;

        return <RichText.Content tagName="p" value={content} />;
    },
});

4. 添加 CSS 进行样式设置

在您的插件文件夹中创建一个 block.css 文件。

示例 block.css：

.wp-block-myplugin-custom-widget {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

5. 激活插件

1. 将您的插件文件夹（my-custom-widget）压缩为 zip 文件。
2. 转到 WordPress 仪表板 → 插件 → 添加新插件 → 上传插件。
3. 上传 zip 文件并激活插件。

6. 测试您的小部件

• 转到 Gutenberg 编辑器。
• 通过搜索「Custom Widget」添加该区块。
• 测试其功能和外观。

参考文献

1. Marketing Scoop – 创建自定义 Gutenberg 区块
2. WP Astra – Gutenberg 指南
3. WordPress 开发者手册 – 区块