Gutenberg 核心块深度解析Spacercore/spacer间距占位块的属性、渲染与源码实现【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergSpacer 是 GutenbergWordPress 块编辑器内置的“间距占位”核心块用于在块之间插入空白并自定义其高度在横向 Flex 布局中还可自定义宽度。本文以 Spacer 块文档 为骨架结合 block.json、edit.jsx、save.jsx 等仓库源码完整讲解其块元数据、属性、支持能力、前后端渲染标记、编辑器拖拽交互与历史迁移机制帮助开发者理解该类静态占位块的设计模式并正确使用、扩展或二次开发。一、块总览名称、分类、API 版本与块类型根据 Spacer 块文档 与 block.json 中的元数据该块的基本身份信息如下Name块名core/spacerTitle标题SpacerCategory分类design设计类块与分隔线 Separator、按钮 Button 等同属一类API Version块 API 版本3即apiVersion: 3声明于 block.json 第 3 行Block Type块类型Static静态块其标记直接保存在文章内容post content中而非由服务端渲染生成从源码结构看core/spacer的注册入口位于 index.js它导出metadata来自block.json、name以及包含icon、transforms、edit、save、deprecated的settings对象块图标使用wordpress/icons中的resizeCornerNE右上角拖拽调整图标直观传达了“可拖拽调整大小”的核心交互语义。整个块目录还包含 constants.js、controls.jsx、deprecated.jsx、editor.scss、style.scss 等文件共同构成完整的前端实现。二、属性Attributes解析Spacer 的属性通过 block.json 中的attributes属性声明共两个Attribute属性Type类型Default默认值Description说明heightstring100px垂直方向占位高度默认 100pxwidthstring—水平方向占位宽度用于 Flex 横向布局场景无默认值2.1 为何是字符串而非数字值得注意height与width的类型是string如100px而不是数字。这是因为 Spacer 支持任意 CSS 长度单位px、em、rem、vw、vh字符串形态可以携带单位信息。这一点在 deprecated.jsx 的迁移逻辑中体现得尤为明显旧版本API 早期这两个属性曾是number类型默认100迁移函数会把数字统一转换为带px的字符串migrate( attributes ) { const { height, width } attributes; return { ...attributes, width: width ! undefined ? ${ width }px : undefined, height: height ! undefined ? ${ height }px : undefined, }; }从源码结构可以推断这一从number到string的演变为后续支持间距预设变量spacing preset CSS 变量与多单位输入扫清了障碍——getSpacingPresetCssVar、isValueSpacingPreset等工具函数处理的都是字符串形态的值。2.2 间距预设值的支持在 controls.jsx 中DimensionInput组件通过useSpacingSizes()获取主题定义的间距尺寸预设当预设数量大于等于 2 时侧栏使用SpacingSizesControl以预设档位Preset的形式供用户选择选中的值形如var:preset|spacing|50当预设不足 2 个主题禁用了自定义间距尺寸时则退化为UnitControl直接输入数值。而 save.jsx 在保存时统一调用getSpacingPresetCssVar()将预设字符串解析为对应的 CSS 变量var(--wp--preset--spacing--50)后再写入内联样式从而保证主题预设能被正确应用。三、支持的块能力Supportsblock.json 中声明的supports决定了编辑器为 Spacer 提供哪些通用能力文档整理如下anchor锚点true— 允许为 Spacer 设置 HTML 锚点id便于页面内定位与自定义 JS 挂接。spacing.margin[top,bottom]— 支持设置上下外边距。值得注意的是该能力还带有实验性默认控件配置__experimentalDefaultControls: { margin: true }即编辑器侧栏默认展示 margin 控件无需用户展开“更多设置”。interactivity.clientNavigationtrue— 声明该块支持客户端导航Client Side Navigation即区块间的无刷新路由切换在站点编辑器交互式导航Interactivity API场景下保持兼容。从源码层面看supports中声明的能力由 Gutenberg 的 block-supports 机制统一处理Spacer 对应的支持处理器可在仓库的 lib/block-supports 目录中找到如anchor.php、spacing.php等这些 PHP 端处理器会在服务端渲染时依据块属性为最终 HTML 补充类名与内联样式。该目录下的settings.php则负责把这些支持能力的配置汇聚成编辑器可读的元数据。四、上下文ContextSpacer 是块上下文Block Context的使用者而非提供者它在 block.json 中通过usesContext: [orientation]声明消费父块提供的orientation上下文用于判断自身处于纵向vertical还是横向horizontal布局容器中。在 edit.jsx 中const { orientation } context取出该值同时还会读取父级布局信息__unstableParentLayout综合判断后得到inheritedOrientation若父容器是 Flex 布局type flex或默认类型为 flex且父级未显式声明方向则默认按horizontal处理否则继承父级的orientation典型场景是组块 Group 的纵向 Flex 布局。这一上下文机制让同一个 Spacer 块能智能地决定在普通块流垂直方向中拖拽“高度”在 Flex 横向容器中拖拽“宽度”无需用户手动切换模式。五、块标记Block Markup与前端的静态渲染Spacer 属于静态块保存到文章内容中的标记由 save.jsx 生成。文档给出的标准标记示例如下!-- wp:spacer {height:100px} -- div styleheight:100px aria-hiddentrue classwp-block-spacer/div !-- /wp:spacer --5.1 渲染要点结合 save.jsx 源码可以看到保存函数的关键逻辑const finalHeight selfStretch fill || selfStretch fit ? undefined : height; return ( div { ...useBlockProps.save( { style: { height: getSpacingPresetCssVar( finalHeight ), width: getSpacingPresetCssVar( width ), }, aria-hidden: true, } ) } / );aria-hiddentrueSpacer 对屏幕阅读器等辅助技术不可见它只是视觉占位不应被朗读或聚焦classwp-block-spacer前端样式入口由 style.scss 定义其中仅有一条规则clear: both;用于清除浮动干扰、保证占位在文档流中的稳定性内联样式承载尺寸height、width直接以内联 style 输出支持间距预设 CSS 变量Flex 场景的例外当内联style.layout.selfStretch为fill或fit时不再输出默认height把尺寸交给 Flex 拉伸行为决定。useBlockProps.save()会把块元数据中声明的锚点、类名等能力合并进最终的div因此示例标记中即使没有显式写出 class渲染后也会带上wp-block-spacer。六、编辑器交互拖拽调整、工具栏与侧栏控件Spacer 在编辑器中最重要的体验是直接拖拽调整大小。这一能力由 edit.jsx 中的ResizableSpacer组件实现它基于wordpress/components的ResizableBox封装。6.1 拖拽方向与最小尺寸纵向垂直场景只允许向下拖拽enable配置为{ bottom: true }其余方向全部false横向Flex 场景只允许向右拖拽enable配置为{ right: true }最小尺寸MIN_SPACER_SIZE定义于 constants.js值为0即理论上可拖拽到 0但编辑器样式层做了兜底见下文 6.4。拖拽过程中通过onResize把临时尺寸写入 statetemporaryHeight/temporaryWidth仅当onResizeStop时才正式setAttributes持久化同时用toggleSelection(false/true)在拖拽期间临时禁用文本选择避免干扰。6.2 侧栏控件InspectorControlscontrols.jsx 通过InspectorControls在右侧设置面板提供Height高度与Width宽度输入控件二者按orientation条件渲染orientation horizontal时显示 Width否则显示 Height控件包裹在ToolsPanel中可通过下拉菜单展开/收起resetAll会把属性重置为{ width: undefined, height: 100px }。DimensionInput内部有两个值得注意的细节单位限制可用单位取自主题设置spacing.units并过滤掉%百分比——注释明确说明在多数上下文里百分比相对父容器没有确定意义默认单位为[px, em, rem, vw, vh]且各单位的默认提示值分别为px: 100, em: 10, rem: 10, vw: 10, vh: 25拖拽时强制 pxcomputedValue在isResizing为 true 时强制使用px单位拼接避免拖拽过程中单位跳动。6.3 拖拽手柄与悬停提示ResizableBox配置了__experimentalShowTooltip与__experimentalTooltipProps在拖拽时于角落位置显示实时尺寸气泡showHandle{ isSelected }意味着只有选中块时才显示拖拽手柄。6.4 编辑器样式兜底editor.scss 为编辑器内的 Spacer 提供了两类关键样式在块元素上叠加一层::before不可见点击区域宽度 100%、高度 100%最小 10px保证即使 Spacer 被拖到 1px 高/宽用户依然有足够大的目标可以选中它选中/悬停时给调整容器渲染半透明背景浅色主题rgba(0,0,0,0.1)深色主题rgba(255,255,255,0.15)直观呈现占位区域范围custom-sizes-disabled类配合“禁用自定义间距尺寸”设置disableCustomSpacingSizes读取自 edit.jsx 中的editorSettings.disableCustomSpacingSizes提供视觉反馈。七、Flex 布局容器内的行为这是 Spacer 相对复杂的能力当它位于 Flex 容器如 Group 的横向排列中时通过style.layout.selfStretch与style.layout.flexSize控制自身拉伸行为。edit.jsx 中的useEffect维护了一套状态同步逻辑进入 Flex 容器且未设置拉伸自动把当前高度/宽度迁移到flexSize并设selfStretch: fixed原height/width清零selfStretch为fill或fit清除对应的height/width让 Spacer 跟随 Flex 拉伸离开 Flex 容器把flexSize回写到height/width并清除layout中的 Flex 相关字段。这些变更统一通过__unstableMarkNextChangeAsNotPersistent()标记为“不写入历史记录”以useEffect内的注释说明——这是为了不干扰撤销/重做undo/redo栈。此外编辑态样式还做了两个关键处理纵向 Flex 容器中给 Spacer 设置minWidth: 48避免其在垂直排列中被压缩到零宽而无法选中拖拽时移除flex-grow、设置flex-basis为临时尺寸保证尺寸反馈即时准确。八、与其他块的转换Transformstransforms.js 定义了 Spacer 的单向块转换可转换为core/separator分隔线块转换时仅保留锚点属性const transforms { to: [ { type: block, blocks: [ core/separator ], transform: ( { anchor } ) { return createBlock( core/separator, { anchor: anchor || undefined, } ); }, }, ], };在块工具栏的“转换为”菜单中用户可将一个 Spacer 一键变更为分隔线反之不可。从源码结构看该文件位于块目录内并由 index.js 注入settings.transforms。九、历史兼容与数据迁移Deprecationsdeprecated.jsx 记录了块的历史版本用于兼容旧内容旧版属性为number类型height默认100、width无默认值保存的 HTML 直接把数字作为内联样式新版属性为string类型因此提供了migrate函数在解析旧文章时把数字自动补上px单位迁移为新结构并注册对应的旧版save函数用于识别旧标记。这正是前面 2.1 提到的“数字 → 字符串”演变在兼容层的落地也是 Gutenberg 核心块常见的向前兼容模式新代码读旧数据时先迁移再渲染保证历史文章不破版。十、前端样式与主题定制Spacer 的前端样式非常克制——style.scss 仅有.wp-block-spacer { clear: both; }尺寸完全由内联样式驱动。这意味着主题无需为 Spacer 编写额外 CSS 即可正常工作开发者可通过设置主题的spacing.units与间距预设spacing preset来控制侧栏可选的单位与档位在块支持层spacing.margin支持意味着主题可以通过样式系统如lib/theme.json、lib/global-styles-and-settings.php为 Spacer 的上下外边距提供默认值或预设。若需要查看块级支持的完整清单与源码入口可继续阅读 block.json 与 lib/block-supports 目录下的处理器实现。十一、源码地图与延伸阅读Spacer 块完整源码目录为 packages/block-library/src/spacer关键文件职责如下文件职责block.json块元数据名称、属性、支持能力、上下文声明index.js注册入口组装 settingsicon/transforms/edit/save/deprecatededit.jsx编辑器编辑组件拖拽调整、Flex 适配、状态同步save.jsx静态标记输出内联样式 aria-hiddencontrols.jsx侧栏设置面板Height/Width 输入、单位过滤、预设支持transforms.js转换为core/separatordeprecated.jsx旧版number 属性数据迁移与兼容渲染style.scss前端样式clear: botheditor.scss编辑器样式可选中兜底区域、选中高亮通过本文的梳理可以看到Spacer 虽然是一个“最小”的核心块却完整覆盖了 Gutenberg 块开发的典型要素JSON 元数据声明、静态渲染、上下文消费、拖拽交互、Flex 适配、块转换与历史迁移。对于想要深入理解块编辑器静态块开发模式的读者这份源码是一份简洁且完备的参考范本。【免费下载链接】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 核心块深度解析：Spacer（core/spacer）间距占位块的属性、渲染与源码实现
Gutenberg 核心块深度解析Spacercore/spacer间距占位块的属性、渲染与源码实现【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergSpacer 是 GutenbergWordPress 块编辑器内置的“间距占位”核心块用于在块之间插入空白并自定义其高度在横向 Flex 布局中还可自定义宽度。本文以 Spacer 块文档 为骨架结合 block.json、edit.jsx、save.jsx 等仓库源码完整讲解其块元数据、属性、支持能力、前后端渲染标记、编辑器拖拽交互与历史迁移机制帮助开发者理解该类静态占位块的设计模式并正确使用、扩展或二次开发。一、块总览名称、分类、API 版本与块类型根据 Spacer 块文档 与 block.json 中的元数据该块的基本身份信息如下Name块名core/spacerTitle标题SpacerCategory分类design设计类块与分隔线 Separator、按钮 Button 等同属一类API Version块 API 版本3即apiVersion: 3声明于 block.json 第 3 行Block Type块类型Static静态块其标记直接保存在文章内容post content中而非由服务端渲染生成从源码结构看core/spacer的注册入口位于 index.js它导出metadata来自block.json、name以及包含icon、transforms、edit、save、deprecated的settings对象块图标使用wordpress/icons中的resizeCornerNE右上角拖拽调整图标直观传达了“可拖拽调整大小”的核心交互语义。整个块目录还包含 constants.js、controls.jsx、deprecated.jsx、editor.scss、style.scss 等文件共同构成完整的前端实现。二、属性Attributes解析Spacer 的属性通过 block.json 中的attributes属性声明共两个Attribute属性Type类型Default默认值Description说明heightstring100px垂直方向占位高度默认 100pxwidthstring—水平方向占位宽度用于 Flex 横向布局场景无默认值2.1 为何是字符串而非数字值得注意height与width的类型是string如100px而不是数字。这是因为 Spacer 支持任意 CSS 长度单位px、em、rem、vw、vh字符串形态可以携带单位信息。这一点在 deprecated.jsx 的迁移逻辑中体现得尤为明显旧版本API 早期这两个属性曾是number类型默认100迁移函数会把数字统一转换为带px的字符串migrate( attributes ) { const { height, width } attributes; return { ...attributes, width: width ! undefined ? ${ width }px : undefined, height: height ! undefined ? ${ height }px : undefined, }; }从源码结构可以推断这一从number到string的演变为后续支持间距预设变量spacing preset CSS 变量与多单位输入扫清了障碍——getSpacingPresetCssVar、isValueSpacingPreset等工具函数处理的都是字符串形态的值。2.2 间距预设值的支持在 controls.jsx 中DimensionInput组件通过useSpacingSizes()获取主题定义的间距尺寸预设当预设数量大于等于 2 时侧栏使用SpacingSizesControl以预设档位Preset的形式供用户选择选中的值形如var:preset|spacing|50当预设不足 2 个主题禁用了自定义间距尺寸时则退化为UnitControl直接输入数值。而 save.jsx 在保存时统一调用getSpacingPresetCssVar()将预设字符串解析为对应的 CSS 变量var(--wp--preset--spacing--50)后再写入内联样式从而保证主题预设能被正确应用。三、支持的块能力Supportsblock.json 中声明的supports决定了编辑器为 Spacer 提供哪些通用能力文档整理如下anchor锚点true— 允许为 Spacer 设置 HTML 锚点id便于页面内定位与自定义 JS 挂接。spacing.margin[top,bottom]— 支持设置上下外边距。值得注意的是该能力还带有实验性默认控件配置__experimentalDefaultControls: { margin: true }即编辑器侧栏默认展示 margin 控件无需用户展开“更多设置”。interactivity.clientNavigationtrue— 声明该块支持客户端导航Client Side Navigation即区块间的无刷新路由切换在站点编辑器交互式导航Interactivity API场景下保持兼容。从源码层面看supports中声明的能力由 Gutenberg 的 block-supports 机制统一处理Spacer 对应的支持处理器可在仓库的 lib/block-supports 目录中找到如anchor.php、spacing.php等这些 PHP 端处理器会在服务端渲染时依据块属性为最终 HTML 补充类名与内联样式。该目录下的settings.php则负责把这些支持能力的配置汇聚成编辑器可读的元数据。四、上下文ContextSpacer 是块上下文Block Context的使用者而非提供者它在 block.json 中通过usesContext: [orientation]声明消费父块提供的orientation上下文用于判断自身处于纵向vertical还是横向horizontal布局容器中。在 edit.jsx 中const { orientation } context取出该值同时还会读取父级布局信息__unstableParentLayout综合判断后得到inheritedOrientation若父容器是 Flex 布局type flex或默认类型为 flex且父级未显式声明方向则默认按horizontal处理否则继承父级的orientation典型场景是组块 Group 的纵向 Flex 布局。这一上下文机制让同一个 Spacer 块能智能地决定在普通块流垂直方向中拖拽“高度”在 Flex 横向容器中拖拽“宽度”无需用户手动切换模式。五、块标记Block Markup与前端的静态渲染Spacer 属于静态块保存到文章内容中的标记由 save.jsx 生成。文档给出的标准标记示例如下!-- wp:spacer {height:100px} -- div styleheight:100px aria-hiddentrue classwp-block-spacer/div !-- /wp:spacer --5.1 渲染要点结合 save.jsx 源码可以看到保存函数的关键逻辑const finalHeight selfStretch fill || selfStretch fit ? undefined : height; return ( div { ...useBlockProps.save( { style: { height: getSpacingPresetCssVar( finalHeight ), width: getSpacingPresetCssVar( width ), }, aria-hidden: true, } ) } / );aria-hiddentrueSpacer 对屏幕阅读器等辅助技术不可见它只是视觉占位不应被朗读或聚焦classwp-block-spacer前端样式入口由 style.scss 定义其中仅有一条规则clear: both;用于清除浮动干扰、保证占位在文档流中的稳定性内联样式承载尺寸height、width直接以内联 style 输出支持间距预设 CSS 变量Flex 场景的例外当内联style.layout.selfStretch为fill或fit时不再输出默认height把尺寸交给 Flex 拉伸行为决定。useBlockProps.save()会把块元数据中声明的锚点、类名等能力合并进最终的div因此示例标记中即使没有显式写出 class渲染后也会带上wp-block-spacer。六、编辑器交互拖拽调整、工具栏与侧栏控件Spacer 在编辑器中最重要的体验是直接拖拽调整大小。这一能力由 edit.jsx 中的ResizableSpacer组件实现它基于wordpress/components的ResizableBox封装。6.1 拖拽方向与最小尺寸纵向垂直场景只允许向下拖拽enable配置为{ bottom: true }其余方向全部false横向Flex 场景只允许向右拖拽enable配置为{ right: true }最小尺寸MIN_SPACER_SIZE定义于 constants.js值为0即理论上可拖拽到 0但编辑器样式层做了兜底见下文 6.4。拖拽过程中通过onResize把临时尺寸写入 statetemporaryHeight/temporaryWidth仅当onResizeStop时才正式setAttributes持久化同时用toggleSelection(false/true)在拖拽期间临时禁用文本选择避免干扰。6.2 侧栏控件InspectorControlscontrols.jsx 通过InspectorControls在右侧设置面板提供Height高度与Width宽度输入控件二者按orientation条件渲染orientation horizontal时显示 Width否则显示 Height控件包裹在ToolsPanel中可通过下拉菜单展开/收起resetAll会把属性重置为{ width: undefined, height: 100px }。DimensionInput内部有两个值得注意的细节单位限制可用单位取自主题设置spacing.units并过滤掉%百分比——注释明确说明在多数上下文里百分比相对父容器没有确定意义默认单位为[px, em, rem, vw, vh]且各单位的默认提示值分别为px: 100, em: 10, rem: 10, vw: 10, vh: 25拖拽时强制 pxcomputedValue在isResizing为 true 时强制使用px单位拼接避免拖拽过程中单位跳动。6.3 拖拽手柄与悬停提示ResizableBox配置了__experimentalShowTooltip与__experimentalTooltipProps在拖拽时于角落位置显示实时尺寸气泡showHandle{ isSelected }意味着只有选中块时才显示拖拽手柄。6.4 编辑器样式兜底editor.scss 为编辑器内的 Spacer 提供了两类关键样式在块元素上叠加一层::before不可见点击区域宽度 100%、高度 100%最小 10px保证即使 Spacer 被拖到 1px 高/宽用户依然有足够大的目标可以选中它选中/悬停时给调整容器渲染半透明背景浅色主题rgba(0,0,0,0.1)深色主题rgba(255,255,255,0.15)直观呈现占位区域范围custom-sizes-disabled类配合“禁用自定义间距尺寸”设置disableCustomSpacingSizes读取自 edit.jsx 中的editorSettings.disableCustomSpacingSizes提供视觉反馈。七、Flex 布局容器内的行为这是 Spacer 相对复杂的能力当它位于 Flex 容器如 Group 的横向排列中时通过style.layout.selfStretch与style.layout.flexSize控制自身拉伸行为。edit.jsx 中的useEffect维护了一套状态同步逻辑进入 Flex 容器且未设置拉伸自动把当前高度/宽度迁移到flexSize并设selfStretch: fixed原height/width清零selfStretch为fill或fit清除对应的height/width让 Spacer 跟随 Flex 拉伸离开 Flex 容器把flexSize回写到height/width并清除layout中的 Flex 相关字段。这些变更统一通过__unstableMarkNextChangeAsNotPersistent()标记为“不写入历史记录”以useEffect内的注释说明——这是为了不干扰撤销/重做undo/redo栈。此外编辑态样式还做了两个关键处理纵向 Flex 容器中给 Spacer 设置minWidth: 48避免其在垂直排列中被压缩到零宽而无法选中拖拽时移除flex-grow、设置flex-basis为临时尺寸保证尺寸反馈即时准确。八、与其他块的转换Transformstransforms.js 定义了 Spacer 的单向块转换可转换为core/separator分隔线块转换时仅保留锚点属性const transforms { to: [ { type: block, blocks: [ core/separator ], transform: ( { anchor } ) { return createBlock( core/separator, { anchor: anchor || undefined, } ); }, }, ], };在块工具栏的“转换为”菜单中用户可将一个 Spacer 一键变更为分隔线反之不可。从源码结构看该文件位于块目录内并由 index.js 注入settings.transforms。九、历史兼容与数据迁移Deprecationsdeprecated.jsx 记录了块的历史版本用于兼容旧内容旧版属性为number类型height默认100、width无默认值保存的 HTML 直接把数字作为内联样式新版属性为string类型因此提供了migrate函数在解析旧文章时把数字自动补上px单位迁移为新结构并注册对应的旧版save函数用于识别旧标记。这正是前面 2.1 提到的“数字 → 字符串”演变在兼容层的落地也是 Gutenberg 核心块常见的向前兼容模式新代码读旧数据时先迁移再渲染保证历史文章不破版。十、前端样式与主题定制Spacer 的前端样式非常克制——style.scss 仅有.wp-block-spacer { clear: both; }尺寸完全由内联样式驱动。这意味着主题无需为 Spacer 编写额外 CSS 即可正常工作开发者可通过设置主题的spacing.units与间距预设spacing preset来控制侧栏可选的单位与档位在块支持层spacing.margin支持意味着主题可以通过样式系统如lib/theme.json、lib/global-styles-and-settings.php为 Spacer 的上下外边距提供默认值或预设。若需要查看块级支持的完整清单与源码入口可继续阅读 block.json 与 lib/block-supports 目录下的处理器实现。十一、源码地图与延伸阅读Spacer 块完整源码目录为 packages/block-library/src/spacer关键文件职责如下文件职责block.json块元数据名称、属性、支持能力、上下文声明index.js注册入口组装 settingsicon/transforms/edit/save/deprecatededit.jsx编辑器编辑组件拖拽调整、Flex 适配、状态同步save.jsx静态标记输出内联样式 aria-hiddencontrols.jsx侧栏设置面板Height/Width 输入、单位过滤、预设支持transforms.js转换为core/separatordeprecated.jsx旧版number 属性数据迁移与兼容渲染style.scss前端样式clear: botheditor.scss编辑器样式可选中兜底区域、选中高亮通过本文的梳理可以看到Spacer 虽然是一个“最小”的核心块却完整覆盖了 Gutenberg 块开发的典型要素JSON 元数据声明、静态渲染、上下文消费、拖拽交互、Flex 适配、块转换与历史迁移。对于想要深入理解块编辑器静态块开发模式的读者这份源码是一份简洁且完备的参考范本。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考