WordPress Gutenberg 区块开发实战教程：构建版权日期区块-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00992/article/details/148394219

WordPress Gutenberg 区块开发实战教程：构建版权日期区块

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

前言

本教程将带领你从零开始开发一个实用的 WordPress Gutenberg 区块 - 版权日期区块。这个区块将显示版权符号(©)、当前年份以及可选的起始年份，是网站页脚常用的功能组件。

通过本教程，你将掌握 Gutenberg 区块开发的核心概念和完整流程，即使没有 WordPress 开发经验也能轻松上手。

开发环境准备

在开始之前，请确保你的开发环境满足以下要求：

代码编辑器（如 VS Code）
Node.js 开发工具（建议使用 LTS 版本）
本地 WordPress 开发环境

如果你尚未配置好环境，建议先搭建好基础开发环境后再继续本教程。

创建区块基础结构

我们将使用 WordPress 官方提供的 create-block 工具来初始化区块项目。这个工具会自动生成区块开发所需的基础文件和目录结构。

在终端中执行以下命令：

npx @wordpress/create-block@latest copyright-date-block --variant=dynamic
cd copyright-date-block

这个命令会创建一个名为 copyright-date-block 的插件目录，其中包含区块开发所需的所有初始文件。--variant=dynamic 参数表示我们将创建一个动态渲染的区块。

区块文件结构解析

让我们先了解一下 create-block 工具生成的主要文件：

block.json：区块的元数据配置文件
src/index.js：区块的主入口文件，负责注册区块
src/edit.js：定义区块在编辑器中的行为和外观
src/render.php：处理区块在前端的动态渲染

配置区块元数据

首先我们需要修改 block.json 文件来定义区块的基本属性和功能支持：

更新区块描述为"显示网站的版权日期"
添加对文字颜色和字体大小的支持配置
移除不必要的样式表和前端脚本引用

最终的 block.json 配置如下：

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/copyright-date-block",
  "version": "0.1.0",
  "title": "Copyright Date Block",
  "category": "widgets",
  "description": "Display your site's copyright date.",
  "supports": {
    "color": {
      "background": false,
      "text": true
    },
    "html": false,
    "typography": {
      "fontSize": true
    }
  },
  "textdomain": "copyright-date-block",
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

添加自定义图标

为了让区块在编辑器中有更好的辨识度，我们可以为其添加一个自定义图标。在 index.js 中添加日历图标的 SVG 定义：

const calendarIcon = (
  <svg
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
  >
    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
  </svg>
);

实现基础功能

现在我们来实现区块的核心功能 - 显示版权符号和当前年份。

编辑器端实现

修改 edit.js 文件，添加获取当前年份并显示的代码：

export default function Edit() {
  const currentYear = new Date().getFullYear().toString();
  
  return (
    <p { ...useBlockProps() }>© { currentYear }</p>
  );
}

前端渲染实现

对应的，我们需要更新 render.php 文件以确保前端显示一致：

<p <?php echo get_block_wrapper_attributes(); ?>>© <?php echo date( "Y" ); ?></p>

添加起始年份功能

现在我们的区块已经能显示当前年份，接下来我们将添加显示起始年份的功能。

定义区块属性

在 block.json 中添加两个新属性：

"attributes": {
  "showStartingYear": {
    "type": "boolean",
    "default": false
  },
  "startingYear": {
    "type": "string",
    "default": ""
  }
}

更新编辑器界面

修改 edit.js 添加控件让用户可以：

切换是否显示起始年份
输入起始年份

import { ToggleControl, TextControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
  const { showStartingYear, startingYear } = attributes;
  const currentYear = new Date().getFullYear().toString();
  
  return (
    <div { ...useBlockProps() }>
      <p>© 
        { showStartingYear && startingYear && (startingYear + ' - ') }
        { currentYear }
      </p>
      <ToggleControl
        label="显示起始年份"
        checked={ showStartingYear }
        onChange={ (value) => setAttributes({ showStartingYear: value }) }
      />
      { showStartingYear && (
        <TextControl
          label="起始年份"
          value={ startingYear }
          onChange={ (value) => setAttributes({ startingYear: value }) }
        />
      )}
    </div>
  );
}

更新前端渲染

同步修改 render.php 以支持新功能：

<p <?php echo get_block_wrapper_attributes(); ?>>
  © 
  <?php if ( $attributes['showStartingYear'] && $attributes['startingYear'] ) : ?>
    <?php echo esc_html( $attributes['startingYear'] ) . ' - '; ?>
  <?php endif; ?>
  <?php echo date( "Y" ); ?>
</p>