Title: Blocks CSS: CSS Editor for Gutenberg Blocks
Author: Hardeep Asrani
Published: <strong>14 februari 2019</strong>
Last modified: 1 april 2026

---

Plugins zoeken

![](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: CSS Editor for Gutenberg Blocks

 Door [Hardeep Asrani](https://profiles.wordpress.org/hardeepasrani/)

[Download](https://downloads.wordpress.org/plugin/blocks-css.3.1.8.zip)

 * [Details](https://nl.wordpress.org/plugins/blocks-css/#description)
 * [Beoordelingen](https://nl.wordpress.org/plugins/blocks-css/#reviews)
 * [Ontwikkeling](https://nl.wordpress.org/plugins/blocks-css/#developers)

 [Ondersteuning](https://wordpress.org/support/plugin/blocks-css/)

## Beschrijving

Blocks CSS maakt het je mogelijk om aangepaste CSS aan je blokken toe te voegen,
rechtstreeks vanuit de blok-editor (Gutenberg).

Het voegt een syntax markering CSS editor toe waar je extra CSS kunt toevoegen aan
je Gutenberg blokken om ze te stylen zoals je wilt.

Alle code en bronnen voor deze plugin zijn openbaar beschikbaar als onderdeel van
https://github.com/Codeinwp/otter-blocks.

## Schermafbeeldingen

 * [[
 * CSS editor
 * [[
 * CSS editor

## Blokken

Deze plugin heeft 5 blokken.

 *   Text A rich text element with tag selection.
 *   Icon An inline SVG icon from the Lucide icon set.
 *   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.
 *   Image A simple image element. Set via media library or direct URL.

## Beoordelingen

![](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/) 8 februari 2026 1 reactie

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/) 20 november 2025 1 reactie

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

![](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/) 14 november 2025 1 reactie

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

![](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/) 24 juli 2024 1 reactie

“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/) 4 oktober 2023 1 reactie

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/) 26 september 2023 1 reactie

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 🙁

 [ Lees alle 25 beoordelingen ](https://wordpress.org/support/plugin/blocks-css/reviews/)

## Bijdragers & ontwikkelaars

“Blocks CSS: CSS Editor for Gutenberg Blocks” is open source software. De volgende
personen hebben bijgedragen aan deze plugin.

Bijdragers

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

“Blocks CSS: CSS Editor for Gutenberg Blocks” is vertaald in 8 localen. Dank voor
[de vertalers](https://translate.wordpress.org/projects/wp-plugins/blocks-css/contributors)
voor hun bijdragen.

[Vertaal “Blocks CSS: CSS Editor for Gutenberg Blocks” in je eigen taal.](https://translate.wordpress.org/projects/wp-plugins/blocks-css)

### Interesse in ontwikkeling?

[Bekijk de code](https://plugins.trac.wordpress.org/browser/blocks-css/), haal de
[SVN repository](https://plugins.svn.wordpress.org/blocks-css/) op, of abonneer 
je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/blocks-css/) via
[RSS](https://plugins.trac.wordpress.org/log/blocks-css/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

Je kan de wijzigingslog [hier](https://github.com/Codeinwp/otter-blocks/blob/master/CHANGELOG.md)
bekijken.

## Meta

 *  Versie **3.1.8**
 *  Laatst geüpdatet **2 weken geleden**
 *  Actieve installaties **5.000+**
 *  WordPress versie ** 6.2 of nieuwer **
 *  Getest t/m **6.9.4**
 *  PHP versie ** 5.4 of nieuwer **
 *  Talen
 * [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/)
   en [Swedish](https://sv.wordpress.org/plugins/blocks-css/).
 *  [Vertaal in je eigen taal](https://translate.wordpress.org/projects/wp-plugins/blocks-css)
 * Tags
 * [block](https://nl.wordpress.org/plugins/tags/block/)[css](https://nl.wordpress.org/plugins/tags/css/)
   [css editor](https://nl.wordpress.org/plugins/tags/css-editor/)[gutenberg](https://nl.wordpress.org/plugins/tags/gutenberg/)
 *  [Geavanceerde weergave](https://nl.wordpress.org/plugins/blocks-css/advanced/)

## Waarderingen

 4.9 van 5 sterren.

 *  [  23 5 sterren beoordelingen     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=5)
 *  [  1 4 ster beoordeling     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=4)
 *  [  1 3 ster beoordeling     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=3)
 *  [  0 2 sterren beoordelingen     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=2)
 *  [  0 1 sterren beoordelingen     ](https://wordpress.org/support/plugin/blocks-css/reviews/?filter=1)

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

[Bekijk alle beoordelingen](https://wordpress.org/support/plugin/blocks-css/reviews/)

## Bijdragers

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

## Ondersteuning

Iets te melden? Hulp nodig?

 [Het supportforum bekijken](https://wordpress.org/support/plugin/blocks-css/)