Title: Blocks CSS: Gutenberg/區塊編輯器的 CSS 編輯器
Author: Hardeep Asrani
Published: <strong>2019 年 2 月 14 日</strong>
Last modified: 2026 年 5 月 27 日

---

搜尋外掛

![](https://ps.w.org/blocks-css/assets/banner-772x250.jpg?rev=2030330)

![](https://ps.w.org/blocks-css/assets/icon-256x256.jpg?rev=2030330)

# Blocks CSS: Gutenberg/區塊編輯器的 CSS 編輯器

 由 [Hardeep Asrani](https://profiles.wordpress.org/hardeepasrani/) 開發

[下載](https://downloads.wordpress.org/plugin/blocks-css.3.1.11.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/blocks-css/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/blocks-css/#reviews)
 * [開發資訊](https://tw.wordpress.org/plugins/blocks-css/#developers)

 [技術支援](https://wordpress.org/support/plugin/blocks-css/)

## 外掛說明

Blocks CSS 能讓使用者直接在區塊編輯器/Gutenberg 中將自訂 CSS 加入區塊中。

這個外掛能將具備語法醒目提示功能的 CSS 編輯器加入 Gutenberg/區塊編輯器區塊中，使用者
便能為區塊自訂樣式。

這個外掛的程式碼是 https://github.com/Codeinwp/otter-blocks 可公開存取的其中一部分。

## 螢幕擷圖

 * [[
 * CSS 編輯器
 * [[
 * CSS 編輯器

## 適用於區塊編輯器

這個外掛提供 5 個可供 Gutenberg/區塊編輯器使用的區塊。

 *   Icon An inline SVG icon from the Lucide icon set.
 *   Text A rich text element with tag selection.
 *   Image A simple image element. Set via media library or direct URL.
 *   Link An anchor element with link picker and rich text.
 *   Box A generic wrapper element with tag selection and inner blocks. Supports
   details and summary tags for native disclosure widgets.

## 使用者評論

![](https://secure.gravatar.com/avatar/2e30329ab3220e0cf929fe14c6efe89bed6c64d148c584e805618d4425862c04?
s=60&d=retro&r=g)

### 󠀁[Indispensable!](https://wordpress.org/support/topic/indispensable-272/)󠁿

 [maltmann](https://profiles.wordpress.org/maltmann/) 2026 年 2 月 8 日 1 則留言

Works like a charm on any of my recent WP projects. [EDIT]I need to change my review.
On some setups, I get two CSS editors shown in the “Custom CSS” attribute panel,
and only contents of the second instance are getting saved.Problem:Two CodeMirror
editors are displayed in the Custom CSS panel of the Blocks CSS plugin instead of
one. Both editors are located in the same container. Assumed Root Cause:WordPress
enables React StrictMode by default in the Block Editor. React StrictMode runs useEffect
hooks twice to detect potential side effects. Analysis:The Blocks CSS plugin initializes
CodeMirror in a useEffect hook.Since this useEffect doesn’t have a cleanup function
that checks whether CodeMirror is already initialized, wp.CodeMirror() is called
again on every mount cycle. With StrictMode enabled, this means: twice on the same
DOM element. Probable Solution:The useEffect hook should implement a cleanup function
that prevents CodeMirror from being initialized multiple times on the same element.
Side Notes:This only happens in some of my setups. I couldn’t figure out any possibly
conflicting theme, plugin or code snippet. So I assume it might be something like
a timing issue. Conclusion:I won’t change the 5-star rating, because despite of 
this problem the plugin does its job. And I know how to handle this issue by a simple
CSS rule to hide all Block CSS CodeMirrors except the last one:#o-css-editor .CodeMirror:
not(:last-child) { display: none;}

![](https://secure.gravatar.com/avatar/6cbd96106c76dfd85e755f1aba9c463817d1b9d5dd74bb64b84dad2b458a790c?
s=60&d=retro&r=g)

### 󠀁[Отличный плагин](https://wordpress.org/support/topic/%d0%be%d1%82%d0%bb%d0%b8%d1%87%d0%bd%d1%8b%d0%b9-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-991/)󠁿

 [Сергей](https://profiles.wordpress.org/serzh82/) 2025 年 11 月 20 日 1 則留言

Отличный плагин

![](https://secure.gravatar.com/avatar/ff57a8df8c1ffea97f5c0992bed6943b19a831dbc8b3a0f9153dc4421fa1c4cc?
s=60&d=retro&r=g)

### 󠀁[Моя оценка: пять звезд](https://wordpress.org/support/topic/%d0%bc%d0%be%d1%8f-%d0%be%d1%86%d0%b5%d0%bd%d0%ba%d0%b0-%d0%bf%d1%8f%d1%82%d1%8c-%d0%b7%d0%b2%d0%b5%d0%b7%d0%b4/)󠁿

 [shooter604](https://profiles.wordpress.org/shooter604/) 2025 年 11 月 14 日 1 
則留言

Очень классные возможности! Пользуюсь постоянно!

![](https://secure.gravatar.com/avatar/5a04f5d680efd2cb46cc23d68d1e4d7c94f7e4e910dd0b60c54ebd63861e1785?
s=60&d=retro&r=g)

### 󠀁[The Other Review Titles Say It All](https://wordpress.org/support/topic/the-other-review-titles-say-it-all/)󠁿

 [someguy42](https://profiles.wordpress.org/someguy42/) 2024 年 7 月 24 日 1 則留言

“Essential, Useful Tool, Completes the Block Editor, Should be part of the core,”
The one thing they don’t mention is how quick and genuinely concerned the support
is.

![](https://secure.gravatar.com/avatar/fc490c401adf61289262192824d444a5f47939eb723b3ccc8ce7c73065cb7c0f?
s=60&d=retro&r=g)

### 󠀁[Simple and great plugin!](https://wordpress.org/support/topic/simple-and-great-plugin-36/)󠁿

 [Andreslav](https://profiles.wordpress.org/andreslav/) 2023 年 10 月 4 日 1 則留言

Does exactly what I need it to do.

![](https://secure.gravatar.com/avatar/947be7e3fe72d711a506739fa280376b9985c11cc9005f1b6ae2eedece99d515?
s=60&d=retro&r=g)

### 󠀁[Completes Block Editor](https://wordpress.org/support/topic/completes-block-editor/)󠁿

 [Masud Rana](https://profiles.wordpress.org/yeelloo/) 2023 年 9 月 26 日 1 則留言

Can’t think of Block Editor without this. Tiny powerful thing. Only thing I hate
in this plugin is the following line: $render_css = empty( $file_name ) || strpos(
$file_name, ‘post-v2’ ) === false; This means if you deactivate Otter, your content
might just break 🙁

 [ 閱讀全部 25 則使用者評論 ](https://wordpress.org/support/plugin/blocks-css/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Blocks CSS: Gutenberg/區塊編輯器的 CSS 編輯器〉的開發相關
工作。

參與者

 *   [ Hardeep Asrani ](https://profiles.wordpress.org/hardeepasrani/)
 *   [ Themeisle ](https://profiles.wordpress.org/themeisle/)

〈Blocks CSS: Gutenberg/區塊編輯器的 CSS 編輯器〉外掛目前已有 8 個本地化語言版本。
感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/blocks-css/contributors)
為這個外掛做出的貢獻。

[將〈Blocks CSS: Gutenberg/區塊編輯器的 CSS 編輯器〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/blocks-css)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/blocks-css/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/blocks-css/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/blocks-css/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/blocks-css/)。

## 變更記錄

You can check the changelog [here.](https://github.com/Codeinwp/otter-blocks/blob/master/CHANGELOG.md)

## 中繼資料

 *  版本 **3.1.11**
 *  最後更新 **3 天前**
 *  啟用安裝數 **5,000+**
 *  WordPress 版本需求 ** 6.2 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.0**
 *  PHP 版本需求 ** 5.4 或更新版本 **
 *  語言
 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/blocks-css/)、[Dutch](https://nl.wordpress.org/plugins/blocks-css/)、
   [Dutch (Belgium)](https://nl-be.wordpress.org/plugins/blocks-css/)、[English (US)](https://wordpress.org/plugins/blocks-css/)、
   [French (Canada)](https://fr-ca.wordpress.org/plugins/blocks-css/)、[Hebrew](https://he.wordpress.org/plugins/blocks-css/)、
   [Russian](https://ru.wordpress.org/plugins/blocks-css/)、[Spanish (Spain)](https://es.wordpress.org/plugins/blocks-css/)、
   及 [Swedish](https://sv.wordpress.org/plugins/blocks-css/).
 *  [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/blocks-css)
 * 標籤:
 * [block-editor](https://tw.wordpress.org/plugins/tags/block-editor/)[css editor](https://tw.wordpress.org/plugins/tags/css-editor/)
   [custom css](https://tw.wordpress.org/plugins/tags/custom-css/)[design](https://tw.wordpress.org/plugins/tags/design/)
   [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)
 *  [進階檢視](https://tw.wordpress.org/plugins/blocks-css/advanced/)

## 評分

 4.9 星，滿分為 5 星

 *  [  23 個 5 星使用者評論     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=5)
 *  [  1 個 4 星使用者評論     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=4)
 *  [  1 個 3 星使用者評論     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/blocks-css/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/blocks-css/reviews/)

## 參與者

 *   [ Hardeep Asrani ](https://profiles.wordpress.org/hardeepasrani/)
 *   [ Themeisle ](https://profiles.wordpress.org/themeisle/)

## 技術支援

最近 2 個月解決的問題:

     總計 2 個問題，已解決 2 個

 [檢視技術支援論壇](https://wordpress.org/support/plugin/blocks-css/)