深入解析 Gutenberg 的 withGlobalEvents 高阶组件统一 window 全局事件监听的生命周期管理【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读withGlobalEvents是 WordPress Gutenberg 项目中wordpress/compose包提供的一个高阶组件Higher-Order ComponentHOC它用于替代手写window.addEventListener的方式让 React 类组件能够以声明式的风格响应resize、scroll、keydown等全局 DOM 事件。本文将以其官方文档packages/compose/src/higher-order/with-global-events/README.md为骨架结合仓库中的真实源码index.jsx与单元测试test/index.jsdom.test.jsx、test/listener.jsdom.test.js完整讲解其使用方式、底层全局单监听器架构、生命周期管理原理以及为何它已在 5.7 版本被标记为废弃Deprecated以及迁移到 Hooks 的替代方案。一、什么是 withGlobalEvents一个标记为 Deprecated 的全局事件 HOCwithGlobalEvents是一个用于辅助响应全局事件的高阶组件其核心定位是替代开发者直接调用window.addEventListener的繁琐流程。官方文档README.md明确指出它代表使用方开发者接管了两项关键职责组件卸载时自动解绑Unbinding when the component unmounts开发者不再需要手动在componentWillUnmount中调用removeEventListener避免内存泄漏整个应用对同一事件类型至多绑定一个事件处理器Binding at most a single event handler for the entire application无论多少个组件实例同时监听resizewindow上只存在一个真实的addEventListener注册所有实例共享这一个监听由内部调度器统一分发。重要提示该组件已在文档和源码中明确标注Deprecated废弃。在 index.jsx 中它通过wordpress/deprecated包在调用时输出弃用警告deprecated( wp.compose.withGlobalEvents, { since: 5.7, alternative: useEffect, } );即自 WordPress 5.7 起官方推荐使用useEffectHook 取代它。本文仍保留对该组件的完整讲解因为它依然是理解全局事件 HOC 共享监听器这一经典模式的绝佳教材存量代码中仍有大量基于类组件的用法需要维护与阅读其底层Listener单例调度机制的设计思想对今日编写自定义事件总线、监听器合并等场景仍具参考价值。二、基本用法用事件类型到方法名的映射声明式订阅2.1 用法约定根据官方文档withGlobalEvents的使用方式是传入一个对象对象的键key对应 DOM 事件类型值value是原始组件实例上处理该事件的方法名字符串。组件挂载后对应事件类型一旦在window上触发就会调用该实例上的方法并把原生事件对象作为参数传入。2.2 官方代码示例以下是文档中的原始示例README.mdimport { withGlobalEvents } from wordpress/components; class ResizingComponent extends Component { handleResize() { // ... } render() { // ... } } export default withGlobalEvents( { resize: handleResize, } )( ResizingComponent );2.3 两个值得注意的细节细节一导入路径。文档示例中导入自wordpress/components但从当前仓库源码看该组件的真实实现位于wordpress/compose包并在 packages/compose/src/index.js 中统一对外导出export { default as withGlobalEvents } from ./higher-order/with-global-events;wordpress/components内部再转发 re-export 了 compose 的全部内容因此两种导入写法在实际项目中均可工作若你的项目直接依赖wordpress/compose推荐从 compose 导入以获得更精确的依赖关系。细节二事件类型参数的类型签名。从源码 JSDoc 可以看到eventTypesToHandlers的完整类型为Recordkeyof GlobalEventHandlersEventMap, stringindex.jsx。这意味着键必须是浏览器GlobalEventHandlersEventMap中定义的事件类型如resize、scroll、keydown、keyup、mousedown、focus、blur等值必须是被包装组件实例上真实存在的方法名字符串。2.4 事件分发与调用链当全局事件发生时HOC 内部会按如下链路完成分发结合 index.jsx 的实现handleEvent( event ) { const handler eventTypesToHandlers[ event.type ]; if ( typeof this.wrappedRef[ handler ] function ) { this.wrappedRef handler ; } }即根据事件对象的event.type去映射表eventTypesToHandlers中查找到方法名再通过wrappedRef指向被包装组件实例的引用调用该方法并把原生事件对象event作为唯一参数传入。typeof ... function的防御性检查确保即使配置的方法名不存在或已被替换为非函数也不会抛错。wrappedRef的建立依赖渲染阶段的ref透传index.jsxhandleRef( el ) { this.wrappedRef el; // Any component using withGlobalEvents that is not setting a ref // will cause this.props.forwardedRef to be null, so we need this // check. if ( this.props.forwardedRef ) { this.props.forwardedRef( el ); } }HOC 通过forwardRef将外部传入的ref透传给内部的WrapperWrapper再把它转发给被包装组件从而在拿到实例的同时不破坏外部的 ref 语义。三、底层原理Listener 单例与全应用单事件监听架构withGlobalEvents最核心的设计是在window上为每一种事件类型只注册一个真实监听器所有使用该 HOC 的组件实例共享它。这一职责由独立的Listener类完成实现在 packages/compose/src/higher-order/with-global-events/listener.js 中。3.1 模块级单例在 index.jsx 中模块加载时即创建唯一实例const listener new Listener();所有经过withGlobalEvents包装的组件实例共享这同一个listener因此全应用单监听得以成立。3.2 Listener 的三个核心方法add( eventType, instance )—— 注册一个监听实例add( eventType, instance ) { if ( ! this.listeners[ eventType ] ) { // Adding first listener for this type, so bind event. window.addEventListener( eventType, this.handleEvent ); this.listeners[ eventType ] []; } this.listeners[ eventType ].push( instance ); }逻辑要点只有当某种事件类型的第一个监听者注册时才真正调用window.addEventListener后续再注册同类型监听者只把实例压入内部数组this.listeners[ eventType ]不会重复向window绑定。remove( eventType, instance )—— 注销一个监听实例remove( eventType, instance ) { if ( ! this.listeners[ eventType ] ) { return; } this.listeners[ eventType ] this.listeners[ eventType ].filter( ( listener ) listener ! instance ); if ( ! this.listeners[ eventType ].length ) { // Removing last listener for this type, so unbind event. window.removeEventListener( eventType, this.handleEvent ); delete this.listeners[ eventType ]; } }逻辑要点从数组中剔除指定实例只有当该事件类型最后一个监听者移除后才真正调用window.removeEventListener并清理数组实现最后一个监听者负责解绑的引用计数式管理。handleEvent( event )—— 统一的全局分发入口handleEvent( event ) { this.listeners[ event.type ]?.forEach( ( instance ) { instance.handleEvent( event ); } ); }window上绑定的是这同一个方法引用事件触发时按event.type找到所有注册实例逐个调用其handleEvent即 HOC 包装类上的handleEvent最终落到组件实例的具体方法上。3.3 生命周期绑定与解绑HOC 内部的Wrapper类在 React 生命周期中完成注册与注销index.jsxcomponentDidMount() { Object.keys( eventTypesToHandlers ).forEach( ( eventType ) { listener.add( eventType, this ); } ); } componentWillUnmount() { Object.keys( eventTypesToHandlers ).forEach( ( eventType ) { listener.remove( eventType, this ); } ); }挂载componentDidMount遍历配置对象的所有事件类型逐个向listener注册卸载componentWillUnmount遍历同一份配置逐个注销。这与文档声明的Unbinding when the component unmounts完全对应——开发者无需也不应再手动做任何addEventListener/removeEventListener配对生命周期泄漏风险由 HOC 一次性解决。3.4 为什么全应用单监听有价值从工程角度看这种注册中心 共享监听模式的价值在于减少全局监听器数量N 个组件监听resizewindow上只有 1 个监听器降低浏览器事件分发压力集中生命周期管理实例增删与监听器绑定解绑完全解耦天然避免重复绑定与漏解绑统一分发入口后续若要增加日志、节流等横切逻辑只需修改Listener.handleEvent一处。需要说明的是从源码结构看Listener.handleEvent并未内置节流throttle/防抖debounce处理真实事件仍以原始频率分发若需限频应在组件方法内自行处理wordpress/compose本身也提供了独立的throttle、debounce工具。四、源码级验证单元测试如何背书这些行为仓库为withGlobalEvents与Listener各编写了独立的 jsdom 单元测试可视为对该组件行为的权威契约。4.1 组件级测试test/index.jsdom.test.jsx测试通过vi.mock对../listener模块进行子类化打桩从而能 spy 到单例的add/remove/handleEvent。三个关键用例renders with original component包装后的组件正常渲染子节点同时断言控制台输出了废弃警告expect( console ).toHaveWarned()——印证deprecated告警确实会触发binds events from passed object渲染后断言Listener._instance.add被以(resize, 任意实例对象)调用——印证componentDidMount的注册行为handles events构造{ type: resize }事件并调用Listener._instance.handleEvent( event )断言被包装组件原型上的handleResize以及透传的onResize回调均被以该事件调用——完整验证全局事件 → Listener 分发 → 组件实例方法的调用链。4.2 监听器级测试test/listener.jsdom.test.js该文件在beforeAll中用vi.fn()替换global.window.addEventListener与removeEventListener从而精确统计真实绑定次数add只在首个监听者时绑定连续两次add(resize, ...)window.addEventListener仅被调用 1 次remove只在最后一个监听者时解绑两个实例一先一后移除第一个时window.removeEventListener未被调用移除最后一个时才被调用handleEvent分发单个实例收到事件、同一实例重复注册 3 次会收到 3 次调用说明它是按实例数组逐一分发不做去重。这些用例从测试层面精确锁定了Binding at most a single event handler for the entire application这一核心承诺。五、废弃原因与现代替代方案从 HOC 到 Hooks5.1 为何被废弃自 React 16.8 引入 Hooks 后类组件时代的 HOC 模式逐步让位于更直接的函数组件能力。withGlobalEvents的诸多职责——生命周期内绑定/解绑、实例方法查找、ref 透传——在 Hooks 范式下都能以更直观、类型更安全的方式实现因此官方在 5.7 版本将其废弃并指定useEffect为替代方案。5.2 使用 useEffect 的等价实现官方推荐的替代写法对应原组件语义大致如下import { useEffect, useRef } from wordpress/element; function ResizingComponent() { const handleResize () { // ... }; useEffect( () { window.addEventListener( resize, handleResize ); return () { window.removeEventListener( resize, handleResize ); }; }, [] ); // render ... }要点对照useEffect的清理函数cleanup即等价于 HOC 自动执行的卸载时解绑[]依赖数组保证只绑定一次若需响应多个全局事件在同一个 effect 中集中绑定、在清理函数中集中解绑即可。值得注意的是useEffect方案是每个组件各自绑定一个真实监听器并不具备withGlobalEvents的全应用单监听合并能力。这在实际项目中通常可接受——浏览器对事件监听的承载能力足够且收益是代码更直白、类型推导更友好。若你确实需要保留全局单监听的合并效果可以参考上文Listener类的注册中心设计自行封装一个useSharedGlobalEventsHook 或事件总线。5.3 存量代码的处理建议对于仍在使用withGlobalEvents的存量代码迁移时按配置对象 → 逐一替换为 effect的思路渐进改造不必一次性重构在迁移完成前可暂以// eslint-disable-next-line或构建日志过滤的方式忽略弃用警告但应制定明确的清理计划注意withGlobalEvents的导入位置从 packages/compose/src/index.js 可见它属于 compose 包公开 API 的一部分依赖wordpress/compose即可直接使用。六、总结withGlobalEvents是 Gutenberg 早期类组件时代解决全局事件订阅问题的代表性方案其核心价值可归纳为三条声明式配置{ resize: handleResize }一行映射即可订阅全局事件方法名自动解析、事件对象自动透传生命周期托管挂载注册、卸载注销完全由 HOC 接管杜绝手动配对addEventListener/removeEventListener引发的泄漏单例监听架构Listener注册中心保证每种事件类型在window上只有一个真实监听器多个组件实例共享分发实现见 listener.js行为契约见两组 测试。尽管官方已自 5.7 起将其废弃并推荐useEffect但其注册中心 共享监听 引用计数解绑的设计仍然是理解现代事件监听合并、自定义事件系统的最佳参考教材之一。对于维护存量 Gutenberg 插件或学习其组件设计哲学的开发者而言读懂withGlobalEvents依然是一笔值得的投资。【免费下载链接】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 的 withGlobalEvents 高阶组件：统一 window 全局事件监听的生命周期管理
深入解析 Gutenberg 的 withGlobalEvents 高阶组件统一 window 全局事件监听的生命周期管理【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读withGlobalEvents是 WordPress Gutenberg 项目中wordpress/compose包提供的一个高阶组件Higher-Order ComponentHOC它用于替代手写window.addEventListener的方式让 React 类组件能够以声明式的风格响应resize、scroll、keydown等全局 DOM 事件。本文将以其官方文档packages/compose/src/higher-order/with-global-events/README.md为骨架结合仓库中的真实源码index.jsx与单元测试test/index.jsdom.test.jsx、test/listener.jsdom.test.js完整讲解其使用方式、底层全局单监听器架构、生命周期管理原理以及为何它已在 5.7 版本被标记为废弃Deprecated以及迁移到 Hooks 的替代方案。一、什么是 withGlobalEvents一个标记为 Deprecated 的全局事件 HOCwithGlobalEvents是一个用于辅助响应全局事件的高阶组件其核心定位是替代开发者直接调用window.addEventListener的繁琐流程。官方文档README.md明确指出它代表使用方开发者接管了两项关键职责组件卸载时自动解绑Unbinding when the component unmounts开发者不再需要手动在componentWillUnmount中调用removeEventListener避免内存泄漏整个应用对同一事件类型至多绑定一个事件处理器Binding at most a single event handler for the entire application无论多少个组件实例同时监听resizewindow上只存在一个真实的addEventListener注册所有实例共享这一个监听由内部调度器统一分发。重要提示该组件已在文档和源码中明确标注Deprecated废弃。在 index.jsx 中它通过wordpress/deprecated包在调用时输出弃用警告deprecated( wp.compose.withGlobalEvents, { since: 5.7, alternative: useEffect, } );即自 WordPress 5.7 起官方推荐使用useEffectHook 取代它。本文仍保留对该组件的完整讲解因为它依然是理解全局事件 HOC 共享监听器这一经典模式的绝佳教材存量代码中仍有大量基于类组件的用法需要维护与阅读其底层Listener单例调度机制的设计思想对今日编写自定义事件总线、监听器合并等场景仍具参考价值。二、基本用法用事件类型到方法名的映射声明式订阅2.1 用法约定根据官方文档withGlobalEvents的使用方式是传入一个对象对象的键key对应 DOM 事件类型值value是原始组件实例上处理该事件的方法名字符串。组件挂载后对应事件类型一旦在window上触发就会调用该实例上的方法并把原生事件对象作为参数传入。2.2 官方代码示例以下是文档中的原始示例README.mdimport { withGlobalEvents } from wordpress/components; class ResizingComponent extends Component { handleResize() { // ... } render() { // ... } } export default withGlobalEvents( { resize: handleResize, } )( ResizingComponent );2.3 两个值得注意的细节细节一导入路径。文档示例中导入自wordpress/components但从当前仓库源码看该组件的真实实现位于wordpress/compose包并在 packages/compose/src/index.js 中统一对外导出export { default as withGlobalEvents } from ./higher-order/with-global-events;wordpress/components内部再转发 re-export 了 compose 的全部内容因此两种导入写法在实际项目中均可工作若你的项目直接依赖wordpress/compose推荐从 compose 导入以获得更精确的依赖关系。细节二事件类型参数的类型签名。从源码 JSDoc 可以看到eventTypesToHandlers的完整类型为Recordkeyof GlobalEventHandlersEventMap, stringindex.jsx。这意味着键必须是浏览器GlobalEventHandlersEventMap中定义的事件类型如resize、scroll、keydown、keyup、mousedown、focus、blur等值必须是被包装组件实例上真实存在的方法名字符串。2.4 事件分发与调用链当全局事件发生时HOC 内部会按如下链路完成分发结合 index.jsx 的实现handleEvent( event ) { const handler eventTypesToHandlers[ event.type ]; if ( typeof this.wrappedRef[ handler ] function ) { this.wrappedRef handler ; } }即根据事件对象的event.type去映射表eventTypesToHandlers中查找到方法名再通过wrappedRef指向被包装组件实例的引用调用该方法并把原生事件对象event作为唯一参数传入。typeof ... function的防御性检查确保即使配置的方法名不存在或已被替换为非函数也不会抛错。wrappedRef的建立依赖渲染阶段的ref透传index.jsxhandleRef( el ) { this.wrappedRef el; // Any component using withGlobalEvents that is not setting a ref // will cause this.props.forwardedRef to be null, so we need this // check. if ( this.props.forwardedRef ) { this.props.forwardedRef( el ); } }HOC 通过forwardRef将外部传入的ref透传给内部的WrapperWrapper再把它转发给被包装组件从而在拿到实例的同时不破坏外部的 ref 语义。三、底层原理Listener 单例与全应用单事件监听架构withGlobalEvents最核心的设计是在window上为每一种事件类型只注册一个真实监听器所有使用该 HOC 的组件实例共享它。这一职责由独立的Listener类完成实现在 packages/compose/src/higher-order/with-global-events/listener.js 中。3.1 模块级单例在 index.jsx 中模块加载时即创建唯一实例const listener new Listener();所有经过withGlobalEvents包装的组件实例共享这同一个listener因此全应用单监听得以成立。3.2 Listener 的三个核心方法add( eventType, instance )—— 注册一个监听实例add( eventType, instance ) { if ( ! this.listeners[ eventType ] ) { // Adding first listener for this type, so bind event. window.addEventListener( eventType, this.handleEvent ); this.listeners[ eventType ] []; } this.listeners[ eventType ].push( instance ); }逻辑要点只有当某种事件类型的第一个监听者注册时才真正调用window.addEventListener后续再注册同类型监听者只把实例压入内部数组this.listeners[ eventType ]不会重复向window绑定。remove( eventType, instance )—— 注销一个监听实例remove( eventType, instance ) { if ( ! this.listeners[ eventType ] ) { return; } this.listeners[ eventType ] this.listeners[ eventType ].filter( ( listener ) listener ! instance ); if ( ! this.listeners[ eventType ].length ) { // Removing last listener for this type, so unbind event. window.removeEventListener( eventType, this.handleEvent ); delete this.listeners[ eventType ]; } }逻辑要点从数组中剔除指定实例只有当该事件类型最后一个监听者移除后才真正调用window.removeEventListener并清理数组实现最后一个监听者负责解绑的引用计数式管理。handleEvent( event )—— 统一的全局分发入口handleEvent( event ) { this.listeners[ event.type ]?.forEach( ( instance ) { instance.handleEvent( event ); } ); }window上绑定的是这同一个方法引用事件触发时按event.type找到所有注册实例逐个调用其handleEvent即 HOC 包装类上的handleEvent最终落到组件实例的具体方法上。3.3 生命周期绑定与解绑HOC 内部的Wrapper类在 React 生命周期中完成注册与注销index.jsxcomponentDidMount() { Object.keys( eventTypesToHandlers ).forEach( ( eventType ) { listener.add( eventType, this ); } ); } componentWillUnmount() { Object.keys( eventTypesToHandlers ).forEach( ( eventType ) { listener.remove( eventType, this ); } ); }挂载componentDidMount遍历配置对象的所有事件类型逐个向listener注册卸载componentWillUnmount遍历同一份配置逐个注销。这与文档声明的Unbinding when the component unmounts完全对应——开发者无需也不应再手动做任何addEventListener/removeEventListener配对生命周期泄漏风险由 HOC 一次性解决。3.4 为什么全应用单监听有价值从工程角度看这种注册中心 共享监听模式的价值在于减少全局监听器数量N 个组件监听resizewindow上只有 1 个监听器降低浏览器事件分发压力集中生命周期管理实例增删与监听器绑定解绑完全解耦天然避免重复绑定与漏解绑统一分发入口后续若要增加日志、节流等横切逻辑只需修改Listener.handleEvent一处。需要说明的是从源码结构看Listener.handleEvent并未内置节流throttle/防抖debounce处理真实事件仍以原始频率分发若需限频应在组件方法内自行处理wordpress/compose本身也提供了独立的throttle、debounce工具。四、源码级验证单元测试如何背书这些行为仓库为withGlobalEvents与Listener各编写了独立的 jsdom 单元测试可视为对该组件行为的权威契约。4.1 组件级测试test/index.jsdom.test.jsx测试通过vi.mock对../listener模块进行子类化打桩从而能 spy 到单例的add/remove/handleEvent。三个关键用例renders with original component包装后的组件正常渲染子节点同时断言控制台输出了废弃警告expect( console ).toHaveWarned()——印证deprecated告警确实会触发binds events from passed object渲染后断言Listener._instance.add被以(resize, 任意实例对象)调用——印证componentDidMount的注册行为handles events构造{ type: resize }事件并调用Listener._instance.handleEvent( event )断言被包装组件原型上的handleResize以及透传的onResize回调均被以该事件调用——完整验证全局事件 → Listener 分发 → 组件实例方法的调用链。4.2 监听器级测试test/listener.jsdom.test.js该文件在beforeAll中用vi.fn()替换global.window.addEventListener与removeEventListener从而精确统计真实绑定次数add只在首个监听者时绑定连续两次add(resize, ...)window.addEventListener仅被调用 1 次remove只在最后一个监听者时解绑两个实例一先一后移除第一个时window.removeEventListener未被调用移除最后一个时才被调用handleEvent分发单个实例收到事件、同一实例重复注册 3 次会收到 3 次调用说明它是按实例数组逐一分发不做去重。这些用例从测试层面精确锁定了Binding at most a single event handler for the entire application这一核心承诺。五、废弃原因与现代替代方案从 HOC 到 Hooks5.1 为何被废弃自 React 16.8 引入 Hooks 后类组件时代的 HOC 模式逐步让位于更直接的函数组件能力。withGlobalEvents的诸多职责——生命周期内绑定/解绑、实例方法查找、ref 透传——在 Hooks 范式下都能以更直观、类型更安全的方式实现因此官方在 5.7 版本将其废弃并指定useEffect为替代方案。5.2 使用 useEffect 的等价实现官方推荐的替代写法对应原组件语义大致如下import { useEffect, useRef } from wordpress/element; function ResizingComponent() { const handleResize () { // ... }; useEffect( () { window.addEventListener( resize, handleResize ); return () { window.removeEventListener( resize, handleResize ); }; }, [] ); // render ... }要点对照useEffect的清理函数cleanup即等价于 HOC 自动执行的卸载时解绑[]依赖数组保证只绑定一次若需响应多个全局事件在同一个 effect 中集中绑定、在清理函数中集中解绑即可。值得注意的是useEffect方案是每个组件各自绑定一个真实监听器并不具备withGlobalEvents的全应用单监听合并能力。这在实际项目中通常可接受——浏览器对事件监听的承载能力足够且收益是代码更直白、类型推导更友好。若你确实需要保留全局单监听的合并效果可以参考上文Listener类的注册中心设计自行封装一个useSharedGlobalEventsHook 或事件总线。5.3 存量代码的处理建议对于仍在使用withGlobalEvents的存量代码迁移时按配置对象 → 逐一替换为 effect的思路渐进改造不必一次性重构在迁移完成前可暂以// eslint-disable-next-line或构建日志过滤的方式忽略弃用警告但应制定明确的清理计划注意withGlobalEvents的导入位置从 packages/compose/src/index.js 可见它属于 compose 包公开 API 的一部分依赖wordpress/compose即可直接使用。六、总结withGlobalEvents是 Gutenberg 早期类组件时代解决全局事件订阅问题的代表性方案其核心价值可归纳为三条声明式配置{ resize: handleResize }一行映射即可订阅全局事件方法名自动解析、事件对象自动透传生命周期托管挂载注册、卸载注销完全由 HOC 接管杜绝手动配对addEventListener/removeEventListener引发的泄漏单例监听架构Listener注册中心保证每种事件类型在window上只有一个真实监听器多个组件实例共享分发实现见 listener.js行为契约见两组 测试。尽管官方已自 5.7 起将其废弃并推荐useEffect但其注册中心 共享监听 引用计数解绑的设计仍然是理解现代事件监听合并、自定义事件系统的最佳参考教材之一。对于维护存量 Gutenberg 插件或学习其组件设计哲学的开发者而言读懂withGlobalEvents依然是一笔值得的投资。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考