在 WooCommerce 中创建自定义 Gutenberg 块：完整开发指南

WordPress 最近推出了 @wordpress/scripts npm 包，它为 WordPress 开发提供了一组可重用的脚本。本文将详细介绍如何使用 ES6、JSX 和 @wordpress/scripts 包创建一个自定义的 Gutenberg 块，并将其集成到 WooCommerce 中。

开始前

在开始开发之前，我们需要配置一些必要的开发环境：

• WordPress 开发环境：确保你已经安装并运行了 WordPress。
• JavaScript 构建工具（Node/npm）：我们将使用 React 和 JSX，因此需要配置 JavaScript 构建工具。
• WooCommerce 插件：如果你还没有安装 WooCommerce 插件，需要先安装。

如何使用 React 构建 WordPress 主题

5月9日 11:44

07400

步骤 1：创建插件目录和安装依赖

首先，需要在 wp-content/plugins 目录下创建一个插件目录，并安装所需的 @wordpress/scripts 包。

具体步骤如下：

1. 创建插件目录：在 wp-content/plugins 目录下创建一个名为 myFirst-block 的文件夹。
2. 安装依赖：进入 myFirst-block 目录，并使用 npm 安装 @wordpress/scripts 包：

cd wp-content/plugins
mkdir myFirst-block
cd myFirst-block
npm init
npm install --save-dev --save-exact @wordpress/scripts

安装完成后，所有依赖包会被保存在 node_modules 目录下。

步骤 2：配置 package.json

在 myFirst-block 目录中，打开 package.json 文件，并添加以下脚本配置：

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

• npm run start：启动开发服务器并进入监听模式，实时更新代码。
• npm run build：打包构建文件，准备发布。

步骤 3：创建插件文件以注册 Gutenberg 块

我们需要创建一个插件文件，在该文件中注册并加载我们自定义的 Gutenberg 块。

在 myFirst-block 目录下创建一个 myFirst-block.php 文件，并添加以下代码：

<?php
/*
Plugin Name: myFirst-block
Author: webkul
*/
function myFirst_block() {
    $styleURI = plugin_dir_url( __FILE__ ) . '/src/style.css';
    // Enqueue styles
    wp_enqueue_style(
        'myFirst-block-style',
        $styleURI
    );

    // Register JavaScript file (build/index.js)
    wp_register_script(
        'myFirst-block-script',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // Register editor styles
    wp_register_style(
        'myFirst-block-editor-style',
        plugins_url( 'src/editor.css', __FILE__ )
    );

    // Register the block
    register_block_type( 'myCustomBlock/myFirst-block', array(
        'editor_script' => 'myFirst-block-script',
        'editor_style' => 'myFirst-block-editor-style',
    ) );
}
add_action( 'init', 'myFirst_block' );

该代码完成了以下工作：

• 加载自定义样式和 JavaScript 文件。
• 注册了一个新的 Gutenberg 块。

步骤 4：编写 JavaScript 代码注册块

接下来，需要在 myFirst-block/src/index.js 文件中编写 JavaScript 代码，注册我们的 Gutenberg 块。首先，创建 src/index.js 文件，并添加以下内容：

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

// 注册第一个自定义块
registerBlockType( 'myCustomBlock/my-first-block', {
    title: '我的第一个自定义块',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: (props) => {
        const { attributes: { content }, setAttributes } = props;

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

        return (
            <div className='my-first-block'>
                <RichText 
                    tagName="p" 
                    value={ content } 
                    onChange={ onChangeContent } 
                    placeholder="请输入内容"
                />
            </div>
        );
    },
    save: (props) => {
        return (
            <div className='my-first-block'>
                <RichText.Content tagName="p" value={props.attributes.content} />
            </div>
        );
    }
});

步骤 5：添加样式文件

我们还需要为 Gutenberg 块定义样式。创建两个 CSS 文件：src/editor.css 用于编辑器中的样式，src/style.css 用于前端展示的样式。

1. 编辑器样式（src/editor.css）：

.my-first-block {
    color: blue;
    background-color: #f0f0f0;
    padding: 20px;
}

2. 前端样式（src/style.css）：

.my-first-block {
    color: green;
    padding: 20px;
    background-color: #e0e0e0;
}

步骤 6：构建和运行

当所有文件创建完成后，使用以下命令来启动开发服务器：

npm run start

该命令会在 src/index.js 文件发生更改时自动构建并更新 build/index.js 文件。现在，你的自定义 Gutenberg 块应该可以在编辑器中使用了。

步骤 7：进一步的功能扩展（可选）

你还可以创建更复杂的 Gutenberg 块。例如，我们可以创建一个卡片组件块，其中允许用户添加图像、标题和描述。通过使用 useBlockProps 和 InnerBlocks API，允许在卡片块内部添加其他块。

以下是一个简单的卡片组件块的示例：

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

registerBlockType( 'myCustomBlock/card-block', {
    title: '卡片组件',
    icon: 'grid-view',
    category: 'widgets',
    attributes: {
        title: { type: 'string' },
        description: { type: 'string' },
        imageUrl: { type: 'string' },
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const blockProps = useBlockProps();

        return (
            <div {...blockProps}>
                <MediaUpload
                    onSelect={(media) => setAttributes({ imageUrl: media.url })}
                    render={({ open }) => (
                        <button onClick={open}>选择图片</button>
                    )}
                />
                <RichText
                    tagName="h3"
                    value={attributes.title}
                    onChange={(newTitle) => setAttributes({ title: newTitle })}
                    placeholder="标题"
                />
                <RichText
                    tagName="p"
                    value={attributes.description}
                    onChange={(newDescription) => setAttributes({ description: newDescription })}
                    placeholder="描述"
                />
                <InnerBlocks />
            </div>
        );
    },
    save: (props) => {
        const { attributes } = props;
        return (
            <div className="card-block">
                <img src={attributes.imageUrl} alt={attributes.title} />
                <RichText.Content tagName="h3" value={attributes.title} />
                <RichText.Content tagName="p" value={attributes.description} />
                <InnerBlocks.Content />
            </div>
        );
    }
});

总结

通过以上步骤，我们创建了一个简单的自定义 Gutenberg 块，并添加了前端和编辑器样式。你可以根据需要进一步扩展块的功能，例如支持更多的块内元素，添加自定义控件等。