对插件文件和区块元数据做出任何更改后，就可以开始添加区块的核心功能了。
通常，这包括通过 Edit 组件在编辑器中添加区块的功能，以及通过 save 函数定义区块如何存储其输出内容。
让我们看看添加区块功能需要做些什么。
添加区块的编辑功能
通常，最好先构建区块的 Edit 组件，这样它就能在编辑器中正常运行。
目前，区块在编辑器中显示的是脚手架文本：“Copyright Date Block – hello from the editor!”，以及脚手架样式。
如果你打开 src 目录中的 edit.js 文件，滚动到导入语句下方，你会看到以下代码：
export default function Edit() {
return (
<p { ...useBlockProps() }>
{ __(
'Copyright Date Block – hello from the editor!',
'copyright-date-block'
) }
</p>
);
}这段代码用于在编辑器中显示区块，也称为 Edit 组件。这里需要注意几点。
首先，该组件返回的内容看起来像一个包含文本的段落标签：
return (
<p { ...useBlockProps() }>
{ __(
'Copyright Date Block – hello from the editor!',
'copyright-date-block'
) }
</p>
);这段代码被称为 JSX，它是一种特殊的语法，看起来像 HTML，但实际上是 JavaScript。因此，虽然 <p> 标签可能看起来像典型的 HTML 段落标签，但你可以看到标签内部有一些代码，这些代码被包裹在花括号 {} 中。
花括号用于表示其中的代码应被当作 JavaScript 来求值，并将结果插入到 JSX 中。
学习 JSX 的工作原理超出了本课的范围，但你可以在 React 网站上了解更多关于 JSX 的信息。
在这个阶段，重要的是要注意 Edit 组件返回的代码被包裹在一个单一的容器元素中。这是该组件的父容器，任何 React 组件都必须只返回一个单一的父容器。这意味着你不能返回两个 <p> 标签，或者一个 <p> 标签和一个 <div> 标签，除非确保它们都在一个父容器内。
根据你的代码编辑器，如果你这样做，可能会看到各种红色警告。
其次要注意的是 useBlockProps 函数的使用。这是一个特殊的函数，被称为 React 钩子，用于获取区块的属性。
你会看到 useBlockProps 前面有三个点 ...，这在 JavaScript 中被称为展开语法。它获取对象的属性，并将对象的键值对添加到它所应用的对象上。
因为 useBlockProps 返回一个包含属性和值的对象，使用展开语法将这些属性和值作为属性应用到父容器上。
最后，你会注意到这段脚手架代码使用了 WordPress 的 __() 函数。这是一个特殊函数，允许文本被翻译成不同的语言，也称为国际化。
你可以在 WordPress 开发者文档中阅读更多关于国际化的内容。
现在，更新组件，使其返回更符合区块需求的内容。例如：
return (
<p { ...useBlockProps() }>
{ __(
'Copyright',
'copyright-date-block'
) }
© 2019 - 2024
</p>
);对于版权符号，你可以使用 © HTML 实体，它会在渲染时被转换为正确的符号。
如果你好奇为什么符号和年份被渲染在 __() 函数之外，那是因为你只需要让“Copyright”这个词可翻译。
你可能不想硬编码结束日期，所以你可以使用一些 JavaScript 来获取当前年份作为变量，并用该变量替换年份。
export default function Edit() {
const currentYear = new Date().getFullYear().toString();
return (
<p { ...useBlockProps() }>
{ __(
'Copyright',
'copyright-date-block'
) }
© 2019 - { currentYear }
</p>
);
}完成更改后，保存文件，让构建运行，或者手动运行构建命令。
当你将区块添加到文章或页面时，你应该会看到区块现在显示了你定义的输出内容。
添加区块的保存功能
下一步是更新区块的保存功能，使其在前端正确渲染。
目前，当你预览区块时，它仍然显示脚手架文本。
save.js 文件中的 save 函数是在编辑器中每次保存区块时运行的。这是存储在数据库 post_content 字段中并在前端渲染的内容。
打开 src 目录中的 save.js 文件，你会看到以下代码：
export default function save() {
return (
<p { ...useBlockProps.save() }>
{ 'Copyright Date Block – hello from the saved content!' }
</p>
);
}这与 Edit 组件中的脚手架代码非常相似，但有一些不同之处。
一个不同之处是，只有区块属性的特定子集通过 useBlockProps.save() 应用到父容器上。
这是因为 save 函数只关注与前端相关的属性，而不涉及编辑器。
另一个区别是，父标签内的代码全部写在一行上。
这对块的实际功能基本没有影响，只是展示了编写相同代码的不同方式。有些开发者喜欢将代码拆分成多行，因为这样在某些情况下更易读。
因此，你可以更新 save 函数，使其返回与 Edit 组件相同的内容。
export default function save() {
const currentYear = new Date().getFullYear().toString();
return (
<p { ...useBlockProps.save() }>
{ 'Copyright' } © 2019 - { currentYear }
</p>
);
}一旦更新后的块构建完成，将其添加到文章中并预览。你应该会看到块现在显示了保存后的标记。
其他资源
要了解更多关于构建 Edit 和 save 功能的内容，请查阅块编辑器手册中的 Edit 和 Save 参考指南。