尧图网站建设 
深入解析 Gutenberg Block Variation Transforms 组件区块变体转换的完整实现与实战指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读BlockVariationTransforms是 GutenbergWordPress 块编辑器wordpress/block-editor包中的一个实验性组件它负责在编辑界面中展示当前选中区块的所有“可转换”变体variation并允许用户一键切换到目标变体。本文以 packages/block-editor/src/components/block-variation-transforms/README.md 为主线结合组件源码、样式文件、测试用例与底层 selector 实现系统讲解该组件的使用方式、属性契约、三种渲染形态、底层数据流与判定逻辑帮助你在自己的块编辑器插件中正确接入并复用这一能力。一、组件是什么把「变体切换」做成可视化操作在 Gutenberg 的块 API 中block variations区块变体是同一区块类型在不同配置下的预设实例。典型例子是core/embed区块它有 YouTube、Vimeo、Twitter 等数十个变体每个变体通过不同的attributes如providerNameSlug实现不同平台的嵌入行为。BlockVariationTransforms组件做的事情非常聚焦读取当前选中区块的变体列表但只保留在scope属性中声明了transform选项的那些变体将这些变体渲染成可交互的选择控件当用户选中某个变体时触发对选中区块attributes的更新更新内容来自该变体声明的attributes。换句话说它是把“手动切换区块变体”这个动作从代码层updateBlockAttributes升级成了编辑器内的一个可视控件。组件本身不负责业务逻辑只负责“把可转换变体呈现出来并回写属性”。从仓库源码看该组件被内置在区块检查器Block Inspector中在 block-inspector/index.jsx 中当区块处于非样式编辑状态时会以renderedBlockClientId为参数渲染BlockVariationTransforms blockClientId{ renderedBlockClientId } /。因此凡是使用区块检查器的标准块编辑器界面选中一个具有transform变体的区块时都会在侧栏中看到该转换控件。二、开发指南在自定义组件中接入 BlockVariationTransforms2.1 基本用法官方 README 给出了最小可用示例通过useSelect从core/block-editorstore 获取当前选中区块的 client id然后将其作为blockClientId属性传给组件。import { useSelect } from wordpress/data; import { __experimentalBlockVariationTransforms as BlockVariationTransforms } from wordpress/block-editor; const MyBlockVariationTransforms () { const { selectedBlockClientId } useSelect( ( select ) { const { getSelectedBlockClientId } select( core/block-editor ); return { selectedBlockClientId: getSelectedBlockClientId(), }; } ); return BlockVariationTransforms blockClientId{ selectedBlockClientId } /; };几点实操提示组件名带有__experimental前缀说明其 API 仍处于实验阶段未来可能调整接入时应通过wordpress/block-editor的具名导入引入。blockClientId传入的必须是已挂载区块的 client id。如果你需要把组件放在区块检查器之外例如放在侧栏自定义区域需要自己保证 id 的有效性因为源码在blockClientId无效时会直接跳过数据查询见下文源码分析。由于组件依赖wordpress/data订阅 store 状态当选中区块变化时组件会自动重新渲染并刷新可转换变体列表无需手动同步。2.2 Props 契约组件目前仅暴露一个对外属性属性类型必填说明blockClientIdstring是目标区块的 client id块编辑器内部唯一标识在 index.jsx 中blockClientId被用于getBlockName( blockClientId )获取区块类型名称getBlockAttributes( blockClientId )获取区块当前属性getActiveBlockVariation( name, attributes, transform )判断当前命中哪个可转换变体canEditBlock( blockClientId )判断区块是否可编辑getBlockEditingMode( blockClientId )判断是否处于contentOnly编辑模式isSectionBlock( blockClientId )判断是否为 Section 区块updateBlockAttributes( blockClientId, attributes )在用户选择变体后回写属性。从源码结构看该组件的唯一输入就是目标区块的 client id其余数据全部通过 store selector 内部派生这保证了组件的无状态、可组合特性。2.3 使用前提必须挂在 BlockEditorProvider 之下README 在 “Related components” 一节明确说明Block Editor 组件只能用在组件树中的 BlockEditorProvider 之下。BlockVariationTransforms同样遵循这一约束因为它通过wordpress/data访问core/block-editor与core/blocks两个 store而这两个 store 的初始化依赖BlockEditorProvider建立的编辑器上下文它需要真实的区块树client id 有效、区块已注册才能查询到变体数据。因此如果你在自定义插件中渲染该组件务必确认其位于BlockEditorProvider的子树内。三、变体数据从哪来注册、scope 与 store 查询链路3.1 如何让一个变体“可转换”scope 属性变体通过registerBlockVariation( blockName, variation )注册其声明中scope字段决定该变体出现在哪些场景。组件只展示scope中包含transform的变体。在源码层面组件通过两处查询完成数据获取index.jsxconst { getActiveBlockVariation, getBlockVariations } select( blocksStore ); variations: name getBlockVariations( name, transform ), activeBlockVariation: getActiveBlockVariation( name, getBlockAttributes( blockClientId ), transform ),getBlockVariations( name, transform )按scope过滤返回声明了transform的变体数组getActiveBlockVariation( name, attributes, transform )基于当前区块属性判断当前命中哪个变体返回的是变体对象用于标记选中态。getBlockVariations的公开 API 定义在 registration.ts其内部委托给blocksstore 的 selector底层再经getBlockType从注册表读取变体并按scope过滤。getActiveBlockVariation与getBlockVariations的完整实现位于 packages/blocks/src/store/selectors.ts。补充除了transformscope还支持block替换按钮、块切换器、inserter插入器等取值。一个变体可以同时声明多个 scope例如scope: [ block, inserter, transform ]。只有包含transform的变体才会出现在本组件的候选列表中。3.2 活跃变体的匹配算法getActiveBlockVariation用于确定“当前区块属于哪个变体”其判定顺序源码证据见 selectors.ts静态 inner content 匹配如果变体声明了innerContent例如 Custom HTML 区块的变体当区块的 inner content 与变体声明深度相等时命中。由于 inner content 只存储静态片段与null占位符不含内部块本身编辑内部块不会破坏匹配而修改静态标记会导致失配。isActive数组匹配对每个声明isActive属性路径支持嵌套路径如layout.type的变体逐一校验路径上的取值是否与区块当前属性匹配取“匹配属性数量最多”的变体属性路径若不在区块已注册的 attributes 中则跳过。RichTextData类型的值会先转成 HTML 字符串再比较。isActive函数匹配如果isActive是函数则直接调用variation.isActive( attributes, variation.attributes )命中即返回函数形式无法比较匹配优先级因此返回首个匹配。默认变体回退当以上都没有命中且 scope 为block或transform时回退到声明了isDefault且没有isActive的变体。值得注意的是源码注释明确说明该回退不适用于inserterscope以免影响插入器中的区块名称展示。也就是说即使区块当前属性没有精确命中某个变体只要存在默认变体组件仍能渲染出“当前选中”状态保持 UI 稳定。四、交互与渲染三种呈现形态的自动选择组件内部根据变体数量与图标情况在三种形态之间自动切换源码见 index.jsxVariationsToggleGroupControl分段控件默认形态基于wordpress/components的__experimentalToggleGroupControl实现每个变体以带图标的选项按钮呈现。适用于变体数量不多≤6且图标不重复的场景。VariationsButtons按钮组当变体数量 6时使用因为源码注释明确说明“ToggleGroupControl 不支持换行”按钮组更适合多变体横向排布。VariationsDropdown下拉菜单当变体图标不唯一两个变体共用同一图标时使用基于wordpress/ui的新 Menu 组件实现采用Menu.RadioGroup/Menu.RadioItem单选语义选项可附带description描述文字。形态选择的两条规则源码为证const hasUniqueIcons ...; // 每个变体的 icon.src 互不相同 const showButtons variations.length 6; const ButtonComponent showButtons ? VariationsButtons : VariationsToggleGroupControl; const Component hasUniqueIcons ? ButtonComponent : VariationsDropdown;三条隐式守卫条件同样来自源码index.jsx任一不满足则组件返回null不渲染! variations?.length该区块没有声明transform变体! canEdit当前区块不可编辑canEditBlock返回 falseisContentOnly || isSection区块处于 content-only 编辑模式且非内容块或是 Section 区块——这些场景下不展示变体转换控件避免干扰内容编辑流程。无障碍细节所有形态都带有可访问标签例如按钮形态使用VisuallyHidden包裹的legend声明 “Transform to variation” 分组名每个按钮的label在选中态显示变体标题、非选中态显示 “Transform to %s”%s为变体标题并带有aria-label与showTooltip。五、选择变体后发生了什么属性合并回写当用户点击/选中某个变体时组件执行onSelectVariation源码 index.jsxconst onSelectVariation ( variationName ) { updateBlockAttributes( blockClientId, { ...variations.find( ( { name } ) name variationName ) .attributes, } ); };其核心是useDispatch( blockEditorStore ).updateBlockAttributes将目标变体声明的attributes对象合并到区块现有属性上。注意这是合并merge而非整体替换未在变体中声明的属性保持不变用户选择的是变体name组件再从variations数组中查回完整的变体对象以取得其attributes更新由core/block-editorstore 派发会触发区块的重新渲染、撤销历史记录入栈以及编辑器界面的同步刷新。以core/embed为例若你在 YouTube 变体下切换为 Vimeo 变体实际发生的底层操作就是updateBlockAttributes( clientId, { providerNameSlug: vimeo } )这类属性回写之后区块的预览行为随之改变。六、测试用例验证行为即契约组件的单元测试位于 test/index.jsdom.test.jsx两个用例直接验证了上述行为契约选择变体渲染组件 → 点击 “Transform to variation” 按钮 → 在菜单中点击名为 “Decorated” 的变体 → 断言updateBlockAttributes被以( client-id, { className: is-style-decorated } )调用。这验证了“选择变体 属性合并回写”的核心链路也说明className这类样式属性正是常见的变体差异载体。活跃变体状态回显首次渲染时activeBlockVariation为undefined此时 “Plain” 项未选中重新渲染后变为variations[0]断言菜单中的 “Plain” 项变为选中态。这验证了组件对 store 状态变化的响应式订阅能力——变体选中态会随区块属性变化实时同步。这两个用例同时说明了接入该组件的预期行为候选列表来自getBlockVariations( name, transform )选中态来自getActiveBlockVariation( ..., transform )选择动作最终落在updateBlockAttributes上。七、样式结构速览组件的样式定义在 style.scss根类名.block-editor-block-variation-transforms统一内边距padding: 0 $grid-unit-20 $grid-unit-20并对fieldset形态重置浏览器默认边框与外边距border: 0; margin: 0; min-inline-size: 0保证按钮形态与段落形态视觉一致.block-editor-block-variation-transforms__button下拉触发按钮占满整行、内容居中。如果你在自定义主题或插件中需要微调变体转换控件的间距与对齐可直接针对这两个类名覆盖样式。八、总结何时使用与核心要点要点结论功能定位将选中区块的transform变体渲染为可视化切换控件选择后合并回写属性唯一对外属性blockClientId: string数据来源core/blocksstore 的getBlockVariations/getActiveBlockVariationscope 固定为transform三种形态分段控件≤6 个且图标唯一→ 按钮组6 个→ 下拉菜单图标重复渲染前置条件有候选变体、区块可编辑、非 content-only/非 Section副作用通过updateBlockAttributes合并属性进入撤销历史使用约束必须位于BlockEditorProvider组件树下如果你正在开发自定义区块或编辑器扩展并希望让用户在不同变体间快速切换BlockVariationTransforms是官方给出的现成方案只需传入区块 client id其余数据获取、形态适配、无障碍与状态回显均已由组件与底层 store 处理。更进一步你也可以参照其源码结构把getBlockVariations( name, transform )与getActiveBlockVariation( name, attributes, transform )这套 selector 组合应用到自己的自定义控件中实现同样语义但不同样式的变体转换 UI。相关资源组件源码packages/block-editor/src/components/block-variation-transforms/index.jsx组件样式packages/block-editor/src/components/block-variation-transforms/style.scss组件测试packages/block-editor/src/components/block-variation-transforms/test/index.jsdom.test.jsx底层 selector 实现packages/blocks/src/store/selectors.ts变体注册 APIpackages/blocks/src/api/registration.ts组件消费位置区块检查器packages/block-editor/src/components/block-inspector/index.jsx使用前提Providerpackages/block-editor/src/components/provider/README.md【免费下载链接】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 Block Variation Transforms 组件：区块变体转换的完整实现与实战指南
深入解析 Gutenberg Block Variation Transforms 组件区块变体转换的完整实现与实战指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读BlockVariationTransforms是 GutenbergWordPress 块编辑器wordpress/block-editor包中的一个实验性组件它负责在编辑界面中展示当前选中区块的所有“可转换”变体variation并允许用户一键切换到目标变体。本文以 packages/block-editor/src/components/block-variation-transforms/README.md 为主线结合组件源码、样式文件、测试用例与底层 selector 实现系统讲解该组件的使用方式、属性契约、三种渲染形态、底层数据流与判定逻辑帮助你在自己的块编辑器插件中正确接入并复用这一能力。一、组件是什么把「变体切换」做成可视化操作在 Gutenberg 的块 API 中block variations区块变体是同一区块类型在不同配置下的预设实例。典型例子是core/embed区块它有 YouTube、Vimeo、Twitter 等数十个变体每个变体通过不同的attributes如providerNameSlug实现不同平台的嵌入行为。BlockVariationTransforms组件做的事情非常聚焦读取当前选中区块的变体列表但只保留在scope属性中声明了transform选项的那些变体将这些变体渲染成可交互的选择控件当用户选中某个变体时触发对选中区块attributes的更新更新内容来自该变体声明的attributes。换句话说它是把“手动切换区块变体”这个动作从代码层updateBlockAttributes升级成了编辑器内的一个可视控件。组件本身不负责业务逻辑只负责“把可转换变体呈现出来并回写属性”。从仓库源码看该组件被内置在区块检查器Block Inspector中在 block-inspector/index.jsx 中当区块处于非样式编辑状态时会以renderedBlockClientId为参数渲染BlockVariationTransforms blockClientId{ renderedBlockClientId } /。因此凡是使用区块检查器的标准块编辑器界面选中一个具有transform变体的区块时都会在侧栏中看到该转换控件。二、开发指南在自定义组件中接入 BlockVariationTransforms2.1 基本用法官方 README 给出了最小可用示例通过useSelect从core/block-editorstore 获取当前选中区块的 client id然后将其作为blockClientId属性传给组件。import { useSelect } from wordpress/data; import { __experimentalBlockVariationTransforms as BlockVariationTransforms } from wordpress/block-editor; const MyBlockVariationTransforms () { const { selectedBlockClientId } useSelect( ( select ) { const { getSelectedBlockClientId } select( core/block-editor ); return { selectedBlockClientId: getSelectedBlockClientId(), }; } ); return BlockVariationTransforms blockClientId{ selectedBlockClientId } /; };几点实操提示组件名带有__experimental前缀说明其 API 仍处于实验阶段未来可能调整接入时应通过wordpress/block-editor的具名导入引入。blockClientId传入的必须是已挂载区块的 client id。如果你需要把组件放在区块检查器之外例如放在侧栏自定义区域需要自己保证 id 的有效性因为源码在blockClientId无效时会直接跳过数据查询见下文源码分析。由于组件依赖wordpress/data订阅 store 状态当选中区块变化时组件会自动重新渲染并刷新可转换变体列表无需手动同步。2.2 Props 契约组件目前仅暴露一个对外属性属性类型必填说明blockClientIdstring是目标区块的 client id块编辑器内部唯一标识在 index.jsx 中blockClientId被用于getBlockName( blockClientId )获取区块类型名称getBlockAttributes( blockClientId )获取区块当前属性getActiveBlockVariation( name, attributes, transform )判断当前命中哪个可转换变体canEditBlock( blockClientId )判断区块是否可编辑getBlockEditingMode( blockClientId )判断是否处于contentOnly编辑模式isSectionBlock( blockClientId )判断是否为 Section 区块updateBlockAttributes( blockClientId, attributes )在用户选择变体后回写属性。从源码结构看该组件的唯一输入就是目标区块的 client id其余数据全部通过 store selector 内部派生这保证了组件的无状态、可组合特性。2.3 使用前提必须挂在 BlockEditorProvider 之下README 在 “Related components” 一节明确说明Block Editor 组件只能用在组件树中的 BlockEditorProvider 之下。BlockVariationTransforms同样遵循这一约束因为它通过wordpress/data访问core/block-editor与core/blocks两个 store而这两个 store 的初始化依赖BlockEditorProvider建立的编辑器上下文它需要真实的区块树client id 有效、区块已注册才能查询到变体数据。因此如果你在自定义插件中渲染该组件务必确认其位于BlockEditorProvider的子树内。三、变体数据从哪来注册、scope 与 store 查询链路3.1 如何让一个变体“可转换”scope 属性变体通过registerBlockVariation( blockName, variation )注册其声明中scope字段决定该变体出现在哪些场景。组件只展示scope中包含transform的变体。在源码层面组件通过两处查询完成数据获取index.jsxconst { getActiveBlockVariation, getBlockVariations } select( blocksStore ); variations: name getBlockVariations( name, transform ), activeBlockVariation: getActiveBlockVariation( name, getBlockAttributes( blockClientId ), transform ),getBlockVariations( name, transform )按scope过滤返回声明了transform的变体数组getActiveBlockVariation( name, attributes, transform )基于当前区块属性判断当前命中哪个变体返回的是变体对象用于标记选中态。getBlockVariations的公开 API 定义在 registration.ts其内部委托给blocksstore 的 selector底层再经getBlockType从注册表读取变体并按scope过滤。getActiveBlockVariation与getBlockVariations的完整实现位于 packages/blocks/src/store/selectors.ts。补充除了transformscope还支持block替换按钮、块切换器、inserter插入器等取值。一个变体可以同时声明多个 scope例如scope: [ block, inserter, transform ]。只有包含transform的变体才会出现在本组件的候选列表中。3.2 活跃变体的匹配算法getActiveBlockVariation用于确定“当前区块属于哪个变体”其判定顺序源码证据见 selectors.ts静态 inner content 匹配如果变体声明了innerContent例如 Custom HTML 区块的变体当区块的 inner content 与变体声明深度相等时命中。由于 inner content 只存储静态片段与null占位符不含内部块本身编辑内部块不会破坏匹配而修改静态标记会导致失配。isActive数组匹配对每个声明isActive属性路径支持嵌套路径如layout.type的变体逐一校验路径上的取值是否与区块当前属性匹配取“匹配属性数量最多”的变体属性路径若不在区块已注册的 attributes 中则跳过。RichTextData类型的值会先转成 HTML 字符串再比较。isActive函数匹配如果isActive是函数则直接调用variation.isActive( attributes, variation.attributes )命中即返回函数形式无法比较匹配优先级因此返回首个匹配。默认变体回退当以上都没有命中且 scope 为block或transform时回退到声明了isDefault且没有isActive的变体。值得注意的是源码注释明确说明该回退不适用于inserterscope以免影响插入器中的区块名称展示。也就是说即使区块当前属性没有精确命中某个变体只要存在默认变体组件仍能渲染出“当前选中”状态保持 UI 稳定。四、交互与渲染三种呈现形态的自动选择组件内部根据变体数量与图标情况在三种形态之间自动切换源码见 index.jsxVariationsToggleGroupControl分段控件默认形态基于wordpress/components的__experimentalToggleGroupControl实现每个变体以带图标的选项按钮呈现。适用于变体数量不多≤6且图标不重复的场景。VariationsButtons按钮组当变体数量 6时使用因为源码注释明确说明“ToggleGroupControl 不支持换行”按钮组更适合多变体横向排布。VariationsDropdown下拉菜单当变体图标不唯一两个变体共用同一图标时使用基于wordpress/ui的新 Menu 组件实现采用Menu.RadioGroup/Menu.RadioItem单选语义选项可附带description描述文字。形态选择的两条规则源码为证const hasUniqueIcons ...; // 每个变体的 icon.src 互不相同 const showButtons variations.length 6; const ButtonComponent showButtons ? VariationsButtons : VariationsToggleGroupControl; const Component hasUniqueIcons ? ButtonComponent : VariationsDropdown;三条隐式守卫条件同样来自源码index.jsx任一不满足则组件返回null不渲染! variations?.length该区块没有声明transform变体! canEdit当前区块不可编辑canEditBlock返回 falseisContentOnly || isSection区块处于 content-only 编辑模式且非内容块或是 Section 区块——这些场景下不展示变体转换控件避免干扰内容编辑流程。无障碍细节所有形态都带有可访问标签例如按钮形态使用VisuallyHidden包裹的legend声明 “Transform to variation” 分组名每个按钮的label在选中态显示变体标题、非选中态显示 “Transform to %s”%s为变体标题并带有aria-label与showTooltip。五、选择变体后发生了什么属性合并回写当用户点击/选中某个变体时组件执行onSelectVariation源码 index.jsxconst onSelectVariation ( variationName ) { updateBlockAttributes( blockClientId, { ...variations.find( ( { name } ) name variationName ) .attributes, } ); };其核心是useDispatch( blockEditorStore ).updateBlockAttributes将目标变体声明的attributes对象合并到区块现有属性上。注意这是合并merge而非整体替换未在变体中声明的属性保持不变用户选择的是变体name组件再从variations数组中查回完整的变体对象以取得其attributes更新由core/block-editorstore 派发会触发区块的重新渲染、撤销历史记录入栈以及编辑器界面的同步刷新。以core/embed为例若你在 YouTube 变体下切换为 Vimeo 变体实际发生的底层操作就是updateBlockAttributes( clientId, { providerNameSlug: vimeo } )这类属性回写之后区块的预览行为随之改变。六、测试用例验证行为即契约组件的单元测试位于 test/index.jsdom.test.jsx两个用例直接验证了上述行为契约选择变体渲染组件 → 点击 “Transform to variation” 按钮 → 在菜单中点击名为 “Decorated” 的变体 → 断言updateBlockAttributes被以( client-id, { className: is-style-decorated } )调用。这验证了“选择变体 属性合并回写”的核心链路也说明className这类样式属性正是常见的变体差异载体。活跃变体状态回显首次渲染时activeBlockVariation为undefined此时 “Plain” 项未选中重新渲染后变为variations[0]断言菜单中的 “Plain” 项变为选中态。这验证了组件对 store 状态变化的响应式订阅能力——变体选中态会随区块属性变化实时同步。这两个用例同时说明了接入该组件的预期行为候选列表来自getBlockVariations( name, transform )选中态来自getActiveBlockVariation( ..., transform )选择动作最终落在updateBlockAttributes上。七、样式结构速览组件的样式定义在 style.scss根类名.block-editor-block-variation-transforms统一内边距padding: 0 $grid-unit-20 $grid-unit-20并对fieldset形态重置浏览器默认边框与外边距border: 0; margin: 0; min-inline-size: 0保证按钮形态与段落形态视觉一致.block-editor-block-variation-transforms__button下拉触发按钮占满整行、内容居中。如果你在自定义主题或插件中需要微调变体转换控件的间距与对齐可直接针对这两个类名覆盖样式。八、总结何时使用与核心要点要点结论功能定位将选中区块的transform变体渲染为可视化切换控件选择后合并回写属性唯一对外属性blockClientId: string数据来源core/blocksstore 的getBlockVariations/getActiveBlockVariationscope 固定为transform三种形态分段控件≤6 个且图标唯一→ 按钮组6 个→ 下拉菜单图标重复渲染前置条件有候选变体、区块可编辑、非 content-only/非 Section副作用通过updateBlockAttributes合并属性进入撤销历史使用约束必须位于BlockEditorProvider组件树下如果你正在开发自定义区块或编辑器扩展并希望让用户在不同变体间快速切换BlockVariationTransforms是官方给出的现成方案只需传入区块 client id其余数据获取、形态适配、无障碍与状态回显均已由组件与底层 store 处理。更进一步你也可以参照其源码结构把getBlockVariations( name, transform )与getActiveBlockVariation( name, attributes, transform )这套 selector 组合应用到自己的自定义控件中实现同样语义但不同样式的变体转换 UI。相关资源组件源码packages/block-editor/src/components/block-variation-transforms/index.jsx组件样式packages/block-editor/src/components/block-variation-transforms/style.scss组件测试packages/block-editor/src/components/block-variation-transforms/test/index.jsdom.test.jsx底层 selector 实现packages/blocks/src/store/selectors.ts变体注册 APIpackages/blocks/src/api/registration.ts组件消费位置区块检查器packages/block-editor/src/components/block-inspector/index.jsx使用前提Providerpackages/block-editor/src/components/provider/README.md【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考