前略、悠 さん

私はWordpressのダウングレードは一度も行ったことがないため、よくわからないのですが、現況では、Wordpressのダウングレードしかないのかなという気もします。

私はダウングレードの知識はないので、もし、行う場合は、自己責任でという書き込みになってしまいます。

昨日、ロコさんが有用な情報を書きこんでくださっています。

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

最近のWordPressのブロックエディタの仕様の変更は目まぐるしいので、WordPressのメジャーアップデートを行う際には、フォーラムの書き込みに注意しておいた方が良いかもしれません。

@leafytree

ご返信いただき、ありがとうございます。

実は私、ブログを始めて一か月もたっていない初心者なものでして....

ダウングレードはとりあえず保留にしておきます。

wordpressのアップデート前は注意しなければいけないと、肝に銘じておきます。

一応今のところ、

CoCoon設定中の、Gutenbergエディターを有効にするのチェックを外して、

旧エディター画面にしたらフォントサイズや画面の位置が改善されました。

とりあえずはこちらを使用していこうと思います。

自身の怪我のごたごたと、自社が決算期で忙しく、対応が後手後手になって申しわけないです。
とりあえず5.6で動作するように、応急的に修正してみました。
以下でアップデートするとどうなるのでしょうか。
------------------------------------------------
不具合があったので記述を削除
------------------------------------------------

ごめんなさい、修正後新たな問題点がありました。
再度修正にかかります。

こんばんは！

とりあえずの方法をシェアします。

お気づきの人は多いと思いますが、書かせてください。

１．右上の「縦の・３つ」をクリックします。

２．エディター　において、コードエディターを左クリックします。

３．もう一度、右上の「縦の・３つ」をクリックします。

４．エディター　において、ビジュアルエディターを左クリックします。

５．今までの編集画面に戻ります。

でも、面倒くさいですね。

その方法は以前、すでにろこさんが検証して書いてくださってますね。

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

@Surlofia

１つ訂正します。

手順３．は不要でした。飛ばしてください。

@stmap 様

ご指摘ありがとうございます。

その記事に気付いていませんでした。

WordPress 5.6アップデート後からクラシックエディターで記事の更新などをかけて違うページに移動しようとすると「このサイトを離れますか？」と質問されます。更新されているのですが必ず聞かれるので修正可能でしたらお願いしたいです。

とりあえず、暫定ですけど以前のように表示されるようになるようにだけ修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
本来ならReactを介してやるべきところなんでしょうが、まだjsでしています。
今回、wp.domReadyは一応読み込まれてはいるものの、wp.domReadyでは、スタイルが読み込まれなくなってしまったので、別のトリガーに変更してみました。
ただ、これで良いものかそうでないのか、いまいち自信はないです。

よろしければ、テスト環境で確認いただければ幸いです。

wp.data.subscribe(function () { ... }

コードを読んだだけですが、本来ReactのDOM生成・更新時に1度でいい操作がActionが起こる度に実行されるという点で、無駄な処理が何百、何千と増える問題はあると思います。

細かい説明は省きますが、

console.log('2');

の部分のログを追うと分かりやすいです。

固定されるべき処理を流動化することによってどういう問題が起こりうるのかまでは分からず、1度のDOM操作をStoreで繰り返す事例もちょっと調べた限りでは見当たらなかったので、テスト環境での確認は他の詳しい方を待とうと思います。

元々の処理がSOM操作によるものだったので、ReactでもDOM操作の方向で書き込んでいましたが、改めて考えるとテーマ用にラッパーコンポーネントを用意した方が実装しやすそうです。

そうなんですが、wp.domReadyでは、5.6からdom操作ができなくなってしまいました。
いろいろ検索して見たものの、良い方法も見つからず…。
とりあえず、Reactでwp.domReadyを直接読み込んでどうなるか試してみます。
https://developer.wordpress.org/block-editor/packages/packages-dom-ready/

説明を読むに、dom操作がよくないので、ラッパーコンポーネントでってことなんではないんでしょうか？

どうやらJQuery関連のキャッシュが不具合原因のようなので、スーパーリロード(キャッシュをクリアしてリロード)を行うと解決するのではないでしょうか。

いろいろ試してみた結果、WordPress5.5以前はwp.domReadyでDOMの構築後に実行すると、 document.getElementsByClassName("block-editor-writing-flow")とかクラスで取得できていた。けれど、WordPress5.6以降はできなくなったっぽい。
けれど5.6以降でも、 document.getElementById("wpbody")とかのようなものは取得できるので、wp.domReady直後には、.block-editor-writing-flowクラス要素とかは作成されてなくて、その後何らかの形で作られるのかもしれない。

実際、苦肉の策で、以下のように呼び出しを遅延させてみたら、DOM操作が出来るようになりました。
https://github.com/yhira/cocoon/commit/b1c74ff00f9f8ea6eb5956989fc7e82c74969bbb#diff-37315c9ffa302c6a7ad7eb5b914242fbeee070b2218b3a7d613ab2f7dd02f4d3R21

正直、作法的にもスマートな方法とは言えないけど、wp.data.subscribeを利用して、何百何千回と見出しと丸いよりはマシなような気がします。

説明を読むに、dom操作がよくないので、ラッパーコンポーネントでってことなんではないんでしょうか？

そうなんでしょうが、そのラッパーコンポーネントというのがどんな感じのものになるのか、今のところ全然僕には想像がついてないです。
どのようなものかご存知でしょうか？

@PCTL

エディターの不具合とは関係がないようでした。訂正してお詫び申し上げます。

とりあえず、修正版は現在の状態よりはマシなので一旦これでアップデートします。
その他の不具合は都度修正します。

投稿者:: @kazuaki

WordPress 5.6アップデート後からクラシックエディターで記事の更新などをかけて違うページに移動しようとすると「このサイトを離れますか？」と質問されます。更新されているのですが必ず聞かれるので修正可能でしたらお願いしたいです。

WordPress公式テーマでも確認してみましたが、確かにCocoonでしかならないですね。
しかし、最近そこらへんの変更はした覚えが全くないです。

後で原因を探ってみます。

そのラッパーコンポーネントというのがどんな感じのものになるのか

エディターのブロックコンポーネントをHOC上でラッパーする形です。

ラッパーコンポーネントに必要なクラス名を入れれば、今とはDOM構造が異なりますが、CSSの修正だけで対応でき、モードの切り替えや非同期処理によるDOM操作の不具合に悩まされることもありません。

FSEの実装で非同期処理が増えているのと、DOM構造のスリム化が進められているのとで、wp.domReadyで直接制御できる箇所はこれからも制限されていくと思います。

document.getElementById("wpbody")とかのようなものは取得できるので、wp.domReady直後には、.block-editor-writing-flowクラス要素とかは作成されてなくて、その後何らかの形で作られるのかもしれない。

については、wpbodyの部分はReactの仮想DOMではないからです。

また、以前にもアップデートによる修正の中で何度か提案しているのですが、ブロックエディターの設計はGutenberg以前のCSSコーディング規約に基づいて改善されているので、独自色の強いCocoonのCSSはどこかのタイミングですり合わせていかないと、CSS以外の部分でもメンテナンスの手間が増えていくのではないかと思います。

例えば、DOM操作によるクラス追加で"body"や"main"も追加していますが、投稿や固定ページのブロックエディターではCocoonで言うarticle要素（もしくはentry-contentクラス）以下を想定しているので、ラッパーコンポーネントと合わせてこの部分を調整するだけでも後々の負担は変わってくるかと。

@lococo 様

私は、チンプンカンプンですが、素晴らしい技術力をお持ちと推察します。

もし、あなたが、サンプルコードを書けば、採用されるのでは？

お礼は、コード内に、

＃Special thanks for these lines, Lococo !

と明記されるかどうかですけれど・・・

せっかくの才能と技術が形にならないことが、とても、もったいない気がします。

エディターのブロックコンポーネントをHOC上でラッパーする形です。

ありがとうございます！
早速やってみます。

また、以前にもアップデートによる修正の中で何度か提案しているのですが、ブロックエディターの設計はGutenberg以前のCSSコーディング規約に基づいて改善されているので、独自色の強いCocoonのCSSはどこかのタイミングですり合わせていかないと、CSS以外の部分でもメンテナンスの手間が増えていくのではないかと思います。

例えば、DOM操作によるクラス追加で"body"や"main"も追加していますが、投稿や固定ページのブロックエディターではCocoonで言うarticle要素（もしくはentry-contentクラス）以下を想定しているので、ラッパーコンポーネントと合わせてこの部分を調整するだけでも後々の負担は変わってくるかと。

承知しました。こちらもブランチを切ってすり合わせていこうと思います。

@Surlofia
PHPをできる人は大量にいても、Gutenbergに関してここまで詳しい方は、そう多くはないと思います。
なので、助言をいただけるだけでもありがたすぎます。
問題は、それを形にできていない僕の未熟さにあります。
最近ようやく、生活的にも落ち着いてきて作業時間も少しは取れるようになってきたので、出来る限りやってみたいと思います。

@yhira 様
よろしくお願いいたします。

@yhira

投稿者:: @kazuaki

WordPress 5.6アップデート後からクラシックエディターで記事の更新などをかけて違うページに移動しようとすると「このサイトを離れますか？」と質問されます。更新されているのですが必ず聞かれるので修正可能でしたらお願いしたいです。

ありがとうございます。

Cocoonバージョン: 2.2.5.1にアップデートしたのですが、クラシックエディターで記事のスペースやデザイン感覚が以前とだいぶ異なります。少し記事が書きづらいです。もしこちらも合わせて直せればお願いしたいです。

@Surlofia さん、僕はまだブロックの作成を始めたばかりなんですけど、そんな僕でもろこさんの説明で理解できました。

公式ドキュメントを読んでいれば理解できます。

サンプルコードをと簡単におっしゃいますけど、ブロックのコードはそのままだとWordPressで動作しません。

コードを書くだけじゃなくて、コードがちゃんと動作するか試すための準備をするのがすごく大変なんです。

その大変さを知っている身からすると、理解しようと努力もしていないあなたのその発言は普通に失礼だと思います。

投稿者:: @kazuaki

Cocoonバージョン: 2.2.5.1にアップデートしたのですが、クラシックエディターで記事のスペースやデザイン感覚が以前とだいぶ異なります。少し記事が書きづらいです。もしこちらも合わせて直せればお願いしたいです。

よろしければ、おかしな部分のスクリーンショットをいただけますでしょうか。
Cocoon設定の保存ボタンを押しても同じような状態でしょうか。

@yhira

横からですみません。
私も@kazuakiさんと同じような現象が発生しているため、
スクリーンショットを貼らせて頂きます。

具体的には、上部に貼っている画像の細かなズレ、
ボックスの付箋風のスタイルや見出しにおける上下の余白が無くなっているといった状況になっています。

追記

cocoonのバージョンを2.2.5.1から以前使っていた2.2.4にダウングレードしたところ、
旧エディタにおける表示のズレは状況が改善しました。

（wordpressのバージョンは5.6で適応済みです）

@yhira

少し意味合いが違ったかもしれません。クラシックエディターで記事を作成していると今までと違って記入しているスペースの間隔がなくなっています。スクリーンショットを見ておわかりいただけるか不安ですがいかがでしょうか？

コメント失礼します。

同じ状況か分かりませんが、私もWordPress5.6、Cocoon2.2.5.1に更新時、編集画面の改行(Pタグ)が詰まって表示されるようになりましたが、私の場合は『Cocoon設定、エディター、Gutenbergエディターを有効にするをオフ、オン』する事で直りました。

あくまでも一時的な対処方法です。

①投稿画面右上の『…』をクリック
②コードエディターをクリック
③ビジュアルエディタをクリック

少し手間だけど記事書けるようになりました。

リライトもできなかったりで僕も困っていたので、誰かのお役に立てれば幸いです。

コメント失礼します。

わいひら様の言っているとおり、一度コクーン設定を保存すると直ると思います。

私も同じ現象でしたが、すぐに治りました。

クラシックエディターの余白については、@bucho さんも書かれたように、以下を試してみられましたでしょうか。
そのことについて何も書かれていないので、一応確認のため質問です。

投稿者:: @yhira

Cocoon設定の保存ボタンを押しても同じような状態でしょうか。

投稿者:: @kazuaki

WordPress 5.6アップデート後からクラシックエディターで記事の更新などをかけて違うページに移動しようとすると「このサイトを離れますか？」と質問されます。更新されているのですが必ず聞かれるので修正可能でしたらお願いしたいです。

こちらについては開発版で修正してみました。

その代わり、抜粋エリアがビジュアルエディターにならなくなりますが、この機能はほとんどの方が利用されていないと思うので問題ないのかなと。

@yhira

クラシックエディタの空白については、
わいらひさんの言う通り、cocoonの設定を保存しなおしたら解決しました。
ありがとうございます。

ただエディタの最上位に画像を載せていると、エディタとツールバーの境目に余白が無い感じに。
また画像を複数並べていると、１つ目の画像だけ余白が無くなっています。
（エディタとツールバーの境目の余白に関しては、改行を１つ入れれば良いだけなので、報告までに）

クラシックエディターの開発版も余白を調整しておきました。
https://github.com/yhira/cocoon

@yhira

わいらひ様
ケガの影響があるにもかかわらず、お早い対応ありがとうございます。

ご確認いただきありがとうございます。

横から失礼いたします。

私もエディタで左寄りになってしまう現象に加えて、見出しのスタイルが適用されない状況になっております。

（プレビューでは見出しのスタイルが反映されております）

本スレッドで出ている対応を試しましましたが、改善に至りませんでした。

＜試したこと＞

１　Cocoon設定の保存

２　①投稿画面右上の『…』をクリック
　　②コードエディターをクリック
　　③ビジュアルエディタをクリック

　　↑更新前までは上記で対応しておりました。

３　Cocoon設定、エディター、Gutenbergエディターを有効にするをオフ、オン

解決方法ご教示いただけますと幸いです。

----------------------------------------------

コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-modernblack/style.css
WordPressバージョン：5.6
PHPバージョン：7.3.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.5.4
カテゴリ数：13
タグ数：56
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
style.cssサイズ：5473バイト
functions.phpサイズ：551バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2020/04/TABI-SPACE.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Easy FancyBox 1.8.18
EWWW Image Optimizer 5.8.2
Google XML Sitemaps 4.1.1
Gutenberg 9.6.2
Jetpack by WordPress.com 9.2.1
Rinker 1.7.7
Site Kit by Google 1.23.0
WP Multibyte Patch 2.9
Yoast Duplicate Post 3.2.6
----------------------------------------------

連投失礼いたします。

上記プレビューでは下記のように表示されております。

よろしくお願いいたします。

TABISPACE様、Gutenbergプラグインは開発者向けの先行版なので無効化してください。

ろこ様

早々にありがとうございます！

Gutenbergプラグインを無効化したら改善しました！

大変助かりました。ありがとうございます。