Move To機能によるスタイル崩れの不具合 - 開発者向けフォーラム https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/ Cocoon ディスカッション掲示板 ja Sun, 11 Oct 2026 12:32:50 +0000 wpForo 60 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-42461 Wed, 09 Dec 2020 13:22:16 +0000 本トピックの不具合は、

WordPress 5.6アップデートに伴うエディター画面の不具合

と同じ内容なので、タイトル的にも上記のトピックに統合し、本トピックは閉じていただいて構いません。

]]> 開発者向けフォーラム ろこ https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-42461 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40090 Mon, 21 Sep 2020 11:20:18 +0000 ありがとうございます。
確認してみます。

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40090 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40024 Sat, 19 Sep 2020 13:40:24 +0000 ReactからDOMを操作することはできます。

クラス名を挿入したり、ルートコンテナ要素をラップする要素を追加したりなど、JS/JQueryでやっていたことは大抵できると思います。

今のようにReact外でJSを用いるのであれば、ReactからDOMの受け渡しを行い、その中に組み込む必要があります。

 

その他の方法としては、なるべくエディターとページ表示上とのスタイルを摺り合わせ、どうしても一致させられない部分だけ動的に出力（またはエディタースタイルに別途記述）するなどが考えられます。

 

ちなみに、Gutenbergのコードでクラス追加できるポイントがないか探しましたが、コードを読んだ範囲では現状用意されていないようでした。

]]> 開発者向けフォーラム ろこ https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40024 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40017 Sat, 19 Sep 2020 11:50:26 +0000 そうだったんですね。
だとしたら、解決策は今のところ全然わかってません。
React側で、何かしら対応する手法が用意されているのでしょうか。

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-40017 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39975 Fri, 18 Sep 2020 13:56:13 +0000 その方法は当トピックを立ち上げた頃に確認済みなのですが、数バージョン前からGutenberg側の実行タイミングが変わったらしく、div.block-editor-writing-flowより外側にある要素でも同様にクラス名が挿入されない状態になりました。

例えば、ビジュアルエディター⇒コードエディター⇒ビジュアルエディターと切り替えたときはDOMの再構築によりCocoonのgutenberg.jsも動作していることから、本件は現在JSの実行タイミングによる問題となっており、

JSで強制的にクラスを挿入すること自体があまり良くない方法なのかもしれません。

https://wp-cocoon.com/community/postid/39917/

と考えました。

Reactに対してReactを介さずにJSで操作しようとするのは、問題が複雑化しそうです。

]]> 開発者向けフォーラム ろこ https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39975 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39974 Fri, 18 Sep 2020 13:30:44 +0000 今思いついたんですが、div.block-editor-writing-flowのclass名が変更されてしまうんだから、そのラップ要素のdiv.block-editor__typewriterにclassを割り当てるという方向でいけるのかなと思いました。
https://github.com/yhira/cocoon/commit/978513e993e2d918e03f31c917fdb9e9d85c7089
この方法だと、スタイル問題は起きないように思います。
この対処法の場合、他に不具合等ありますでしょうか。

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39974 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39917 Wed, 16 Sep 2020 13:46:28 +0000 Gutenbergの少し前のバージョン（ver8.6～ver8.7あたり？）から初期状態でクラス名が追加できなくなり、ver9.0となった現在もCocoonでの動作確認等がきちんとできない状態です。

この仕様だと、JSで強制的にクラスを挿入すること自体があまり良くない方法なのかもしれません。

 

加えて、WordPress5.5の時点でも移動機能だけでなく、選択時にも同様の問題が生じています。

追加で分かった範囲の報告をまとめると、

  • （WordPress5.5）モード全般で不具合が生じている。
  • （WordPress5.6）初期状態でも不具合が生じることになる？

といった感じです。

]]> 開発者向けフォーラム ろこ https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-39917 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38141 Mon, 10 Aug 2020 11:30:42 +0000 移動メニューを選択することで以下のようなクラス名になってしまうんですね。どうしたものか…。
これはすぐには解決方法が思いつかないので、調べてみます。

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38141 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38140 Mon, 10 Aug 2020 11:29:28 +0000
投稿者:: @lococo

原因はgutenberg.js#L12で挿入するクラスが当機能によってリセットされるためです。

動作確認してみました。
これは、gutenberg.js#L12で挿入していた以下の部分が

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38140 RE: Move To機能によるスタイル崩れの不具合 https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38138 Mon, 10 Aug 2020 11:12:34 +0000 https://wp-cocoon.com/community/postid/37508/

”Move To”により、段落ブロックのスタイルオプションは廃止＆グループブロックで統一し、スタイル指定をインナーコンテナ側に寄せた方がよさそうです。

コンポーネントを構成するマークアップの一番外側にあるタグは、余白等のアウトラインを決める程度に留める設計が好ましいということになるのかと。

（添付画像は上がCocoonのグループブロックや段落ブロックでスタイル設定時に”Move To”を選択した場合、下が私のグループブロックでスタイル設定時に”Move To”を選択した場合）
https://wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1595743776-iconbox.png

]]> 開発者向けフォーラム わいひら https://wp-cocoon.com/community/developer/move-to%e6%a9%9f%e8%83%bd%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e5%b4%a9%e3%82%8c%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-38138