使用 create-block 搭建好区块框架后，你就可以开始调整代码以满足需求了。
让我们看看在上一课中搭建的版权日期区块具体该如何调整。
清理代码
首先，你可以清理掉不需要的框架代码。
导航到 copyright-date-block/src 目录，删除 view.js 文件。同时，从 block.json 文件中移除 viewScript 属性。请确保 block.json 文件中最后一个属性末尾不要留下多余的逗号。
主插件文件
现在打开插件根目录下的 copyright-date-block.php 文件。
这个文件需要修改的地方不多，可能只需要调整插件头部中的 @package 注释。它默认是 create-block，你可以改成更符合插件的名称。
为了本课的目的，我们将其改为 copyright-date。
你还可以改进注册区块的代码，将钩子注册移到 init 钩子的回调函数上方，并简化回调函数名称。
<?php
/**
* Plugin Name: Copyright Date Block
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 6.6
* Requires PHP: 7.2
* Version: 0.1.0
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: copyright-date-block
*
* @package copyright-date
*/
/**
* Registers the block using the metadata loaded from the `block.json` file.
*/
function copyright_date_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'copyright_date_block_init' );
这样代码会更容易阅读和理解。
如你所见，代码使用 register_block_type 函数注册区块，该函数会利用 block.json 文件中的元数据。
因此，现在是检查 block.json 文件的好时机。
区块元数据
block.json 文件以 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",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {
"html": false
},
"textdomain": "copyright-date-block",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
}
JSON 代表 JavaScript 对象表示法，它是一种轻量级的数据格式，易于人类读写，也易于机器解析和生成。
JSON 由键值对组成，每个值也可以是嵌套的 JSON 对象。
要修改框架生成的区块元数据以适应你的区块，至少需要更改以下属性的值：
- 更新
name。这里可以将create-block替换为与插件头部中@package值相同的名称，即copyright-date。 - 更新
icon。现在将icon的值改为calendar。这个图标来自 Gutenberg 图标库。 - 更新
description，使其更符合你的区块。
你的 block.json 文件应该类似这样：
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "copyright-date/copyright-date-block",
"version": "0.1.0",
"title": "Copyright Date Block",
"category": "widgets",
"icon": "calendar",
"description": "A block that displays the copyright date.",
"example": {},
"supports": {
"html": false
},
"textdomain": "copyright-date-block",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}
区块的主 JavaScript 文件
src 目录中的 index.js 文件是区块的主 JavaScript 文件。通常你不需要对这个文件做太多修改，因为它已经设置好用于在区块编辑器中注册区块。
在文件顶部，你会看到以下代码行：
import { registerBlockType } from '@wordpress/blocks';
JavaScript 的 import 声明用于从其他地方导入功能（变量、函数、对象）。
这里，代码从 @wordpress/blocks 包中导入了 registerBlockType 函数，这个包是驱动区块编辑器的核心包。
接下来，它导入了 style.scss 文件，该文件包含区块的样式。
然后它导入了 Edit 组件。这个组件是从 edit.js 文件中导出的。
之后，它导入了 save 函数。这个函数是从 save.js 文件中导出的。
最后但同样重要的是，它将 block.json 文件中的 JSON 对象作为 metadata 变量导入。
最后，它使用 registerBlockType 函数注册区块，并传入两个变量：区块名称和一个包含区块属性的配置对象。
在属性对象内部，edit 属性被设置为 Edit 组件的值，save 属性被设置为 save 函数的值。由于 save 属性和导入的 save 函数同名，因此使用了简写语法来设置属性值。
首次构建
现在你已经更新了一些区块代码，可以首次构建你的区块了。
要构建区块，请打开终端并导航到区块插件目录的根目录。然后运行以下命令：
npm run build
这将扫描 src 目录中的内容，并将该目录中的文件编译到 build 目录中。
如果 build 目录不存在，则会自动创建。
每当您对区块代码进行更改时，都需要再次运行此命令来更新构建目录。
另外，还有一个 npm run start 命令，它会启动一个开发服务器，监视 src 目录中的文件更改，并自动将它们构建到 build 目录中。
npm run start当您正在积极开发区块时，这个功能非常有用。
无论您使用哪种方式，如果打开 WordPress 仪表盘，创建一篇新文章，并添加您的区块，您应该会在区块插入器中看到该区块。
您会注意到图标已经改变，描述也更具体地针对您的区块。
其他资源
您可以在区块编辑器手册的“block.json 中的元数据”部分了解更多关于区块元数据字段的信息，以及在“开发平台”和“使用 JavaScript 处理区块编辑器”页面中了解开发平台和构建流程的更多内容。