Gutenberg 术语全解析从 Attribute Sources 到 Site Editor 的块编辑器核心概念指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读本文以 GutenbergWordPress 块编辑器项目的官方术语表为主体系统梳理块编辑器中最核心、最高频出现的概念从块Block如何通过 Attribute Sources 从 HTML 中提取状态、如何序列化Serialization回 Markup到 Block Supports 如何自动化样式能力再到 Block Theme、Full Site Editing、Global Styles、Site Editor 等整套站点级编辑体系。读者阅读后可建立完整的术语心智模型并能在阅读 块 API 参考、架构文档 等仓库文档时快速定位概念文章同时结合仓库源码如 packages/blocks 与 lib/block-supports补充实现层面的细节帮助你从知道概念进阶到理解机制。说明本文内容以 docs/getting-started/glossary.md 为核心骨架仓库源码与测试仅用于佐证与深化。文中涉及的实现细节均可在对应源码文件中查证。从内容到结构块Block与相关数据类型Block构成网页内容的抽象单元Block是描述组成一个网页内容或布局的标记单元的抽象术语。它把 WordPress 过去通过短代码shortcodes、自定义 HTML、嵌入发现embed discovery等不同手段实现的功能统一到一个一致的 API 与用户体验中。一个段落、一张图片、一组列、一个查询列表……都是块。块组合在一起就形成了页面内容。与块相关的一组关键概念包括Block type块类型描述任何该类型的块应该如何表现的蓝图。与某个特定帖子中具体的块相对块类型是定义层面的概念一篇帖子中可能有很多图片但每个图片都遵循同一个统一的图片块类型定义。在仓库中块类型通过registerBlockType注册其注册入口位于 packages/blocks/src/api/registration.ts该方法会校验块名的格式并将定义写入 blocks store。Block name块名块类型的唯一标识符由插件专属命名空间 简短标签组成例如core/image。从源码看registerBlockType会通过正则/^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/校验名称必须包含命名空间前缀、仅由小写字母数字或连字符组成、以字母开头例如my-plugin/my-custom-block见 packages/blocks/src/api/registration.ts。Block Styles块样式属于块本身的 CSS 样式既包括块的样式表也包括块标记markup本身携带的样式例如附加在块标记上的 class 就属于块样式。它与 Global Styles 相对因此也常被称为Local Styles本地样式。更深入的内容参见 docs/explanations/architecture/styles.md。Block categories块分类不是 WordPress 的 taxonomy分类法而是内部用于在 Block Library 中排序块的分组方式。Block Library块库原 Block Inserter选择可用块的主要界面通过块上的加号图标或编辑器界面左上角的加号按钮触发。Attributes 与 Attribute Sources块的状态从哪来Attributes属性是块在帖子内容中当前状态的对象表示加载一篇已保存的帖子时属性由该块类型的attribute sources决定编辑会话中用户修改块时这些值会随时间变化序列化块时正是依据这些属性值来生成 HTML。Attribute Sources属性源是描述块属性形状的对象键名可按最贴合块类型状态的方式来命名每个键对应的值是一个描述如何从已保存帖子内容中提取属性值的函数。处理完成后会生成一个新对象其形状与 attribute sources 中定义的键一致每个值即属性源函数的执行结果。在仓库源码中属性提取的具体逻辑位于 packages/blocks/src/api/parser/get-block-attributes.tsgetBlockAttributes遍历块类型定义中的attributes对每个键调用getBlockAttributegetBlockAttribute根据attributeSchema.source分流undefined无 source表示该属性序列化在块的注释comment里raw表示直接取原始块内容而attribute、property、html、text、rich-text、children、node、query、tag等则交给parseWithAttributeSchema通过 hpq matcher 从解析后的 DOM 中提取见 packages/blocks/src/api/parser/get-block-attributes.ts提取结果还会经过isValidByType/isValidByEnum校验对应 JSON Schema 的type与enum不合法时回退到默认值见 packages/blocks/src/api/parser/get-block-attributes.ts。静态块、动态块与经典块Static block静态块内容在保存帖子时就已确定的块。保存时会把 HTML 标记直接写入帖子内容。Dynamic block动态块内容可能变化、无法在保存时确定而是在帖子于站点前端被展示的任何时刻重新计算的块。这类块在 JavaScript 实现中可以保存回退内容或不保存任何内容运行时渲染则交给 PHP 块实现render_callback。仓库中大量核心动态块的 PHP 渲染逻辑分布在 packages/block-library/src 各目录下。Classic block经典块将 TinyMCE 编辑器作为块嵌入的块。TinyMCE 是旧版核心编辑器的基础在块编辑器之前创建的历史内容会被加载到单个 Classic block 中。Reusable block可复用块保存后可以作为可复用、可重复的内容片段共享的块。Block Supports让块声明能力的 APIBlock Supports是一个让块声明自己支持哪些特性的 API。通过声明对某个特性的支持API 会为块添加额外的 Attributes并为大多数已支持的块支持项生成对应的 UI 控件。典型用法是在块的block.json中通过supports字段声明例如段落块声明支持字号{ name: core/paragraph, supports: { typography: { fontSize: true } } }声明之后系统会显示字号 UI 控件除非被主题通过theme.json禁用、自动准备控件数据块当前字号、可用字号列表并在用户修改后把数据序列化为 HTML 标记自动附加 class 与内联样式。从仓库源码看Block Supports 的处理机制分布在两处前端 JavaScript 侧supports是registerBlockType处理block.json元数据时允许读取的字段之一见 packages/blocks/src/api/registration.ts服务端 PHP 侧lib/block-supports/目录下按能力拆分了一系列处理器例如颜色 colors.php、排版 typography.php、尺寸 dimensions.php、边框 border.php、阴影 shadow.php、间距 spacing.php、布局 layout.php 等共同把block.json中的supports声明转化为编辑器能力与前端样式输出。相关测试见 phpunit/block-supports。除减少重复工作外Block Supports 还有其他优势块的样式信息对原生移动端应用和服务器端可用块会使用与其他块一致的 UI 控件形成更连贯的体验这些 UI 控件升级时使用它们的块会自动获得改进无需块作者做任何事。关于 Block Supports 的深入细节可查阅术语表中引用的 Block Supports 参考文档以及仓库中的 docs/reference-guides/block-api/block-supports.md。模板与全站编辑Block Theme、Block Templates 与 Template PartsBlock Theme块主题以块的方式构建、允许 Full Site Editing全站编辑工作的主题。块主题的核心是它的block templates块模板与block template parts块模板部件。块主题的模板本质上是对应 WordPress 标准模板层级template hierarchy中模板如 index、single、archive的、由块标记组成的 HTML 文件。Block Templates块模板模板是块的一种预定义排布可能带有预定义的属性或占位内容。你可以为某个帖子类型提供模板作为用户创建新内容时的起点也可以在自定义块内部配合InnerBlocks组件使用模板。其本质是由块标记组成的 HTML 文件映射到 WordPress 标准模板层级中的模板。这有助于控制站点前端默认值——那些不通过 Page Editor 或 Post Editor 编辑的部分。更多信息见 docs/reference-guides/block-api/block-templates.md。Block Template Parts块模板部件在 Block Templates 之上Template Parts 帮助为 Footer、Header 这类站点中常见的可复用元素搭建结构。它们主要是站点结构绝不与帖子内容编辑器混用。在全站编辑与块主题体系下用户可以创建自己的任意 Template Parts、存入站点数据库并在整个站点中复用。模板部件在块的世界里等价于主题模板部件通常由主题先定义、带有一定语义如 header 可以跨主题互换并且只能在站点编辑器上下文中templates 内插入。在仓库中与模板解析、模式patterns解析相关的服务端测试见 phpunit/class-resolve-patterns-in-templates-test.php 与 phpunit/class-resolve-patterns-in-template-parts-test.php块模板注册表实现位于 phpunit/class-wp-block-templates-registry-test.php 对应的lib实现中。Full Site Editing全站编辑与 Site Editor站点编辑器Full Site Editing指以块为起点编辑整个网站的一组特性集合涵盖块模式block patterns、全局样式Global Styles、模板、块的 design tools 等。首次随 WordPress 5.9 发布。Site Editor让用户直接在各类模板、模板部件、样式选项之间编辑和跳转的连贯体验。Template Editing Mode模板编辑模式一种精简的直接编辑体验允许用户编辑/修改/创建某个帖子或页面所使用的模板。相关测试可参考 phpunit/class-gutenberg-rest-templates-controller-test.php。样式体系Block Styles 与 Global Styles 的对立统一Global Styles全局样式Global Styles指由 WordPress 生成、作为内嵌样式表注入站点前端的 CSS 样式样式表 ID 为global-styles-inline-css。其内容来源包括WordPress 默认的theme.json、主题的theme.json、以及用户在站点编辑器的全局样式侧边栏中提供的样式。从仓库源码看global-styles-inline-css这一 ID 在 lib/block-supports/duotone.php 的注释中被明确引用说明 Gutenberg 的全局样式输出在排序上遵循先其他全局样式、后global-styles-inline-css的约定。全局样式的数据流大体分三步收集数据WordPress 自带的theme.json、活动主题的theme.json若存在、以及用户通过站点编辑器全局样式 UI 提供的样式保存在数据库中整合数据将不同来源WordPress 默认、主题、用户的结构化信息归一化并合并为单一结构转为样式表将内部表示转换为 CSS 样式规则并以样式表形式排队输出。其中styles部分的合并遵循用户数据覆盖主题数据主题数据覆盖 WordPress 数据的优先级而settings中的 presets预设如color.duotone、color.gradients、color.palette、typography.fontFamilies、typography.fontSizes不互相覆盖而是全部存入合并后的结构以default/theme/user分组。styles到 CSS 的转换规则为键值对映射为 CSS 声明顶层段落使用body选择器顶层元素使用对应 HTML 元素的 ID 选择器如h1、a块使用其默认类名core/group变为.wp-block-group块内元素则拼接块与元素选择器。Presets 会转换为命名结构为--wp--preset--category-slug的 CSS 自定义属性同时除 duotone 外还会为每个预设值生成has-*系列 class。这些规则的详细展开见 docs/explanations/architecture/styles.md相关参考文档位于 docs/reference-guides/theme-json-reference/README.md 与 docs/how-to-guides/themes/global-settings-and-styles.md。对比Block Styles 与 Local StylesBlock Styles块的样式样式表或块标记自带的样式也即Local Styles——与 Global Styles 相对。Global Styles 不会序列化进帖子内容、不附着在块 HTML 上而是以独立样式表输出Block Styles 则通过用户操作附加 class 或内联样式直接反映在块标记中也就是术语表中的 Serialization序列化 过程的结果。Serialization序列化每次块被编辑时把块的属性对象转换为 HTML 标记的过程。仓库中实现这一过程的序列化器位于 packages/blocks/src/api/serializer.tsx其中getBlockDefaultClassName按wp-block-{name}命名规则生成块的默认 classcore/前缀会被去除例如core/image→wp-block-image见 packages/blocks/src/api/serializer.tsxgetSaveElement调用块的save渲染函数并支持blocks.getSaveElement等过滤器最终由getSaveContent输出静态标记见 packages/blocks/src/api/serializer.tsx。编辑器界面与交互组件Settings Sidebar设置侧边栏原 Inspector右侧面板包含文档设置与块设置。通过设置齿轮图标切换选中块时显示块设置否则显示文档设置。Inspector 是已废弃的叫法现在应使用Settings Sidebar这一术语。Post settings帖子设置侧边栏中的一个区域包含帖子的元数据字段包括定时发布scheduling、可见性visibility、分类术语terms与特色图片featured image。Toolbar工具栏一组按钮控件。在块的语境下通常指选中块后显示在块上方的块控件工具栏。RichText一个通用组件支持富内容编辑包括加粗、斜体、超链接等。其实现与文档见 packages/rich-text。面向内容与查询的块Navigation、Query、PatternsNavigation Block导航块允许用户编辑站点导航菜单的块既可编辑结构也可编辑设计。仓库中导航相关实现位于 packages/block-library/src/navigation 与 packages/navigation。Query Block查询块复制经典WP_Query行为的块并允许通过额外功能进一步定制。它让用户无需编写 PHP 即可在编辑器中构建动态内容列表是动态块思想在编辑体验层面的典型体现。Patterns模式块的预定义布局可作为起始内容插入设计上每次插入后都应由用户自行修改。一旦插入它们以本地保存的形式存在不是全局的。关于模式含模板中的模式解析的 PHP 测试见 phpunit/class-resolve-patterns-in-templates-test.php。Theme Blocks主题块完成传统模板中可用模板标签template tags能做到的所有事情的块例如 Post Author Block。完整列表见 Gutenberg 仓库的 issue #22724此处仅提及不附外部链接。小结一张概念关系图把上述术语串起来可以得到一条清晰的主线内容层Block 由 Block type 定义行为Block name 唯一标识类型Attributes 描述块的当前状态Attribute sources 规定状态如何从已保存内容中提取。序列化层编辑时块被 Serialization 为 HTML静态块直接保存标记动态块交给 PHP 运行时渲染经典内容由 Classic block 承载。能力层Block Supports 让块声明能力并自动获得属性与 UI 控件样式上分为 Block StylesLocal Styles与 Global Styles 两条路径前者序列化进标记后者以global-styles-inline-css样式表全局输出。站点层Block Theme 由 Block Templates 与 Block Template Parts 构成支撑 Full Site Editing用户通过 Site Editor 与 Settings Sidebar 完成模板、样式与帖子元数据的编辑Navigation、Query、Patterns 等块则把传统 PHP 模板能力带入可视化编辑。进一步阅读术语表原文docs/getting-started/glossary.md入门导航docs/getting-started/README.md样式架构详解docs/explanations/architecture/styles.md块 API 参考docs/reference-guides/block-api/README.md、块模板、Block Supportstheme.json 参考docs/reference-guides/theme-json-reference/README.md相关源码块注册与序列化位于 packages/blocks/src/api属性解析位于 packages/blocks/src/api/parser服务端样式能力位于 lib/block-supports【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Gutenberg 术语全解析：从 Attribute Sources 到 Site Editor 的块编辑器核心概念指南
Gutenberg 术语全解析从 Attribute Sources 到 Site Editor 的块编辑器核心概念指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读本文以 GutenbergWordPress 块编辑器项目的官方术语表为主体系统梳理块编辑器中最核心、最高频出现的概念从块Block如何通过 Attribute Sources 从 HTML 中提取状态、如何序列化Serialization回 Markup到 Block Supports 如何自动化样式能力再到 Block Theme、Full Site Editing、Global Styles、Site Editor 等整套站点级编辑体系。读者阅读后可建立完整的术语心智模型并能在阅读 块 API 参考、架构文档 等仓库文档时快速定位概念文章同时结合仓库源码如 packages/blocks 与 lib/block-supports补充实现层面的细节帮助你从知道概念进阶到理解机制。说明本文内容以 docs/getting-started/glossary.md 为核心骨架仓库源码与测试仅用于佐证与深化。文中涉及的实现细节均可在对应源码文件中查证。从内容到结构块Block与相关数据类型Block构成网页内容的抽象单元Block是描述组成一个网页内容或布局的标记单元的抽象术语。它把 WordPress 过去通过短代码shortcodes、自定义 HTML、嵌入发现embed discovery等不同手段实现的功能统一到一个一致的 API 与用户体验中。一个段落、一张图片、一组列、一个查询列表……都是块。块组合在一起就形成了页面内容。与块相关的一组关键概念包括Block type块类型描述任何该类型的块应该如何表现的蓝图。与某个特定帖子中具体的块相对块类型是定义层面的概念一篇帖子中可能有很多图片但每个图片都遵循同一个统一的图片块类型定义。在仓库中块类型通过registerBlockType注册其注册入口位于 packages/blocks/src/api/registration.ts该方法会校验块名的格式并将定义写入 blocks store。Block name块名块类型的唯一标识符由插件专属命名空间 简短标签组成例如core/image。从源码看registerBlockType会通过正则/^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/校验名称必须包含命名空间前缀、仅由小写字母数字或连字符组成、以字母开头例如my-plugin/my-custom-block见 packages/blocks/src/api/registration.ts。Block Styles块样式属于块本身的 CSS 样式既包括块的样式表也包括块标记markup本身携带的样式例如附加在块标记上的 class 就属于块样式。它与 Global Styles 相对因此也常被称为Local Styles本地样式。更深入的内容参见 docs/explanations/architecture/styles.md。Block categories块分类不是 WordPress 的 taxonomy分类法而是内部用于在 Block Library 中排序块的分组方式。Block Library块库原 Block Inserter选择可用块的主要界面通过块上的加号图标或编辑器界面左上角的加号按钮触发。Attributes 与 Attribute Sources块的状态从哪来Attributes属性是块在帖子内容中当前状态的对象表示加载一篇已保存的帖子时属性由该块类型的attribute sources决定编辑会话中用户修改块时这些值会随时间变化序列化块时正是依据这些属性值来生成 HTML。Attribute Sources属性源是描述块属性形状的对象键名可按最贴合块类型状态的方式来命名每个键对应的值是一个描述如何从已保存帖子内容中提取属性值的函数。处理完成后会生成一个新对象其形状与 attribute sources 中定义的键一致每个值即属性源函数的执行结果。在仓库源码中属性提取的具体逻辑位于 packages/blocks/src/api/parser/get-block-attributes.tsgetBlockAttributes遍历块类型定义中的attributes对每个键调用getBlockAttributegetBlockAttribute根据attributeSchema.source分流undefined无 source表示该属性序列化在块的注释comment里raw表示直接取原始块内容而attribute、property、html、text、rich-text、children、node、query、tag等则交给parseWithAttributeSchema通过 hpq matcher 从解析后的 DOM 中提取见 packages/blocks/src/api/parser/get-block-attributes.ts提取结果还会经过isValidByType/isValidByEnum校验对应 JSON Schema 的type与enum不合法时回退到默认值见 packages/blocks/src/api/parser/get-block-attributes.ts。静态块、动态块与经典块Static block静态块内容在保存帖子时就已确定的块。保存时会把 HTML 标记直接写入帖子内容。Dynamic block动态块内容可能变化、无法在保存时确定而是在帖子于站点前端被展示的任何时刻重新计算的块。这类块在 JavaScript 实现中可以保存回退内容或不保存任何内容运行时渲染则交给 PHP 块实现render_callback。仓库中大量核心动态块的 PHP 渲染逻辑分布在 packages/block-library/src 各目录下。Classic block经典块将 TinyMCE 编辑器作为块嵌入的块。TinyMCE 是旧版核心编辑器的基础在块编辑器之前创建的历史内容会被加载到单个 Classic block 中。Reusable block可复用块保存后可以作为可复用、可重复的内容片段共享的块。Block Supports让块声明能力的 APIBlock Supports是一个让块声明自己支持哪些特性的 API。通过声明对某个特性的支持API 会为块添加额外的 Attributes并为大多数已支持的块支持项生成对应的 UI 控件。典型用法是在块的block.json中通过supports字段声明例如段落块声明支持字号{ name: core/paragraph, supports: { typography: { fontSize: true } } }声明之后系统会显示字号 UI 控件除非被主题通过theme.json禁用、自动准备控件数据块当前字号、可用字号列表并在用户修改后把数据序列化为 HTML 标记自动附加 class 与内联样式。从仓库源码看Block Supports 的处理机制分布在两处前端 JavaScript 侧supports是registerBlockType处理block.json元数据时允许读取的字段之一见 packages/blocks/src/api/registration.ts服务端 PHP 侧lib/block-supports/目录下按能力拆分了一系列处理器例如颜色 colors.php、排版 typography.php、尺寸 dimensions.php、边框 border.php、阴影 shadow.php、间距 spacing.php、布局 layout.php 等共同把block.json中的supports声明转化为编辑器能力与前端样式输出。相关测试见 phpunit/block-supports。除减少重复工作外Block Supports 还有其他优势块的样式信息对原生移动端应用和服务器端可用块会使用与其他块一致的 UI 控件形成更连贯的体验这些 UI 控件升级时使用它们的块会自动获得改进无需块作者做任何事。关于 Block Supports 的深入细节可查阅术语表中引用的 Block Supports 参考文档以及仓库中的 docs/reference-guides/block-api/block-supports.md。模板与全站编辑Block Theme、Block Templates 与 Template PartsBlock Theme块主题以块的方式构建、允许 Full Site Editing全站编辑工作的主题。块主题的核心是它的block templates块模板与block template parts块模板部件。块主题的模板本质上是对应 WordPress 标准模板层级template hierarchy中模板如 index、single、archive的、由块标记组成的 HTML 文件。Block Templates块模板模板是块的一种预定义排布可能带有预定义的属性或占位内容。你可以为某个帖子类型提供模板作为用户创建新内容时的起点也可以在自定义块内部配合InnerBlocks组件使用模板。其本质是由块标记组成的 HTML 文件映射到 WordPress 标准模板层级中的模板。这有助于控制站点前端默认值——那些不通过 Page Editor 或 Post Editor 编辑的部分。更多信息见 docs/reference-guides/block-api/block-templates.md。Block Template Parts块模板部件在 Block Templates 之上Template Parts 帮助为 Footer、Header 这类站点中常见的可复用元素搭建结构。它们主要是站点结构绝不与帖子内容编辑器混用。在全站编辑与块主题体系下用户可以创建自己的任意 Template Parts、存入站点数据库并在整个站点中复用。模板部件在块的世界里等价于主题模板部件通常由主题先定义、带有一定语义如 header 可以跨主题互换并且只能在站点编辑器上下文中templates 内插入。在仓库中与模板解析、模式patterns解析相关的服务端测试见 phpunit/class-resolve-patterns-in-templates-test.php 与 phpunit/class-resolve-patterns-in-template-parts-test.php块模板注册表实现位于 phpunit/class-wp-block-templates-registry-test.php 对应的lib实现中。Full Site Editing全站编辑与 Site Editor站点编辑器Full Site Editing指以块为起点编辑整个网站的一组特性集合涵盖块模式block patterns、全局样式Global Styles、模板、块的 design tools 等。首次随 WordPress 5.9 发布。Site Editor让用户直接在各类模板、模板部件、样式选项之间编辑和跳转的连贯体验。Template Editing Mode模板编辑模式一种精简的直接编辑体验允许用户编辑/修改/创建某个帖子或页面所使用的模板。相关测试可参考 phpunit/class-gutenberg-rest-templates-controller-test.php。样式体系Block Styles 与 Global Styles 的对立统一Global Styles全局样式Global Styles指由 WordPress 生成、作为内嵌样式表注入站点前端的 CSS 样式样式表 ID 为global-styles-inline-css。其内容来源包括WordPress 默认的theme.json、主题的theme.json、以及用户在站点编辑器的全局样式侧边栏中提供的样式。从仓库源码看global-styles-inline-css这一 ID 在 lib/block-supports/duotone.php 的注释中被明确引用说明 Gutenberg 的全局样式输出在排序上遵循先其他全局样式、后global-styles-inline-css的约定。全局样式的数据流大体分三步收集数据WordPress 自带的theme.json、活动主题的theme.json若存在、以及用户通过站点编辑器全局样式 UI 提供的样式保存在数据库中整合数据将不同来源WordPress 默认、主题、用户的结构化信息归一化并合并为单一结构转为样式表将内部表示转换为 CSS 样式规则并以样式表形式排队输出。其中styles部分的合并遵循用户数据覆盖主题数据主题数据覆盖 WordPress 数据的优先级而settings中的 presets预设如color.duotone、color.gradients、color.palette、typography.fontFamilies、typography.fontSizes不互相覆盖而是全部存入合并后的结构以default/theme/user分组。styles到 CSS 的转换规则为键值对映射为 CSS 声明顶层段落使用body选择器顶层元素使用对应 HTML 元素的 ID 选择器如h1、a块使用其默认类名core/group变为.wp-block-group块内元素则拼接块与元素选择器。Presets 会转换为命名结构为--wp--preset--category-slug的 CSS 自定义属性同时除 duotone 外还会为每个预设值生成has-*系列 class。这些规则的详细展开见 docs/explanations/architecture/styles.md相关参考文档位于 docs/reference-guides/theme-json-reference/README.md 与 docs/how-to-guides/themes/global-settings-and-styles.md。对比Block Styles 与 Local StylesBlock Styles块的样式样式表或块标记自带的样式也即Local Styles——与 Global Styles 相对。Global Styles 不会序列化进帖子内容、不附着在块 HTML 上而是以独立样式表输出Block Styles 则通过用户操作附加 class 或内联样式直接反映在块标记中也就是术语表中的 Serialization序列化 过程的结果。Serialization序列化每次块被编辑时把块的属性对象转换为 HTML 标记的过程。仓库中实现这一过程的序列化器位于 packages/blocks/src/api/serializer.tsx其中getBlockDefaultClassName按wp-block-{name}命名规则生成块的默认 classcore/前缀会被去除例如core/image→wp-block-image见 packages/blocks/src/api/serializer.tsxgetSaveElement调用块的save渲染函数并支持blocks.getSaveElement等过滤器最终由getSaveContent输出静态标记见 packages/blocks/src/api/serializer.tsx。编辑器界面与交互组件Settings Sidebar设置侧边栏原 Inspector右侧面板包含文档设置与块设置。通过设置齿轮图标切换选中块时显示块设置否则显示文档设置。Inspector 是已废弃的叫法现在应使用Settings Sidebar这一术语。Post settings帖子设置侧边栏中的一个区域包含帖子的元数据字段包括定时发布scheduling、可见性visibility、分类术语terms与特色图片featured image。Toolbar工具栏一组按钮控件。在块的语境下通常指选中块后显示在块上方的块控件工具栏。RichText一个通用组件支持富内容编辑包括加粗、斜体、超链接等。其实现与文档见 packages/rich-text。面向内容与查询的块Navigation、Query、PatternsNavigation Block导航块允许用户编辑站点导航菜单的块既可编辑结构也可编辑设计。仓库中导航相关实现位于 packages/block-library/src/navigation 与 packages/navigation。Query Block查询块复制经典WP_Query行为的块并允许通过额外功能进一步定制。它让用户无需编写 PHP 即可在编辑器中构建动态内容列表是动态块思想在编辑体验层面的典型体现。Patterns模式块的预定义布局可作为起始内容插入设计上每次插入后都应由用户自行修改。一旦插入它们以本地保存的形式存在不是全局的。关于模式含模板中的模式解析的 PHP 测试见 phpunit/class-resolve-patterns-in-templates-test.php。Theme Blocks主题块完成传统模板中可用模板标签template tags能做到的所有事情的块例如 Post Author Block。完整列表见 Gutenberg 仓库的 issue #22724此处仅提及不附外部链接。小结一张概念关系图把上述术语串起来可以得到一条清晰的主线内容层Block 由 Block type 定义行为Block name 唯一标识类型Attributes 描述块的当前状态Attribute sources 规定状态如何从已保存内容中提取。序列化层编辑时块被 Serialization 为 HTML静态块直接保存标记动态块交给 PHP 运行时渲染经典内容由 Classic block 承载。能力层Block Supports 让块声明能力并自动获得属性与 UI 控件样式上分为 Block StylesLocal Styles与 Global Styles 两条路径前者序列化进标记后者以global-styles-inline-css样式表全局输出。站点层Block Theme 由 Block Templates 与 Block Template Parts 构成支撑 Full Site Editing用户通过 Site Editor 与 Settings Sidebar 完成模板、样式与帖子元数据的编辑Navigation、Query、Patterns 等块则把传统 PHP 模板能力带入可视化编辑。进一步阅读术语表原文docs/getting-started/glossary.md入门导航docs/getting-started/README.md样式架构详解docs/explanations/architecture/styles.md块 API 参考docs/reference-guides/block-api/README.md、块模板、Block Supportstheme.json 参考docs/reference-guides/theme-json-reference/README.md相关源码块注册与序列化位于 packages/blocks/src/api属性解析位于 packages/blocks/src/api/parser服务端样式能力位于 lib/block-supports【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考