「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

WordPress 5.6アップデート...
 
共有:
通知
すべてクリア

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

42 投稿
8 ユーザー
49 Likes
13.4 K 表示
 
(@悠)
New Member
結合: 3年前
投稿: 3
Topic starter  

いつもCocoonを利用させていただいております。

今回Wordpress 5.6にアップデートした後、エディター画面が5.5の時までのように中央になく、

画面左端に固定されてしまいます。

また、初期フォントサイズも変わってしまっています。

投稿した記事やプレビューでの表示は以前のままです。

Cocoon設定のエディタからエディタのテーマ適用を外すと中央に戻りました。

この現象の解決法などはありますでしょうか

どうぞよろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

前略、悠 さん

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

 

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

 

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

 

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

 

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

This post was modified 3年前 by リフィトリー

   
 
(@悠)
New Member
結合: 3年前
投稿: 3
Topic starter  

@leafytree

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

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

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

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

一応今のところ、

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

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
Surlofia reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
Surlofia reacted
(@Surlofia)
Active Member
結合: 4年前
投稿: 7
 

こんばんは!

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

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

1.右上の「縦の・3つ」をクリックします。

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

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

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

5.今までの編集画面に戻ります。

 

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


   
Surlofia reacted
(@stmap)
Active Member Registered
結合: 3年前
投稿: 11
 

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

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


   
Surlofia reacted
(@Surlofia)
Active Member
結合: 4年前
投稿: 7
 

@Surlofia

1つ訂正します。

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

 


   
Surlofia reacted
(@Surlofia)
Active Member
結合: 4年前
投稿: 7
 

@stmap

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

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


   
Surlofia reacted
(@kazuaki)
Estimable Member Registered
結合: 6年前
投稿: 192
 

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


   
Surlofia reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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

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

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


   
Surlofia reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 6年前
投稿: 830
 
wp.data.subscribe(function () { ... }

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

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

console.log('2');

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

 

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

 

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


   
ichigo, mirutana, Surlofia and 1 people reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
Surlofia reacted
(@stmap)
Active Member Registered
結合: 3年前
投稿: 11
 

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


   
Surlofia reacted
 PCTL
(@PCTL)
New Member
結合: 3年前
投稿: 2
 

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


   
Surlofia reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

いろいろ試してみた結果、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操作がよくないので、ラッパーコンポーネントでってことなんではないんでしょうか?

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


   
ichigo and Surlofia reacted
 PCTL
(@PCTL)
New Member
結合: 3年前
投稿: 2
 

@PCTL

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
Surlofia reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 
投稿者:: @kazuaki

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

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

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


   
Surlofia reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 6年前
投稿: 830
 

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

エディターのブロックコンポーネントを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クラス)以下を想定しているので、ラッパーコンポーネントと合わせてこの部分を調整するだけでも後々の負担は変わってくるかと。


   
ichigo, mirutana, Surlofia and 2 people reacted
(@Surlofia)
Active Member
結合: 4年前
投稿: 7
 

@lococo

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

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

お礼は、コード内に、

#Special thanks for these lines, Lococo !

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

 

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

 


   
Surlofia reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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

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

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

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

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

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


   
ichigo and Surlofia reacted
(@Surlofia)
Active Member
結合: 4年前
投稿: 7
 

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

 


   
Surlofia reacted
(@kazuaki)
Estimable Member Registered
結合: 6年前
投稿: 192
 

@yhira

投稿者:: @kazuaki

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

ありがとうございます。

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


   
Surlofia reacted
(@stmap)
Active Member Registered
結合: 3年前
投稿: 11
 

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

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

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

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 
投稿者:: @kazuaki

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

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


   
Surlofia reacted
(@にゃむ)
Active Member
結合: 5年前
投稿: 7
 

@yhira

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

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


   
Surlofia reacted
(@にゃむ)
Active Member
結合: 5年前
投稿: 7
 

追記

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

(wordpressのバージョンは5.6で適応済みです)


   
Surlofia reacted
(@kazuaki)
Estimable Member Registered
結合: 6年前
投稿: 192
 

@yhira

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


   
Surlofia reacted
deshi
(@deshi)
New Member Registered
結合: 6年前
投稿: 1
 

コメント失礼します。

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


   
Surlofia reacted
(@おすん)
New Member
結合: 3年前
投稿: 1
 

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

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

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

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


   
Surlofia reacted
bucho
(@bucho)
Estimable Member Registered
結合: 6年前
投稿: 86
 

コメント失礼します。

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

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

 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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

投稿者:: @yhira

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

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 
投稿者:: @kazuaki

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

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

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


   
(@にゃむ)
Active Member
結合: 5年前
投稿: 7
 

@yhira

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
Surlofia reacted
(@にゃむ)
Active Member
結合: 5年前
投稿: 7
 

@yhira

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
(@TABISPACE)
Active Member
結合: 4年前
投稿: 10
 

横から失礼いたします。

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

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

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

<試したこと>

1 Cocoon設定の保存

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

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

3 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)
Active Member
結合: 4年前
投稿: 10
 

連投失礼いたします。

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

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


   
ろこ
(@lococo)
Prominent Member Registered
結合: 6年前
投稿: 830
 

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


   
(@TABISPACE)
Active Member
結合: 4年前
投稿: 10
 

ろこ様

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

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

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました