大绵羊折叠框：Gutenberg 区块的用法、属性与实现边界

原作者：大绵羊。原文：大绵羊折叠框插件（开源），页面显示发表于 2025 年 4 月 14 日，最后更新于 2026 年 10 月 4 日。本文经授权核查整理，并把公开源码与说明不一致之处单独标出。

长文里的 FAQ、商品参数、教程答案和活动细则，常常适合按标题折叠展示。大绵羊折叠框是为 WordPress Gutenberg 编辑器开发的内容区块：编辑者填写标题和正文，选择标题背景色，再预览展开、收起的效果。原作者明确说，当时只测试了 7B2 主题，其他主题尚未测试；本文也没有进行安装或兼容性实测。

区块提供什么

原文介绍的交互包括可视化开关、展开时的上箭头和收起时的下箭头，以及编辑器中的即时预览。颜色提供天蓝、浅绿、粉红、米黄四种方案，也可以通过颜色选择器设定其他颜色。编辑器样式与前台样式分别维护，方便适配主题，但这种文件划分本身不构成“兼容所有主题”的证明。

作者把“点击标题区域切换状态”列为功能。当前公开 src/frontend.js 的监听器实际绑定在 .dmy-fold-accordion-toggle 按钮上，因此具体可点击范围应以安装包的实际版本为准，不能仅凭文章描述推断。

四项属性与 edit / save 的分工

文章给出的架构片段如下。edit 和 save 的函数体被原作者省略，这是一段结构示意，不是复制后即可运行的完整区块。

registerBlockType('dmy/accordion', {
    attributes: {
        title: { type: 'string' },
        content: { type: 'string' },
        isOpen: { type: 'boolean' },
        headerColor: { type: 'string' }
    },
    edit: ({ attributes, setAttributes }) => {
        // 原文省略：编辑器逻辑
    },
    save: ({ attributes }) => {
        // 原文省略：前端保存逻辑
    }
});

title 保存标题，content 保存正文，isOpen 表示展开状态，headerColor 保存背景色。公开源码使用 RichText 输入内容，使用 InspectorControls 和 ColorPalette 显示侧栏配置；setAttributes 将编辑操作写回属性。

原文把 isOpen 描述为可持久化的展开状态。核查时发现：公开 src/index.js 的 edit 会按该值增加 is-open 类，但 save 仅解构 title、content、headerColor，输出的根元素也没有依照 isOpen 增加状态类。因此“编辑器状态会成为前台初始展开状态”不能视为这份源码已经实现的保证。修复时还必须处理旧区块保存标记的兼容性，不能只改一个 class 就假定已完成迁移。

原文的样式片段展示了编辑器和前台样式的分工：

/* editor.css */
.accordion.is-open { transition: all 0.3s ease; }

/* style.css */
.accordion-header { padding: 15px; border-radius: 5px; }

这也是说明性片段。公开源码使用带 dmy-fold- 前缀的类名；覆盖样式时需要核对实际 DOM 与 CSS，不能假定短类名会生效。若要新增动画，宜仅过渡实际变化的属性，并兼顾减少动态效果设置。

开发环境与编辑流程

原文写了“通过 @wordpress/scripts 创建区块”，随后给出 wp-scripts start。这句话需要修正：根据 WordPress 官方 scripts 文档，start 是开发构建与文件监听命令，修改源码后重新构建；它不负责从零生成一个区块项目。

仓库已有 package.json，其中 start 对应 wp-scripts start，build 对应 wp-scripts build。只有在检查可信来源、依赖与本机兼容性，并完成项目依赖安装后，才考虑在隔离开发目录运行这些脚本。构建工具及依赖安装能够执行代码，本文没有运行它们。

{
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  }
}

原文的编辑步骤是：插入“大绵羊折叠框”区块，填写标题与正文；标题支持加粗、斜体等格式；在右侧面板选择标题背景色；最后预览交互并保存。适合的使用场景包括知识库中的细节层级、电商页面的参数、课堂习题的答案解析，以及活动页面的分项规则。

可访问性与源码核查

当前公开前台脚本有一处明确的状态取反问题：

// 原源码：classList.toggle 返回切换后的状态，前面的 ! 又取反一次
const isNowOpen = !accordion.classList.toggle('is-open');
this.setAttribute('aria-expanded', isNowOpen);

当根元素刚加入 is-open 时，classList.toggle 返回 true，取反后却把 aria-expanded 写成 false。这会让辅助技术读到的展开状态与 CSS 状态相反。以下是仅针对这一行逻辑的编辑修订，未执行测试，也不是完整的可访问性补丁：

// 编者修订：去掉多余的取反
const isNowOpen = accordion.classList.toggle('is-open');
this.setAttribute('aria-expanded', String(isNowOpen));

完整修订还应在初始 HTML 上提供正确的展开状态、可理解的按钮名称、面板唯一 ID 与 aria-controls 关联，并检查键盘焦点、Enter/Space 操作以及隐藏面板的可访问性。源码中的图标按钮没有显式文本标签；对 SVG 元素的访问也没有空值保护。静态阅读没有确认远程代码执行或硬编码秘密，但这不等于插件没有其他漏洞。富文本保存仍需要结合 WordPress 用户权限、HTML 过滤及安装包版本做安全验证。

如何理解原作者的测试建议

原文建议标题尽量在 20 字以内、浅色背景搭配深色文字、单页折叠区块不超过 20 个。这些是设计经验，不能替代对小屏长标题、对比度、实际内容规模与加载性能的测量。原文称内容能被完整抓取，但搜索引擎是否抓取、索引和展示仍受页面输出、脚本、抓取策略等因素影响，不能当作 SEO 保证。

作者建议通过子主题 style.css 覆盖样式，或利用区块过滤器扩展颜色选项。二次开发时应记录 WordPress、主题、插件和构建依赖的实际版本，尤其要验收编辑后重新打开、保存标记一致性、前台初始状态及主题 CSS 冲突。

版本信息也存在差异：文章提及 v1.0.1，并把自定义图标、动画速度和 AJAX 内容加载列为 v1.1 的规划；读取到的仓库 block.php 标注 1.1.1，而 package.json 是 1.0.0。这些字段不能合并成一条已经验证的发布历史，使用者应固定所选提交或安装包。仓库的 test 脚本仅输出“no test specified”并退出，不能据此称项目通过自动化测试。

来源与权利说明

文章与插件归属大绵羊 / DMY，公开项目为 dmmyblog/dmy-fold。原站资源区仍有登录与评论下载门槛；本文没有绕过，也未取得该下载包。代码核对使用公开仓库的 编辑器源码、前台源码、插件入口及 包元数据。包元数据声明 ISC；本稿不附完整插件分发包，也不把包字段扩张为文章或第三方图片的许可证。

原文第五张图片含 ©2017 Soviet games / Love, Money Rock’n’Roll / Backgrounds art by ArseniXC 署名；本稿使用独立绘制的技术图，没有复制、裁去或修改这张第三方作品的署名。本文仅进行静态核查，未安装插件、构建代码或复现兼容性与性能结论。