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;}
« 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.
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 🙁
