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

Topic starter2021年3月10日 09:52
WordPress5.7でブロックエディターのビジュアルエディター表示時に、ブロックリスト外のビジュアルエディター上をクリックした際の動作に関する不具合です。
通常のクリックイベントでは、サイドバーが投稿タブに選択されるのですが、ブロックリストの最下部にある段落にカーソルが移動してしまいます。
また、最下部が段落ブロック以外の場合、新たに段落ブロックをセットしてしまいます。(添付画像参照)
この不具合の原因は
WordPress 5.6アップデートに伴うエディター画面の不具合
と関連していて、
https://wp-cocoon.com/community/postid/44311/
でも説明した通り、要素の追加によって不具合が生じています。
わいひら 件のいいね!
2021年3月11日 19:38
動作を確認しました。
この部分ですね。
それから、DOMのスリム化によって無駄な要素は削られ、残った要素の役割が増えていくので、ひとつのブロックレベル要素が追加されるだけで挙動が変わったり、デザインが崩れたりする可能性が出てくる点には注意しておいた方がいいと思います。
ちょっと今、体調的にも家の問題的にも、余裕がないので外注も含めてちょっと考えてみたいと思います。
2021年3月12日 12:00
申し訳ないです。質問よろしいでしょうか。
この不具合の原因は
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を挿入する感じになるのでしょうか。
2021年3月12日 12:01
恐れ入ります。あともう1点すいません。
基本的には対応できますが、Cocoonブロックは開発が終了した非推奨の古いコンポーネントを使用していたりもするので、その辺りは新しく書き直さないといけません。
https://wp-cocoon.com/community/postid/44311/
こちらの非推奨の古いコンポーネントというのは、デベロッパーツールのどこかに非推奨と出ているものでしょうか。
もしくは、非推奨コンポーネントの一覧ページとかがあるのでしょうか。
Topic starter2021年3月12日 16:36
この不具合の原因は
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
- block-editor-writing-flow
となっていますが、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に倣って書き直すかになるのではないかと。
わいひら 件のいいね!
2021年3月15日 20:43
ありがとうございます。
とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。
ただ根本的なパッケージ問題については、おっしゃる通りだと思いました。
この数日間、Gutenberg API 2への対応を試しているのですが、なかなか一筋縄ではいきません。
あと一つほど、試してみたいことを試してダメなようなら、外注しようと思います。
私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。
これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。
Topic starter2021年3月16日 01:28
とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。
確認しました。
ブロック外をクリックしたときのカーソル移動はなくなったようですが、編集画面で最初にテキストエリアを選択する際にズレが生じます。(添付画像参照)
タイトルを設定するテキストエリアの高さ制御との間に何らかの問題がありそうですが、それ以上は詳しく検証していません。
私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。
これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。
SILKスキンもそうですが、私が管理しているサイト以外では基本的にフックからカスタマイズし、なるべく干渉がないようにしています。
私が管理しているサイトや自作テーマで保守しているサイトは、フルサイト編集に向けて開発を進めているため、Cocoonを使用したサイトも以下のリンク先にある内容の通りコアブロックまたは自作ブロックに移行・統合しており、ブロック部分はCocoon自体のコードとは全く別物です。
わいひら 件のいいね!
2021年3月17日 21:36
ありがとうございます。
僕の環境でならないので、なんでだろうと思ってたらChromeで不具合を確認しました。
修正しておきます。
This post was modified 1か月前 by わいひら