WordPress Customizer 模块中的小工具区块。
本包仅适用于 WordPress 核心。您可以自由地在自己的项目中使用它,但请记住,它可能永远不会得到完整的文档说明。
安装
安装该模块
npm install @wordpress/customize-widgets
本包假定您的代码将在ES2015+环境中运行。如果您使用的环境对这些语言特性和 API 支持有限或完全不支持,则应在代码中包含@wordpress/babel-preset-default随附的 polyfill。
技术实现细节
新的 Widgets Customizer 使用基于区块的编辑器替换了 Appearance > Customize > Widgets。原始的 Customizer 是一个 Backbone 应用,而新的编辑器是一个 React 应用。面临的挑战之一是将它们集成在一起,同时确保双方的功能仍然有效。
我们在 /controls 目录中扩展了 Customizer 的部分(sections)和控制项(controls),并为编辑器注入了一些自定义逻辑。我们使用 React portal 将每个编辑器渲染到其对应的部分中,以重用 Customizer 提供的大多数样式和脚本。
components/sidebar-block-editor 是每个小工具区域区块编辑器的入口点。component/sidebar-block-editor/sidebar-adapter.js 是一个适配器,用于与 Customize API 通信,并将小工具对象转换为小工具实例。
components/sidebar-block-editor/use-sidebar-block-editor.js 是一个自定义 React Hook,用于将适配器集成到 React 中,并处理区块与小工具之间的大部分转换。这使得我们能够以前向后兼容的方式实现基本的编辑功能以及实时预览。
每当区块发生变化时,我们会遍历每个区块以确定是否有创建、编辑或删除的区块。然后我们将它们转换为其对应的小工具,并调用 Customize API 进行更新。
对于 React 开发人员来说,这可以被视为 Customizer 的自定义协调器或自定义渲染器。但不同于以 DOM 作为渲染目标,我们以 WordPress 小工具为目标,通过 Customize API 进行渲染。
这并不是区块编辑器预期的典型使用方式。因此,我们还必须实现一些缺失的功能,如撤销/重做和自定义焦点控制。我们的目标仍然是让区块编辑器尽可能容易地集成到不同的系统中,因此 Widgets Customizer 中的集成可以为我们提供一个良好的体验,以反映当前 API 中的一些缺点,并可能在将来改进它们。
为此包做出贡献
这是 Gutenberg 项目的一部分,是一个独立的包。该项目组织为 monorepo。它由多个自包含的软件包组成,每个包都有特定的用途。此 monorepo 中的包发布到 npm,并被 WordPress 以及其他软件项目使用。
要了解有关为此包或整个 Gutenberg 做出贡献的更多信息,请阅读项目的主要 贡献者指南。