Title: Collapsi for the Block Editor
Author: DevMoaz
Published: <strong>2026 年 6 月 6 日</strong>
Last modified: 2026 年 6 月 6 日

---

搜索插件

![](https://ps.w.org/collapsi-for-block-editor/assets/banner-772x250.png?rev=3563432)

![](https://ps.w.org/collapsi-for-block-editor/assets/icon-256x256.png?rev=3563432)

# Collapsi for the Block Editor

 作者：[DevMoaz](https://profiles.wordpress.org/devmoaz/)

[下载](https://downloads.wordpress.org/plugin/collapsi-for-block-editor.1.0.0.zip)

 * [详情](https://cn.wordpress.org/plugins/collapsi-for-block-editor/#description)
 * [评价](https://cn.wordpress.org/plugins/collapsi-for-block-editor/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/collapsi-for-block-editor/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/collapsi-for-block-editor/#developers)

 [支持](https://wordpress.org/support/plugin/collapsi-for-block-editor/)

## 描述

**Collapsi for the Block Editor** adds an editor-only chevron toggle to every Gutenberg
block. Hover any top-level block, click the chevron, and the block tucks away into
a compact bar showing the block’s icon, title, and a short content preview (paragraph
text, image alt, “5 blocks”, and so on). Toggle it back open with the same chevron.

Built for the long pages and Site Editor templates where scrolling past 50 blocks
to find the one you want is the daily annoyance. Collapsi is **strictly editor-only**—
your published site is untouched, no extra CSS or JS ships to the frontend.

#### Why this plugin

 * **Stop scrolling endlessly.** Collapse the sections you’re not working on. Find
   the one you are in seconds.
 * **Works on every block.** Core, third-party, custom, ACF — anything Gutenberg
   renders, Collapsi can collapse.
 * **Survives reloads.** Collapse state is saved per post, per template, per browser.
   Come back tomorrow, your layout is where you left it.
 * **Per-instance opt-out.** Set “Never collapse this block” on a hero or any pinned
   block from the block settings menu.
 * **Keyboard shortcut.** `Alt+Shift+C` toggles all top-level blocks at once. Discoverable
   in WP’s shortcut help modal (`?`).
 * **No telemetry. No remote calls. No premium upsell.** Free, GPL, forever.

#### How it works

The plugin hooks `editor.BlockListBlock` with a higher-order component that wraps
every top-level block. State lives in a `@wordpress/data` store and persists to `
localStorage` keyed by either the block’s structural path (`"0.2.1"`) or its user-
set name from Gutenberg’s rename feature. A `PluginSidebar` exposes Collapse All/
Expand All / Focus Mode. Settings live at `Settings  Collapsi` and persist via the
REST API.

#### Compatibility

 * WordPress 6.5+ (iframed editor)
 * PHP 7.4+
 * Post Editor and Site Editor
 * Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

#### Not in scope

 * No Classic Editor support — Gutenberg only
 * No frontend collapse (this is an editor productivity plugin, not a UX framework)
 * No premium tier

### Development

Source code, issue tracker, and build instructions live at https://github.com/devMoaz/
collapsi-for-block-editor. The compiled assets in `build/` are produced by `@wordpress/
scripts` (webpack) from the `src/` directory in the GitHub repository. Run `npm 
install && npm run build` to reproduce.

## 屏幕截图

[⌊The collapsed bar showing icon, block title, and content preview. Multiple blocks
collapsed independently.⌉⌊The collapsed bar showing icon, block title, and content
preview. Multiple blocks collapsed independently.⌉[

The collapsed bar showing icon, block title, and content preview. Multiple blocks
collapsed independently.

[⌊Hovering a block reveals the chevron toggle in the top-left corner.⌉⌊Hovering 
a block reveals the chevron toggle in the top-left corner.⌉[

Hovering a block reveals the chevron toggle in the top-left corner.

[⌊The PluginSidebar with Collapse All, Expand All, and Focus Mode actions.⌉⌊The 
PluginSidebar with Collapse All, Expand All, and Focus Mode actions.⌉[

The PluginSidebar with Collapse All, Expand All, and Focus Mode actions.

[⌊The Settings page with three tabs: General, Behaviour, Appearance.⌉⌊The Settings
page with three tabs: General, Behaviour, Appearance.⌉[

The Settings page with three tabs: General, Behaviour, Appearance.

## 安装

#### Automatic

 1. Visit `Plugins  Add New` in your wp-admin
 2. Search for “Collapsi for the Block Editor”
 3. Click `Install Now` and then `Activate`

#### Manual

 1. Download the plugin .zip
 2. Visit `Plugins  Add New  Upload Plugin`
 3. Choose the .zip and click `Install Now`, then `Activate`

After activation, open any post in the editor and hover any top-level block — the
chevron appears top-left.

## 常见问题

### Does this affect my published site?

No. Collapsi injects nothing into the frontend. The CSS is enqueued via `enqueue_block_assets`
with an `is_admin()` guard, and the JS is enqueued via `enqueue_block_editor_assets`
which only fires inside the editor. Verified on every release.

### Where is the collapsed state stored?

In your browser’s localStorage, keyed by `collapsi:v1:post:<postId>`. It’s per-browser
and per-device — switching to a different machine or browser starts fresh. Collapsi
makes no server-side or remote calls to persist state.

### I renamed a block via Gutenberg’s “Rename” feature. Does the collapsed state survive reorder?

Yes. When you set a `metadata.name` via the block rename feature, the persistence
key becomes `name:<your-name>`. Reorder the block, the key still matches, the collapsed
state survives.

### Can I exclude specific blocks from collapsing?

Yes. Open any top-level block’s three-dot ⋮ menu and click “Never collapse this 
block”. The setting persists with the post.

### Does it work in the Site Editor?

Yes. Templates and template parts are treated the same as posts.

### How do I customize the accent color?

Settings  Collapsi  Appearance — change the accent color and bar title color, then
save.

### Will it slow down the editor with 100 blocks on a page?

No. Selector subscriptions are per-`clientId`, so a toggle on one block has no rendering
impact on the other 99. Profiled on a 100-block stress page: a single toggle re-
renders 1 wrapper.

### Does it support RTL languages?

Yes. The plugin enqueues `editor-rtl.css` automatically via `wp_style_add_data`.

### How do I theme the collapsed bar?

Both the accent (left border + icon) and the bar title color are user-configurable
under `Settings  Collapsi  Appearance`. The preview text harmonizes with the title
color automatically.

### What’s the keyboard shortcut?

Alt+Shift+C (Windows/Linux) or `Ctrl+Alt+C` (macOS). Toggles all top-level blocks.
Discoverable in WP’s shortcut help modal (`?` key inside the editor).

### How do I uninstall cleanly?

Just delete the plugin from `Plugins  Installed Plugins` — the plugin’s option is
removed automatically (single-site and multisite). The per-post collapse state lives
in your browser’s localStorage and stays there until you clear browser storage; 
it doesn’t affect anything else.

## 评价

此插件暂无评价。

## 贡献者及开发者

「Collapsi for the Block Editor」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ DevMoaz ](https://profiles.wordpress.org/devmoaz/)

[帮助将「Collapsi for the Block Editor」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/collapsi-for-block-editor)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/collapsi-for-block-editor/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/collapsi-for-block-editor/)，或通过
[RSS](https://plugins.trac.wordpress.org/log/collapsi-for-block-editor/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/collapsi-for-block-editor/)。

## 更新日志

#### 1.0.0

 * Initial public release.
 * HOC wraps top-level Gutenberg blocks with a chevron toggle.
 * Per-block-type content preview (paragraph, heading, image, list, group, columns,
   cover, buttons, quote, code, video, audio).
 * Collapse state persists to `localStorage`, keyed by structural path or `metadata.
   name`. Survives reorder when renamed.
 * PluginSidebar with Collapse All / Expand All / Focus Mode.
 * Keyboard shortcut `Alt+Shift+C` toggles all top-level blocks.
 * Per-instance “Never collapse this block” via the block settings menu.
 * Settings page at `Settings  Collapsi` (3 tabs: General, Behaviour, Appearance)—
   backed by REST.
 * Auto-collapse on editor load: off, or all top-level blocks.
 * Screen-reader announcements via `wp.a11y.speak()`.
 * RTL stylesheet and `prefers-reduced-motion` honored.
 * Multisite-aware uninstall.
 * Works in Post Editor and Site Editor.

## 额外信息

 *  版本 **1.0.0**
 *  最后更新：**5 天前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 6.5 或更高版本 **
 *  已测试的最高版本为 **7.0**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/collapsi-for-block-editor/)
 * 标签
 * [block-editor](https://cn.wordpress.org/plugins/tags/block-editor/)[collapse](https://cn.wordpress.org/plugins/tags/collapse/)
   [gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)[productivity](https://cn.wordpress.org/plugins/tags/productivity/)
   [ux](https://cn.wordpress.org/plugins/tags/ux/)
 *  [高级视图](https://cn.wordpress.org/plugins/collapsi-for-block-editor/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/collapsi-for-block-editor/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/collapsi-for-block-editor/reviews/)

## 贡献者

 *   [ DevMoaz ](https://profiles.wordpress.org/devmoaz/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/collapsi-for-block-editor/)