{"id":18739971,"date":"2025-12-02T20:33:00","date_gmt":"2025-12-02T20:33:00","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/indispensable-272\/"},"modified":"2026-02-08T23:19:56","modified_gmt":"2026-02-08T23:19:56","slug":"indispensable-272","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/indispensable-272\/","title":{"rendered":"Indispensable!"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Works like a charm on any of my recent WP projects.<br \/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>[EDIT]<\/strong><br \/>I need to change my review.<br \/>On some setups, I get two CSS editors shown in the &#8220;Custom CSS&#8221; attribute panel, and only contents of the second instance are getting saved.<br \/><br \/><strong>Problem:<\/strong><br \/>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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Assumed Root Cause:<\/strong><br \/>WordPress enables React StrictMode by default in the Block Editor. <br \/>React StrictMode runs useEffect hooks twice to detect potential side effects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Analysis:<\/strong><br \/>The Blocks CSS plugin initializes CodeMirror in a useEffect hook.<br \/>Since this useEffect doesn&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Probable Solution:<\/strong><br \/>The useEffect hook should implement a cleanup function that prevents CodeMirror from being initialized multiple times on the same element.<br \/><br \/><strong>Side Notes:<br \/><\/strong>This only happens in some of my setups. <br \/>I couldn&#8217;t figure out any possibly conflicting theme, plugin or code snippet. So I assume it might be something like a timing issue.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Conclusion:<br \/><\/strong>I won&#8217;t change the 5-star rating, because despite of this problem the plugin does its job. <br \/>And I know how to handle this issue by a simple CSS rule to hide all Block CSS CodeMirrors except the last one:<br \/><br \/><code>#o-css-editor .CodeMirror:not(:last-child) {<br \/>  display: none;<br \/>}<br \/><\/code><\/p>\n","protected":false},"template":"","class_list":["post-18739971","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18739971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18739971\/revisions"}],"predecessor-version":[{"id":18814565,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18739971\/revisions\/18814565"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=18739971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}