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://tw.wordpress.org/plugins/collapsi-for-block-editor/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/collapsi-for-block-editor/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/collapsi-for-block-editor/#installation)
 * [開發資訊](https://tw.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**
 *  最後更新 **4 天前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.5 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.0**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/collapsi-for-block-editor/)
 * 標籤:
 * [block-editor](https://tw.wordpress.org/plugins/tags/block-editor/)[collapse](https://tw.wordpress.org/plugins/tags/collapse/)
   [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)[productivity](https://tw.wordpress.org/plugins/tags/productivity/)
   [ux](https://tw.wordpress.org/plugins/tags/ux/)
 *  [進階檢視](https://tw.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/)