最近更新的页面
教程:构建你的第一个区块
在本教程中,你将构建一个"版权日期区块"——一个基础但实用的区块,用于显示版权符号(©)、当前年份以及可选的起始年份。这类内容通常用于网站页脚。 本教程将引导你完成完整流程,从使用 creat...
快速入门指南
本指南旨在通过实践方法演示 WordPress 区块开发的基本原理。按照以下步骤,您将在几分钟内创建一个使用现代 JavaScript(ESNext 和 JSX)的自定义区块插件。该示例区块将显...
术语表
属性来源 描述区块属性结构的对象。其键名可根据区块类型的状态进行最合适的命名。每个键对应的值是一个函数,用于描述从已保存文章内容中提取属性值的策略。处理时,系统会创建一个新对象,其结构遵循属性来...
常见问题解答
以下整理了古腾堡开发近几年来遇到的一系列问题。如果您有任何希望得到解答并收录于此的问题,只需在 GitHub 上提交问题。我们很乐意解答那些可能未曾考虑过的问题,并提供清晰说明。如需回顾历史,请...
资源
Figma WordPress 设计团队 使用 Figma 进行协作和分享工作。如果您想参与贡献,可以使用 WordPress Figma 设计库 来制作模型。您也可以加入 Slack 中的 #...
区块设计
以下是设计新区块的最佳实践,包含建议和现有区块的详细描述,以说明我们创建区块的方法。 最佳实践 区块的主要界面是其内容区域 由于区块本身代表网站上实际显示的内容,此处的交互最贴近直接操作原则,对...
动画
动画能够强化层级感和空间方位感。本文档将阐述添加动画时应遵循的原则。 基本原则 起始点 动画有助于锚定界面元素。例如,菜单可以从触发按钮的位置缩放展开。 动画有助于营造空间感;例如,侧边栏可以从...
编辑器中的样式
它为读者提供了相关参考指南和教程链接,以便深入理解每个概念。本文档主要面向区块开发者和区块编辑器项目工作者。 HTML 与 CSS 用户通过区块编辑器创建文章时,会生成多种产物:一份 HTML ...
性能
性能是编辑器应用的关键特性,区块编辑器也不例外。 指标 为确保区块编辑器在版本迭代和开发过程中保持高性能,我们通过性能基准测试任务监控若干关键指标。 部分核心重要指标包括: 加载时间: 加载编辑...
模块化
WordPress 区块编辑器基于这样的理念:你可以将独立的区块组合在一起来撰写文章或构建页面。区块之间也可以相互使用和交互。这使得它非常模块化和灵活。 但区块编辑器不仅在行为和输出上采用模块化...
核心概念
区块 区块是用于构建和交互内容的抽象单元。当它们组合在一起时,就构成了网页的内容。从段落、视频到网站标题,所有内容都以区块的形式呈现。 区块形式多样,但提供一致的接口。它们可以被插入、移动、重新...
站点编辑模板
模板与模板部件流程 本文档将解释模板和模板部件在前端如何渲染、在后端如何编辑的内部机制。 存储机制 与常规模板类似,区块模板最初以文件形式存在于主题文件夹中,但主要区别在于用户可以通过站点编辑器...
实体与撤销/重做
无论是文章编辑器还是站点编辑器,WordPress 编辑器操作的都是我们称为实体记录的对象。这些对象代表文章、页面、用户、分类项、模板等数据。它们存储在数据库中,并由编辑器进行操作。每个编辑器可...
数据流与数据格式
格式说明 区块编辑器文章是文章在区块感知层面的规范表示形式:它是一系列语义一致的描述集合,用于说明每个区块是什么及其核心数据。这种表示形式仅存在于内存中。它如同排版车间的追版过程——随着铅字的嵌...
自动化测试
为何选择 Playwright 作为端到端测试工具? 针对基于网页的端到端自动化测试,存在丰富的工具生态系统。Gutenberg 使用 Playwright 作为其端到端测试框架。该项目曾使用 ...
历史
一系列链接和资源,涵盖古腾堡项目的历史、启动过程、灵感来源以及初步构想。 灵感来源 2017年初进行了一项社区编辑器体验调查,该调查强化了WordPress需要全新编辑体验的需求。 以下是对古腾...
How to guide template
Overview A how to guide walks through a series of steps focused on completing a single task. The ...
文案撰写指南
长文本 适用于多行/多步骤说明,或页面/功能叙述性介绍与引导的撰写指南。 具体内容会因情境差异而有较大变化,但以下是一些通用建议: 一:善用缩略形式! 缩略形式更具对话感,是让文本听起来更友好、...
Schema
import YoastSchemaExample from '@site/src/components/YoastSchemaExample'; Yoast SEO for Shopify 会...
Review Apps
import YoastSchemaExample from '../../../src/components/YoastSchemaExample'; 为了与 Shopify 平台上的评论应用...