現在「イノセンス」スキンを適用中です。

ブロックエディター上の動作不具合(WordPress5.7) | 不具合報告 | Cocoon フォーラム

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

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

相談内容:

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

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

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

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
ブロックエディター上の動作不具合(Wo...
 
共有:
通知
すべてクリア

[固定] ブロックエディター上の動作不具合(WordPress5.7)


ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 823
Topic starter  

WordPress5.7でブロックエディターのビジュアルエディター表示時に、ブロックリスト外のビジュアルエディター上をクリックした際の動作に関する不具合です。

通常のクリックイベントでは、サイドバーが投稿タブに選択されるのですが、ブロックリストの最下部にある段落にカーソルが移動してしまいます。

また、最下部が段落ブロック以外の場合、新たに段落ブロックをセットしてしまいます。(添付画像参照)

 

この不具合の原因は

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

と関連していて、

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

でも説明した通り、要素の追加によって不具合が生じています。


わいひら 件のいいね!
引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

動作を確認しました。
この部分ですね。

それから、DOMのスリム化によって無駄な要素は削られ、残った要素の役割が増えていくので、ひとつのブロックレベル要素が追加されるだけで挙動が変わったり、デザインが崩れたりする可能性が出てくる点には注意しておいた方がいいと思います。

ちょっと今、体調的にも家の問題的にも、余裕がないので外注も含めてちょっと考えてみたいと思います。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

申し訳ないです。質問よろしいでしょうか。

投稿者:: @lococo

この不具合の原因は

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

と関連していて、

こちらは、以下のことでよろしいでしょうか。

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

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

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

ここでいう、「エディターのブロックコンポーネント」というのは、個々のブロックごとにHOC上でラッパーするということでしょうか。
今は、wp.domReadyで#editor .block-editor-writing-flowの上に一つdivでラップを作成してclassを挿入しているのですが、
https://github.com/yhira/cocoon/blob/08112488f7010875d9ecbcb3788bc5dbd1e77f7b/js/gutenberg.js#L17
使用される個々のブロックのHOCラッパーにclassを挿入する感じになるのでしょうか。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

恐れ入ります。あともう1点すいません。

基本的には対応できますが、Cocoonブロックは開発が終了した非推奨の古いコンポーネントを使用していたりもするので、その辺りは新しく書き直さないといけません。

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

こちらの非推奨の古いコンポーネントというのは、デベロッパーツールのどこかに非推奨と出ているものでしょうか。
もしくは、非推奨コンポーネントの一覧ページとかがあるのでしょうか。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 823
Topic starter  

この不具合の原因は

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

と関連していて、

こちらは、以下のことでよろしいでしょうか。

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

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

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

ここでいう、「エディターのブロックコンポーネント」というのは、個々のブロックごとにHOC上でラッパーするということでしょうか。
今は、wp.domReadyで#editor .block-editor-writing-flowの上に一つdivでラップを作成してclassを挿入しているのですが、
https://github.com/yhira/cocoon/blob/08112488f7010875d9ecbcb3788bc5dbd1e77f7b/js/gutenberg.js#L17
使用される個々のブロックのHOCラッパーにclassを挿入する感じになるのでしょうか。

そうですね。

すべてのブロックに一律で独自のクラスを当てる必要がある場合は、Gutenbergのフックから個々のブロックにまとめてクラスを追加するか、個々のブロックにまとめてラッパー要素を追加することになると思います。

テーマ用CSSの読み込みも踏まえると、ビジュアルエディターのブロックより外側のブロック要素はおおまかに

  • editor-styles-wrapper
    • block-editor-writing-flow
      • is-root-container

となっていますが、is-root-containerより外側に手を加えるには諸々の動作とのバッティングを考慮しないといけないので、Gutenbergの仕様変更に合わせて修正していかないといけません。

加えて、is-root-containerには現状フック等のカスタマイズポイントが用意されていないことを考慮すると、カスタマイズするならis-root-container内である個々のブロックに対してが無難なのではないかと。

 

ただ、あくまで今の修正内容から考えての案だったので、ここでの不具合だけに拘らず、今後のブロックエディターへの対応の仕方によっては他にもいくつか方法が考えられます。

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

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

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

Gutenbergフェーズ2の開発もある程度形になってきているので、Cocoonのブロックエディターへの対応をどのような形に落とし込むのか、

  • フェーズ1のまだ未対応な部分への対応
  • フェーズ2への対応に向けた改善や開発

をどのように進めていくかが影響するので、イメージされている方向によっては上記の方法は適していないかもしれません。

 

基本的には対応できますが、Cocoonブロックは開発が終了した非推奨の古いコンポーネントを使用していたりもするので、その辺りは新しく書き直さないといけません。

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

こちらの非推奨の古いコンポーネントというのは、デベロッパーツールのどこかに非推奨と出ているものでしょうか。
もしくは、非推奨コンポーネントの一覧ページとかがあるのでしょうか。

DevToolsのコンソールでdeprecatedと表示される箇所は、全て古いパッケージのコンポーネントを使用しています。

2年ほど前(たしかVer.5系の頃)に別のパッケージに移す過程で非推奨になっていて、その後開発が進むにつれて新たなコンポーネントも増えており、書き方が変わっている箇所も多いです。

パッケージだけを置き換えてもある程度動作するとは思いますが、最新版の仕様に対応させるにはそれだけだと不十分で、全体的に見直さないといけません。

私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。

Ver.6あたりから今までの開発ログを見返すか、最新のGutenbergに倣って書き直すかになるのではないかと。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

ありがとうございます。
とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。

ただ根本的なパッケージ問題については、おっしゃる通りだと思いました。
この数日間、Gutenberg API 2への対応を試しているのですが、なかなか一筋縄ではいきません。
あと一つほど、試してみたいことを試してダメなようなら、外注しようと思います。

私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。

これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 823
Topic starter  

とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。

確認しました。

ブロック外をクリックしたときのカーソル移動はなくなったようですが、編集画面で最初にテキストエリアを選択する際にズレが生じます。(添付画像参照)

タイトルを設定するテキストエリアの高さ制御との間に何らかの問題がありそうですが、それ以上は詳しく検証していません。

 

私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。

これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。

SILKスキンもそうですが、私が管理しているサイト以外では基本的にフックからカスタマイズし、なるべく干渉がないようにしています。

私が管理しているサイトや自作テーマで保守しているサイトは、フルサイト編集に向けて開発を進めているため、Cocoonを使用したサイトも以下のリンク先にある内容の通りコアブロックまたは自作ブロックに移行・統合しており、ブロック部分はCocoon自体のコードとは全く別物です。

検索結果: : Cocoon Blocksの利便性について


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

ありがとうございます。
僕の環境でならないので、なんでだろうと思ってたらChromeで不具合を確認しました。
修正しておきます。

This post was modified 1か月前 by わいひら

返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年6ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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