🧩 大绵羊折叠框：专为 Gutenberg 打造的内容折叠区块

大绵羊折叠框是一款轻量、灵活、可自定义的 Gutenberg 区块插件，专注于改善 WordPress 长篇内容的展示方式。无论是 FAQ、产品介绍、教程说明，还是活动细则展示，它都能提供简洁、优雅的折叠结构。

• 作者网站：大绵羊折叠框插件(开源)

✨ 核心特性

• ✅ 一键折叠 / 展开：点击标题即可展开或收起内容，交互自然，支持默认展开状态设置。
• 🎨 个性化配色：内置4种温和配色，支持自由切换背景色，适配任意主题风格。
• 💎 样式隔离：编辑器与前端样式模块化，兼容性强，不污染其他样式。
• 🧱 结构清晰：区块属性配置简洁明了，代码可读性强，便于扩展开发。

⚙️ 技术实现

• 使用 registerBlockType 注册区块，包含 title, content, isOpen, headerColor 等属性。
• 借助 RichText 实现可编辑标题与内容输入，InspectorControls 提供颜色选择面板。
• isOpen 属性控制初始展开状态，保存后前台状态保留。
• 前后端样式分离：editor.css & style.css，维护更便捷。

📚 使用场景示例

• 常见问题（FAQ）内容模块
• 教程或文档的分步解析
• 商品参数折叠展示
• 活动参与说明/服务条款模块

🚀 使用指南

1. 打开 Gutenberg 编辑器，插入“大绵羊折叠框”；
2. 输入标题与正文内容；
3. 在右侧设置面板中选择背景颜色；
4. 预览并保存，享受交互式阅读体验！

🔍 实用建议

• ✅ 移动端优化：标题建议控制在20字以内，避免视觉断行；
• ✅ 配色建议：深色文字搭配浅色背景，提升可读性；
• ✅ 性能提示：单页建议不超过20个折叠块，保持加载流畅；
• ✅ SEO 友好：所有内容均可被搜索引擎完整抓取；
• ✅ 兼容性：已通过 7B2 主题测试，其它主题建议自行适配验证。

📅 未来版本规划（v1.1）

• 🔧 添加自定义图标支持
• ⏱️ 动画展开时间调节功能
• 🔄 AJAX 异步加载折叠内容

作者联系方式

• 作者网站：大绵羊博客
• QQ群：947328468