跳转到主要内容

书籍

Gutenberg 区块编辑器文档

Gutenberg 区块编辑器文档中文翻译,面向区块与编辑器扩展。

152 页更新于 7 个月前

开始阅读

目录152

  1. 01 Gutenberg 私有 API 本文概述 Gutenberg 包公开的私有 API。这些 API 用于实现 Gutenberg 编辑器(文章编辑器、站点编辑器、核心区块等)的部分功能,但未向插件和主题开发者或自定义 Gutenberg 集成的开发... 7 个月前
  2. 02 无障碍测试 这是一份关于如何在 Gutenberg 中测试无障碍功能的指南。这是一份动态文档,可以随着新方法和技术的出现而不断完善。 开始之前 请确保您已按照入门指南中的说明设置好本地环境。 键盘测试 除了鼠标,请确保界面对于... 7 个月前
  3. 03 文件夹结构 以下代码片段说明了 Gutenberg 仓库的结构,省略了无关或明显的项目,并提供进一步解释: │ ├── LICENSE ├── README.md ├── SECURITY.md ├── CONTRIBUTIN... 7 个月前
  4. 04 Localizing Gutenberg The Gutenberg plugin is translated via the general plugin translation system (GlotPress) at https://transla... 7 个月前
  5. 05 Repository Management This is a living document explaining how we collaboratively manage the Gutenberg repository. If you’d like ... 7 个月前
  6. 06 分类 为保持仓库健康,需要定期进行分类处理。分类是指审查现有议题和拉取请求,确保它们具有相关性、可操作性且包含所有必要信息。任何人都可以协助分类,但您需要成为 Gutenberg 仓库分类团队的成员才能修改议题标签或编辑... 7 个月前
  7. 07 Gutenberg versions in WordPress With each major release of WordPress a new version of Gutenberg is included. This has caused confusion over... 7 个月前
  8. 08 自动化精选合并 npm run other:cherry-pick 可自动将带有特定标签的 Pull Request 精选合并到当前分支。 这对于主要的 WordPress 版本发布特别有用,因为默认情况下脚本会查找带有 Bac... 7 个月前
  9. 09 将代码反向合并到 WordPress 核心 对于 WordPress 软件的主要版本,需要将 Gutenberg 的功能合并到 WordPress 核心中。这通常涉及获取 Gutenberg 仓库中 .php 文件的更改,并在 WP 核心代码库中进行相应的... 7 个月前
  10. 10 向后兼容性 历史上,WordPress 一直以保持跨版本向后兼容性而闻名。Gutenberg 在其生产环境的公共 API 中尽可能遵循这一原则。在极少数情况下,破坏向后兼容性不可避免,此时应遵循以下原则: 应尽可能将破坏范围限... 7 个月前
  11. 11 构建系统:函数前缀与块加载 Gutenberg 使用一套构建系统来自动转换 PHP 函数名称,以避免与 WordPress 核心发生冲突。该系统允许 Gutenberg 在源代码中使用标准的 WordPress 函数名,同时确保插件能与 Wo... 7 个月前
  12. 12 编码规范 本文档旨在规定 Gutenberg 项目特有的编码规范。基础编码规范遵循 WordPress 编码标准。以下章节概述了 Gutenberg 项目中使用的额外模式和约定。 CSS 命名规范 为避免类名冲突,类名必须遵... 7 个月前
  13. 13 弃用说明 对于 Gutenberg 插件中包含的功能,弃用政策旨在尽可能支持向后兼容两个次要插件版本。WordPress 稳定版本中包含的功能和代码不在此弃用时间线内,而是遵循 WordPress 项目的版本控制政策。当前的... 7 个月前
  14. 14 代码贡献入门指南 以下指南将帮助您设置本地环境,以便为 Gutenberg 项目做出贡献。用于贡献的环境与用于扩展 WordPress 区块编辑器的环境存在大量重叠。您可以查阅开发环境教程获取更多设置信息。 前提条件 Node.js... 7 个月前
  15. 15 Git 工作流程 本文档旨在帮助您开始将 Git 与 Gutenberg 结合使用。Git 是一款强大的源代码管理工具;要深入学习 Git,请查阅遵循 CC BY-NC-SA 3.0 许可免费在线提供的 Pro Git 书籍。 如果... 7 个月前
  16. 16 如何让你的 Pull Request 获得审阅? 有时我们发布了一个 Pull Request,却没有人审阅我们的工作。该怎么办? 吸引审阅很大程度上不在于代码本身——而在于让审阅变得容易。 如果你发布了一个 Pull Request 却没有得到任何评论或审阅,可... 7 个月前
  17. 17 管理软件包 本仓库使用 npm workspaces 来管理 WordPress 软件包,并使用 lerna 将它们发布到 npm。这强制规定了工作流程中的某些步骤,详情请参阅 packages 文档。 维护数十个 npm 软... 7 个月前
  18. 18 脚本 编辑器为插件开发者提供了多个供应商和内部脚本。脚本名称、句柄和描述详见下表。 WordPress 脚本 编辑器包含多个功能包以实现不同功能。插件开发者可利用它们创建区块、编辑器插件或通用插件。 Script Nam... 7 个月前
  19. 19 测试概览 Gutenberg 包含 PHP 和 JavaScript 代码,并鼓励对两者进行测试和代码风格检查。 为何需要测试? 除了测试将为你的生活带来乐趣之外,测试的重要性不仅在于它们有助于确保我们的应用程序按预期运行,... 7 个月前
  20. 20 过度使用快照 看看下面的代码。你能一眼看出这个测试试图做什么吗? await editor.insertBlock( { name: 'core/quote' } ); await page.keyboard.type( '1'... 7 个月前
  21. 21 基于 React Native 的移动版 Gutenberg 入门指南 欢迎!这是面向 Android 和 iOS 设备的区块编辑器原生移动移植版的入门指南。总体而言,它是一个用于新建或现有父级应用的 React Native 库。继续阅读以了解如何构建、测试和运行它。 前置要求 为了... 7 个月前
  22. 22 React Native 集成测试指南 什么是集成测试? 集成测试被定义为一种将不同部分作为整体进行测试的类型。在我们的场景中,需要测试的部分是特定区块或编辑器逻辑所需渲染的不同组件。最终,它们与单元测试非常相似,因为它们都使用 Jest 库通过相同的命... 7 个月前
  23. 23 React Native 国际化指南 编辑器的原生版本引用两种类型的字符串: 在网页和原生平台中使用的字符串。 仅用于原生平台的字符串。 对于第一种类型,这些字符串的翻译遵循本指南中为网页版本描述的相同流程;然而对于后者,需要您自行提供翻译。 Extr... 7 个月前
  24. 24 React Native 开发环境配置指南(macOS) 你是否对原生移动编辑器开发感兴趣?本指南将详细引导你完成环境配置,助你快速上手! 请注意,本指南主要针对 macOS 环境。若需在其他环境中配置,React Native 快速入门文档提供了实用的配置指引和步骤说明... 7 个月前
  25. 25 发布到 NPM 的软件包和 WordPress 核心更新 Gutenberg 仓库遵循 WordPress SVN 仓库的分支策略,适用于每个主要的 WordPress 版本。除此之外,它还包含另外两个控制 npm 发布流程的特殊分支: wp/latest 分支包含与使用... 7 个月前
  26. 26 Gutenberg 插件发布 快速参考 时间线 在里程碑日期(通常为周三)发布 RC1 版本 于下周三发布稳定版本 通用发布流程 步骤 1:准备工作 使用模板创建一个发布议题。此步骤可选,但有助于你按部就班地完成流程 审查里程碑中的所有 PR ... 7 个月前
  27. 27 区块即界面 Gutenberg 的核心在于区块概念。从技术角度看,区块既将抽象层级从单一文档提升至有意义元素的集合,又用明确结构取代了 HTML 固有的模糊性。 从用户视角看,区块允许以更统一、更易用的方式将任何类型的内容、媒... 7 个月前
  28. 28 文案撰写指南 长文本 适用于多行/多步骤说明,或页面/功能叙述性介绍与引导的撰写指南。 具体内容会因情境差异而有较大变化,但以下是一些通用建议: 一:善用缩略形式! 缩略形式更具对话感,是让文本听起来更友好、更随意的简单方法。(... 7 个月前
  29. 29 How to guide template Overview A how to guide walks through a series of steps focused on completing a single task. The guide's go... 7 个月前
  30. 30 历史 一系列链接和资源,涵盖古腾堡项目的历史、启动过程、灵感来源以及初步构想。 灵感来源 2017年初进行了一项社区编辑器体验调查,该调查强化了WordPress需要全新编辑体验的需求。 以下是对古腾堡项目及区块编辑器创... 7 个月前
  31. 31 自动化测试 为何选择 Playwright 作为端到端测试工具? 针对基于网页的端到端自动化测试,存在丰富的工具生态系统。Gutenberg 使用 Playwright 作为其端到端测试框架。该项目曾使用 Puppeteer,... 7 个月前
  32. 32 数据流与数据格式 格式说明 区块编辑器文章是文章在区块感知层面的规范表示形式:它是一系列语义一致的描述集合,用于说明每个区块是什么及其核心数据。这种表示形式仅存在于内存中。它如同排版车间的追版过程——随着铅字的嵌入和重新定位而持续变... 7 个月前
  33. 33 实体与撤销/重做 无论是文章编辑器还是站点编辑器,WordPress 编辑器操作的都是我们称为实体记录的对象。这些对象代表文章、页面、用户、分类项、模板等数据。它们存储在数据库中,并由编辑器进行操作。每个编辑器可以同时获取、编辑和保... 7 个月前
  34. 34 站点编辑模板 模板与模板部件流程 本文档将解释模板和模板部件在前端如何渲染、在后端如何编辑的内部机制。 存储机制 与常规模板类似,区块模板最初以文件形式存在于主题文件夹中,但主要区别在于用户可以通过站点编辑器的界面直接编辑这些模... 7 个月前
  35. 35 核心概念 区块 区块是用于构建和交互内容的抽象单元。当它们组合在一起时,就构成了网页的内容。从段落、视频到网站标题,所有内容都以区块的形式呈现。 区块形式多样,但提供一致的接口。它们可以被插入、移动、重新排序、复制、重复、转... 7 个月前
  36. 36 模块化 WordPress 区块编辑器基于这样的理念:你可以将独立的区块组合在一起来撰写文章或构建页面。区块之间也可以相互使用和交互。这使得它非常模块化和灵活。 但区块编辑器不仅在行为和输出上采用模块化。Gutenberg... 7 个月前
  37. 37 性能 性能是编辑器应用的关键特性,区块编辑器也不例外。 指标 为确保区块编辑器在版本迭代和开发过程中保持高性能,我们通过性能基准测试任务监控若干关键指标。 部分核心重要指标包括: 加载时间: 加载编辑器页面所需时长。包含... 7 个月前
  38. 38 编辑器中的样式 它为读者提供了相关参考指南和教程链接,以便深入理解每个概念。本文档主要面向区块开发者和区块编辑器项目工作者。 HTML 与 CSS 用户通过区块编辑器创建文章时,会生成多种产物:一份 HTML 文档以及若干 CSS... 7 个月前
  39. 39 动画 动画能够强化层级感和空间方位感。本文档将阐述添加动画时应遵循的原则。 基本原则 起始点 动画有助于锚定界面元素。例如,菜单可以从触发按钮的位置缩放展开。 动画有助于营造空间感;例如,侧边栏可以从侧面滑入,暗示其始终... 7 个月前
  40. 40 区块设计 以下是设计新区块的最佳实践,包含建议和现有区块的详细描述,以说明我们创建区块的方法。 最佳实践 区块的主要界面是其内容区域 由于区块本身代表网站上实际显示的内容,此处的交互最贴近直接操作原则,对用户而言也最为直观。... 7 个月前
  41. 41 资源 Figma WordPress 设计团队 使用 Figma 进行协作和分享工作。如果您想参与贡献,可以使用 WordPress Figma 设计库 来制作模型。您也可以加入 Slack 中的 #design 频道 ... 7 个月前
  42. 42 常见问题解答 以下整理了古腾堡开发近几年来遇到的一系列问题。如果您有任何希望得到解答并收录于此的问题,只需在 GitHub 上提交问题。我们很乐意解答那些可能未曾考虑过的问题,并提供清晰说明。如需回顾历史,请参阅 Matt 于 ... 7 个月前
  43. 43 术语表 属性来源 描述区块属性结构的对象。其键名可根据区块类型的状态进行最合适的命名。每个键对应的值是一个函数,用于描述从已保存文章内容中提取属性值的策略。处理时,系统会创建一个新对象,其结构遵循属性来源中定义的键名,每个... 7 个月前
  44. 44 快速入门指南 本指南旨在通过实践方法演示 WordPress 区块开发的基本原理。按照以下步骤,您将在几分钟内创建一个使用现代 JavaScript(ESNext 和 JSX)的自定义区块插件。该示例区块将显示版权符号(©)和当... 7 个月前
  45. 45 教程:构建你的第一个区块 在本教程中,你将构建一个"版权日期区块"——一个基础但实用的区块,用于显示版权符号(©)、当前年份以及可选的起始年份。这类内容通常用于网站页脚。 本教程将引导你完成完整流程,从使用 create-block 包搭... 7 个月前
  46. 46 开始使用 create-block WordPress 区块编辑器中的自定义区块通常通过插件注册,并由一组特定文件定义。 @wordpress/create-block 包是一个官方支持的工具,用于搭建创建和注册区块所需的文件结构。它能生成启动项目所... 7 个月前
  47. 47 开始使用 wp-env @wordpress/env 包( wp-env)让你能够为构建和测试插件及主题,设置一个本地 WordPress 环境(站点),无需任何额外配置。 在遵循本指南之前,如果你尚未安装 Node.js 开发工具,请先... 7 个月前
  48. 48 开始使用 wp-scripts @wordpress/scripts 包,通常被称为 wp-scripts,是一组配置文件和脚本,主要旨在标准化和简化需要 JavaScript 构建步骤的 WordPress 项目的开发流程。 JavaScri... 7 个月前
  49. 49 Node.js 开发环境 为区块编辑器进行开发时,你将需要 Node.js 开发工具,以及一个代码编辑器和本地 WordPress 环境(参见区块开发环境)。Node.js ( node) 是一个开源运行时环境,允许你从终端(也称为命令行界... 7 个月前
  50. 50 编辑器中的区块 区块编辑器是一个 React 单页应用程序(SPA)。编辑器中的每个区块都是通过一个 React 组件显示的,该组件定义在用于在客户端注册区块的设置对象的 edit 属性中。 区块的 Edit React 组件... 7 个月前
  51. 51 block.json block.json 文件通过使用相同的 JSON 格式块定义,在服务器端和客户端(区块编辑器)注册区块,从而简化了定义和注册区块的过程。 下图详细说明了 block.json 文件的基本结构。 要查看完整的区... 7 个月前
  52. 52 区块包装器 区块编辑器中的每个区块都包含在一个 HTML 包装器内,该包装器必须具备特定属性才能在编辑器和前端正常运行。作为开发者,我们可以直接操作此标记,WordPress 提供了诸如 useBlockProps() 等工... 7 个月前
  53. 53 区块的文件结构 为 WordPress 开发自定义区块时,最佳实践是在插件中注册它们,而非主题中。此策略确保即使用户切换主题,您的区块仍可访问。虽然在某些情况下将区块直接嵌入主题可能合适,但本指南重点介绍插件中的区块。具体而言,它... 7 个月前
  54. 54 为区块编辑器使用 JavaScript 为区块编辑器开发区块通常涉及使用现代 JavaScript(ESNext 和 JSX),区块编辑器手册中的大多数示例都采用这些语法编写。 然而,这种形式的 JavaScript 必须转换为浏览器兼容的格式,因此需要... 7 个月前
  55. 55 区块的标记表示 区块在数据库或 HTML 模板中使用一种独特的基于 HTML 的语法存储,通过作为清晰区块分隔符的 HTML 注释来区分。这确保了区块标记在技术上是有效的 HTML。 以下是定义区块标记的一些准则: 核心区块以 ... 7 个月前
  56. 56 区块注册 WordPress 中的区块通常以插件形式打包,并使用 block.json 元数据在服务器端和客户端进行注册。 虽然可以仅在客户端注册区块,但最佳实践强烈建议同时在服务器端和客户端进行注册。这种双重注册对于启用... 7 个月前
  57. 57 区块的静态或动态渲染 区块的前端标记可以在请求时由服务器端动态生成(动态区块),也可以在区块编辑器的保存过程中静态生成(静态区块)。本文将探讨这两种方法。 文章 静态区块与动态区块:有何区别? 对此主题提供了很好的介绍。 静态渲染 采用... 7 个月前
  58. 58 无障碍访问 为 Gutenberg 项目开发者提供的无障碍访问文档。 有关无障碍访问和 WordPress 的更多信息,请参阅 Make WordPress 无障碍访问手册 和 无障碍访问团队部分。 地标区域 最佳实践是将页面... 7 个月前
  59. 59 在编辑器中加载资源 本指南旨在成为在编辑器中加载资源(脚本和样式)的权威参考。此处概述的方法代表了推荐实践,但请注意,随着 WordPress 的发展,本资源也会不断更新。我们鼓励您持续关注更新。 自 WordPress 6.3 起,... 7 个月前
  60. 60 功能开关 "功能开关"是变量,允许您阻止 Gutenberg 项目中的特定代码发布到 WordPress 核心,并仅在插件中运行某些实验性功能。 介绍 globalThis.IS_GUTENBERG_PLUGIN glob... 7 个月前
  61. 61 格式工具栏 API 概述 格式 API 使开发者能够向格式工具栏添加自定义按钮,并让这些按钮对文本选区应用_格式_。加粗就是格式工具栏中标准按钮的一个例子。 在 WordPress 术语中,_格式_是一种具有文本级语义的 HTML 标... 7 个月前
  62. 62 国际化 什么是国际化? 国际化是为软件提供多语言支持的过程,在本文语境中特指 WordPress。国际化常被缩写为 i18n,其中 18 代表首字母 i 与末字母 n 之间的字符数。 为您的插件和主题提供 i18n 支持能... 7 个月前
  63. 63 元数据框 概述 在区块编辑器出现之前,自定义元数据框被用于扩展编辑器功能。如今已有新的扩展方式,为开发者提供更强大的能力,并为内容创作者带来更优体验。建议将旧版自定义元数据框迁移至这些新方法之一,从而为编辑器使用者创造更统一... 7 个月前
  64. 64 插件侧边栏 概述 如何为您的插件添加侧边栏。侧边栏是编辑器最右侧的区域。您的插件可以在 InspectorControls(齿轮图标)旁添加一个额外的图标,该图标可展开显示。 注意:本教程介绍自定义侧边栏,如需在侧边栏添加控件... 7 个月前
  65. 65 区块类型的更新传播 本资源旨在为需要在主题模板、模式或整个站点的区块中更新内容的人员提供指导。由于每种内容类型允许或禁止特定类型的同步,因此在创建前了解可能的情况对于简化未来的维护工作至关重要。 更新管理建议 尽早明确需要更新的内容 ... 7 个月前
  66. 66 Thunks in Core-Data Gutenberg 11.6 added support for thunks. You can think of thunks as functions that can be dispatched: // ac... 7 个月前
  67. 67 使用样式与样式表 概述 区块通常会将标记(HTML)插入到文章内容中,您可能希望以某种方式对其进行样式设计。本指南将介绍几种在区块编辑器中使用 CSS 的不同方法,以及如何处理样式和样式表。 开始之前 您需要一个基础区块和 Word... 7 个月前
  68. 68 创建动态区块 动态区块是在前端渲染时实时构建其结构和内容的区块。 动态区块主要有两种用途: 即使文章未更新,内容也应发生变化的区块。WordPress 自身的"最新文章"区块就是一个例子。当有新文章发布时,该区块在所有使用它的地... 7 个月前
  69. 69 扩展查询循环区块 查询循环区块是一个强大的工具,允许用户循环遍历指定的文章列表,并显示一组将继承列表中每篇文章上下文的区块。例如,可以将其设置为循环遍历特定类别的所有文章,并为每篇文章显示其特色图片。当然,功能远不止于此! 但正是因... 7 个月前
  70. 70 嵌套区块:使用 InnerBlocks 您可以使用 InnerBlocks 组件创建一个可以嵌套其他区块的单一区块。这在 Columns 区块、Social Links 区块或任何您希望包含其他区块的区块中使用。 注意:一个区块只能包含一个 Inner... 7 个月前
  71. 71 区块锁定 API 区块锁定 API 允许您在编辑器中限制对特定区块的操作。此 API 可用于防止用户移动、删除或编辑某些区块,从而确保布局一致性和内容完整性。 锁定移动或移除特定区块的能力 用户可通过编辑器锁定和解锁区块。锁定界面提... 7 个月前
  72. 72 禁用编辑器功能 本页面专门介绍在文章编辑器和站点编辑器中禁用特定功能的各种方法,这些内容未包含在管理文档的其他部分。 限制区块选项 有时您可能希望完全禁止用户访问某个区块。要控制插入器中可用的内容,您有两种方法:允许列表(禁用列表... 7 个月前
  73. 73 Filters and hooks The Editor provides numerous filters and hooks that allow you to modify the editing experience. Here are a ... 7 个月前
  74. 74 模式 区块模式是为用户提供独特且精心策划的编辑体验的最佳方式之一。 Prioritize starter patterns for any post type When a user creates new conten... 7 个月前
  75. 75 theme.json A theme's theme.json file is one of the best ways to curate the Editor experience and will likely be the fi... 7 个月前
  76. 76 安装 我们将以 WordPress 插件的形式构建应用程序,这意味着您需要先安装 WordPress 本身。一种方法是按照入门指南页面的说明进行操作。完成安装后,您可以继续学习本教程的其余部分。 此外,本教程将大量涉及 ... 7 个月前
  77. 77 构建页面列表 在这一部分,我们将构建一个可筛选的 WordPress 页面列表。这是本节结束时应用的外观: 让我们一步步了解如何实现。 步骤 1:构建 PagesList 组件 让我们从构建一个最小的 React 组件开始,用于... 7 个月前
  78. 78 构建编辑表单 这一部分是关于为我们的应用添加编辑功能。以下是我们将要构建内容的预览: 步骤 1:添加“编辑”按钮 没有“编辑”按钮就无法使用编辑表单,因此让我们从在 PagesList 组件中添加一个开始: import { ... 7 个月前
  79. 79 构建创建页面表单 在上一章节中我们创建了编辑页面功能,本章节我们将添加创建页面功能。以下是我们即将构建内容的预览: Step 1: Add a Create a new page button Let’s start by buil... 7 个月前
  80. 80 添加删除按钮 在上一章节中,我们实现了创建新页面的功能, 现在我们将为应用添加删除功能。 以下是我们即将实现的效果预览: Step 1: Add a Delete button Let's start by creating t... 7 个月前
  81. 81 构建自定义区块编辑器 WordPress 区块编辑器是一款强大的工具,允许您以多种方式创建和格式化内容。它部分由 @wordpress/block-editor 包驱动,这是一个提供编辑器核心功能的 JavaScript 库。 该包也... 7 个月前
  82. 82 全局设置与样式 (theme.json) WordPress 5.8 引入了一种新机制来配置编辑器,它实现了更精细的控制,并为未来 WordPress 版本管理样式迈出了第一步:即 theme.json 文件。 设计理念 区块编辑器 API 的发展速度不... 7 个月前
  83. 83 主题支持 新的区块在所有主题中都包含基线支持,提供可选的增强功能,并具备扩展和自定义的能力。 构建主题时需要考虑几个新概念: 编辑器调色板 - 提供一组默认颜色,但主题可以注册自己的颜色,并可选地限制用户只能从定义的调色板中... 7 个月前
  84. 84 关于传统小工具区块 传统小工具区块允许用户添加、编辑和预览由插件注册的第三方小工具,以及使用经典小工具编辑器添加的小工具。 可通过区块插入器添加传统小工具区块,并从区块下拉菜单中选择小工具来添加第三方小工具。 也可通过在区块插入器中搜... 7 个月前
  85. 85 恢复经典小工具编辑器 有多种方法可以禁用新的小工具区块编辑器。 使用 remove_theme_support 主题可以通过调用 remove_theme_support( 'widgets-block-editor' ) 来禁用小... 7 个月前
  86. 86 小工具区块编辑器概述 小工具区块编辑器 新的小工具编辑器是 WordPress 的一项功能,它升级了小工具区域,允许在小工具旁边使用区块。它提供了一个使用熟悉的 WordPress 区块编辑器构建的全新小工具管理体验。 您可以通过导航到... 7 个月前
  87. 87 核心区块参考 本页面列出了 block-library 包中包含的区块。 标有删除线( 删除线)的项目已被明确禁用。 标记为 Experimental: true 的区块仅在 Gutenberg 激活时可用。 标记为 Exper... 7 个月前
  88. 88 包参考文档 WordPress 提供了一系列用于 WordPress 开发的 JavaScript 包和工具。 关于在 Gutenberg 中创建和管理包的详细信息,请参阅 包 README。关于构建系统和包配置的详细信息,请... 7 个月前
  89. 89 RichText 参考 RichText 是一个允许开发者渲染 contenteditable 输入框的组件,为用户提供格式化块级内容的选项,例如加粗、斜体、添加链接或其他格式。 RichText 组件功能极其强大,因为它提供了其他组件... 7 个月前
  90. 90 注解 注意: 此 API 为实验性功能,这意味着它在未来任何版本中可能发生不向后兼容的变更或被移除。 注解是一种高亮区块编辑器所创建文章中特定片段的方式。例如对文本片段进行评论和拼写检查。两者都可以使用注解 API 来标... 7 个月前
  91. 91 Attributes Block attributes provide information about the data stored by a block. For example, rich content, a list of... 7 个月前
  92. 92 绑定 区块绑定 API 仅适用于 WordPress 6.5 及以上版本。 区块绑定 API 允许你将动态数据“绑定”到区块的属性上,这些数据随后会反映在最终输出到前端浏览器的 HTML 标记中。 例如,可以将图像区块的... 7 个月前
  93. 93 上下文 区块上下文是一项功能,它允许祖先区块提供值,供其自身层级结构内的后代区块使用。这些后代区块可以继承这些值,而无需依赖硬编码值,也无需明确知晓提供这些值的区块。 这在全站编辑中尤其有用,例如,区块的内容可能取决于显示... 7 个月前
  94. 94 弃用 本页提供了关于弃用 API 原则和使用的完整指南。入门教程请查看开发者博客上的区块弃用基础教程。 更新静态区块标记和属性时,区块作者需要考虑使用旧版本区块的现有文章。为了提供良好的升级路径,您可以选择以下策略之一:... 7 个月前
  95. 95 编辑与保存 在客户端使用 JavaScript 注册区块时, edit 和 save 函数定义了区块在编辑器中的渲染方式、操作逻辑以及保存机制。 编辑 edit 函数描述了你的区块在编辑器环境中的结构。这代表了当区块被使用时... 7 个月前
  96. 96 Metadata in block.json Starting with the WordPress 5.8 release, we recommend using the block.json metadata file as the canonical ... 7 个月前
  97. 97 模式 区块模式是从区块插入器的模式选项卡中可用的预定义区块布局。一旦插入到内容中,这些区块即可用于添加或修改内容及配置。 区块模式 register_block_pattern 编辑器内置了若干核心区块模式。主题和插件开... 7 个月前
  98. 98 注册 区块注册 API 参考。 您可以使用本页记录的函数仅在客户端通过 JavaScript 注册区块,但推荐的方法是同时使用服务器端的 PHP 和 `block.json` 元数据文件来注册新的区块类型。请参阅元数据文... 7 个月前
  99. 99 选择器 区块选择器是允许区块在生成样式时自定义所用 CSS 选择器的 API。 区块可在三个层级自定义其 CSS 选择器:根层级、功能层级和子功能层级。 根选择器 根选择器是区块的主要 CSS 选择器。 所有区块都需要一个... 7 个月前
  100. 100 样式 块样式允许为现有块应用替代样式。它们通过向块的包装器添加一个 className 来工作。如果选择了块样式,这个 className 可以用来为块提供替代样式。有关如何将样式应用于块的完整示例,请参阅使用样式和样式... 7 个月前
  101. 101 区块支持 区块支持是一个 API,允许区块声明对特定功能的支持。 选择启用这些功能中的任何一项,都会在区块上注册额外的属性,并提供操作该属性的用户界面。 为了使属性应用到区块上,生成的属性会被添加到区块的包装元素中。它们会被... 7 个月前
  102. 102 模板 区块模板被定义为一组区块项目的列表。这些区块可以包含预定义的属性、占位符内容,并且可以是静态或动态的。区块模板允许为编辑器会话指定默认的初始状态。 模板的适用范围包括: 在客户端动态设置默认状态(例如 defau... 7 个月前
  103. 103 转换 区块转换 API 允许区块与其他区块之间进行相互转换,也能从其他实体转换而来。支持此 API 的现有实体包括短代码、文件、正则表达式和原始 DOM 节点。 Transform direction: to and ... 7 个月前
  104. 104 Variations The Block Variations API allows you to define multiple versions (variations) of a block. A block variation ... 7 个月前
  105. 105 迁移区块以实现 iframe 编辑器兼容性 概述 iframe 集成是现代化编辑体验持续努力的一部分。在模板编辑器原始 iframe 迁移的基础上,WordPress 正朝着在 iframe 内运行文章编辑器的方向发展。 本指南鼓励迁移区块至 API 版本 ... 7 个月前
  106. 106 注释 命名空间: core/annotations。 此软件包仍处于实验阶段。“实验性”意味着这是早期实现,可能会发生剧烈且破坏性的变更。 选择器 暂无文档内容。 操作 暂无文档内容。 7 个月前
  107. 107 区块目录 命名空间: core/block-directory。 选择器 getDownloadableBlocks 返回可用的未安装区块。 参数 state Object: 全局应用状态。 filterValue st... 7 个月前
  108. 108 区块编辑器的数据 命名空间: core/block-editor。 选择器 areInnerBlocksControlled 检查给定区块是否具有受控内部区块。 参数 state Object: 全局应用状态。 clientId ... 7 个月前
  109. 109 区块类型数据 命名空间: core/blocks。 选择器 getActiveBlockVariation Returns the active block variation for a given block based o... 7 个月前
  110. 110 命令数据 命名空间: core/commands。 选择器 getCommandLoaders 返回已注册的命令加载器。 参数 state Object: 状态树。 contextual boolean: 是否仅返回上下... 7 个月前
  111. 111 Customize Widgets Namespace: core/customize-widgets. Selectors isInserterOpened Returns true if the inserter is opened. Usag... 7 个月前
  112. 112 编辑器界面数据 命名空间: core/edit-post。 选择器 areMetaBoxesInitialized 返回元框是否已初始化。 参数 state Object: 全局应用状态。 返回值 boolean: 元框是否已初... 7 个月前
  113. 113 编辑站点 命名空间: core/edit-site。 选择器 getCanUserCreateMedia 返回当前用户是否可以创建媒体。 参数 state Object: 全局应用程序状态。 返回 Object: 当前用户... 7 个月前
  114. 114 编辑小工具 命名空间: core/edit-widgets。 选择器 canInsertBlockInWidgetArea 如果可以将区块插入到小部件区域,则返回 true。 参数 state Array: 小部件区域的打开... 7 个月前
  115. 115 文章编辑器的数据 命名空间: core/editor。 选择器 canInsertBlockType 相关 core/block-editor 存储中的 canInsertBlockType。 canUserUseUnfiltere... 7 个月前
  116. 116 键盘快捷键数据 命名空间: core/keyboard-shortcuts。 选择器 getAllShortcutKeyCombinations Returns the shortcuts that include aliases... 7 个月前
  117. 117 通知数据 命名空间: core/notices。 选择器 getNotices 返回所有通知的数组,可选择针对给定的上下文。默认为全局上下文。 用法 import { useSelect } from '@wordpress... 7 个月前
  118. 118 NUX(新用户体验)数据 命名空间: core/nux 选择器 areTipsEnabled 返回提示是否全局启用。 参数 state Object: 全局应用状态。 返回值 boolean: 提示是否全局启用。 getAssociate... 7 个月前
  119. 119 偏好设置 命名空间: core/preferences。 选择器 get 返回一个布尔值,指示特定作用域中的偏好是否处于活动状态。 参数 state StoreState: 存储状态。 scope string: 功能的... 7 个月前
  120. 120 可复用区块 命名空间: core/reusable-blocks。 此软件包仍处于实验阶段。“实验性”意味着这是早期实现,可能会发生剧烈且破坏性的更改。 ## 选择器 暂无内容需要记录。 操作 暂无内容需要记录。 7 个月前
  121. 121 富文本 命名空间: core/rich-text。 选择器 getFormatType 根据名称返回格式类型。 用法 import { __, sprintf } from '@wordpress/i18n'; impor... 7 个月前
  122. 122 视口数据 命名空间: core/viewport。 选择器 isViewportMatch 如果视口匹配给定的查询则返回 true,否则返回 false。 用法 import { store as viewportStore... 7 个月前
  123. 123 WordPress 核心数据 命名空间: core。 动态生成的选择器 存在一系列用户友好的选择器,它们是对更通用的 getEntityRecord 和 getEntityRecords 的封装,可用于检索各种实体的信息。 getPostT... 7 个月前
  124. 124 自动补全 editor.Autocomplete.completers 过滤器用于扩展和覆盖块所使用的自动补全器列表。 @wordpress/block-editor 中的 Autocomplete 组件会应用此过滤器。 ... 7 个月前
  125. 125 区块过滤器 WordPress 提供了多个 API,允许您修改现有区块的行为。 注册 WordPress 中的区块通常使用 block.json 元数据在服务器端和客户端进行注册。您可以使用以下过滤器在服务器端(通过 PHP... 7 个月前
  126. 126 编辑器钩子 WordPress 提供了多个 API,允许您修改编辑器体验。 编辑器设置 修改编辑器最常见的方式之一是通过 block_editor_settings_all PHP 过滤器,该过滤器在设置发送到初始化的编辑器... 7 个月前
  127. 127 Global Styles Filters WordPress 6.1 has introduced some server-side filters to hook into the theme.json data provided at the dif... 7 个月前
  128. 128 i18n 过滤器 i18n 函数( __()、 _x()、 _n() 和 _nx())为代码中的字符串提供翻译。如果需要覆盖这些函数返回的值,可以使用以下过滤器进行过滤: i18n.gettext i18n.gettext_wit... 7 个月前
  129. 129 Parser Filters When the editor is interacting with blocks, these are stored in memory as data structures comprising a few ... 7 个月前
  130. 130 指令与状态存储 交互性 API 仅适用于 WordPress 6.5 及以上版本。 开发者可通过以下方式为区块添加交互功能: 指令: 添加到标记中,为区块的 DOM 元素添加特定行为 状态存储: 包含行为所需的逻辑与数据(状态、操... 7 个月前
  131. 131 关于交互性 API 交互性 API 是一套基于声明式代码的指令标准系统,用于为区块添加前端交互功能。 指令通过特殊属性扩展 HTML,告知交互性 API 将指定行为附加到 DOM 元素甚至对其进行转换。对于熟悉 Alpine.js 的... 7 个月前
  132. 132 常见问题解答 Interactivity API 底层如何运作? 它的三个主要组件是: Preact 结合 Preact Signals 用于水合、客户端逻辑和客户端导航。 客户端和服务器都能理解的 HTML 指令。 服务器端逻... 7 个月前
  133. 133 快速入门指南 本指南将帮助您构建一个基础区块,展示 WordPress 中的交互性 API。 搭建交互式区块 首先确保您的计算机已安装 Node.js 和 npm。如果尚未安装,请查阅 Node.js 开发环境指南。 接下来,... 7 个月前
  134. 134 客户端导航 客户端导航是一种无需完全重新加载页面即可在不同页面间跳转的技术。它并非由浏览器从服务器获取全新的 HTML 文档,而是获取新页面的内容,并仅更新 DOM 中发生变化的部分。这使得页面切换更快速、更流畅,带来类似应用... 7 个月前
  135. 135 服务器端渲染:在服务器上处理指令 WordPress 始终建立在服务器端渲染的基础之上。传统上,当用户请求一个 WordPress 页面时,服务器会处理 PHP 代码、查询数据库,并生成发送给浏览器的 HTML 标记。 近年来,像 Vue、Reac... 7 个月前
  136. 136 响应式与声明式思维模式 Interactivity API 是一个响应式与声明式框架,类似于 React、Vue、Svelte 或 Alpine 等其他现代框架。在使用 Interactivity API 时,采用正确的思维模式对于充分发... 7 个月前
  137. 137 理解全局状态、局部上下文、派生状态与配置 Interactivity API 为创建交互式区块提供了强大的框架。为了充分利用其功能,理解何时使用全局状态、局部上下文、派生状态或配置至关重要。本指南将阐明这些概念,并提供实用示例来帮助您决定何时使用每种方式。... 7 个月前
  138. 138 使用 TypeScript Interactivity API 为 TypeScript 提供了强大的支持,使开发者能够构建类型安全的存储,通过静态类型检查、改进的代码补全和简化的重构来提升开发体验。本指南将引导您了解在 Interactiv... 7 个月前
  139. 139 MainDashboardButton 此插槽允许替换文章编辑器中的默认主仪表盘按钮。自 WordPress 6.2 起,站点编辑器中不再提供此功能。 它用于在全屏编辑模式下返回主 wp-admin 仪表盘。 请注意,此 SlotFill 仍被视为实验... 7 个月前
  140. 140 PluginBlockSettingsMenuItem 此插槽允许在“更多选项”区域添加新项目。 根据用户设置,该项目将显示在每个区块的控件中或顶部工具栏中。 示例 import { registerPlugin } from '@wordpress/plugins';... 7 个月前
  141. 141 PluginDocumentSettingPanel This SlotFill allows registering a UI to edit Document settings. Available Props name string: A string ide... 7 个月前
  142. 142 PluginMoreMenuItem 此插槽将在"更多工具与选项"区域添加一个新项目。 示例 import { registerPlugin } from '@wordpress/plugins'; import { PluginMoreMenuIte... 7 个月前
  143. 143 PluginPostPublishPanel 此插槽允许在文章发布后出现的发布后面板底部注入项目。 示例 import { registerPlugin } from '@wordpress/plugins'; import { PluginPostPubli... 7 个月前
  144. 144 PluginPostStatusInfo 此插槽允许在文档侧边栏的摘要面板中插入项目。 示例 import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInf... 7 个月前
  145. 145 PluginPrePublishPanel 此插槽允许在预发布面板底部注入项目,该面板在用户点击"发布"后出现以确认发布。 示例 import { registerPlugin } from '@wordpress/plugins'; import { Pl... 7 个月前
  146. 146 PluginSidebarMoreMenuItem 此插槽用于允许从选项下拉菜单中打开 <PluginSidebar /> 面板。 当注册 <PluginSidebar /> 时,系统会自动使用 <PluginSidebar /> 的 title 属性注册一个... 7 个月前
  147. 147 PluginSidebar 此插槽允许向文章编辑器或站点编辑器屏幕的工具栏添加项目。 使用此插槽将在工具栏中添加一个图标,点击该图标会打开一个面板,其中包含包裹在 <PluginSidebar /> 组件中的项目。 此外,它还会创建一个 ... 7 个月前
  148. 148 Available Styles Options New styles options are integrated into theme.json on a regular basis. Knowing the style options available t... 7 个月前
  149. 149 Theme.json 版本 3 参考(最新版) 这是 theme.json 版本 3 的现行规范。此版本适用于 WordPress 6.6 或更高版本,以及最新的 Gutenberg 插件。 您可能还对以下相关文档感兴趣: theme.json v1 规范, ... 7 个月前
  150. 150 迁移 Theme.json 至新版本 本指南记录了不同 theme.json 版本间的变更及升级方法。旧版本将继续获得支持,但建议进行升级,因为新功能开发将集中于新版本。 从 v1 迁移到 v2 升级到 v2 版本可启用一些新功能,并调整部分旧功能的... 7 个月前
  151. 151 Theme.json 版本 1 参考 这是 theme.json 版本 1 的规范。此版本适用于 WordPress 5.8 或更高版本。 Theme.json 版本 2 已随 WordPress 5.9 发布。WordPress 将继续支持 the... 7 个月前
  152. 152 Theme.json 版本 2 参考文档 这是 theme.json 版本 2 的规范说明。此版本适用于 WordPress 5.9 或更高版本。 Theme.json 版本 3 已随 WordPress 6.6 发布。WordPress 将继续支持 t... 7 个月前