Indispensable!

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;
}


• This topic was modified 1 week, 3 days ago by maltmann. Reason: Revision after issues in some setups