何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
WordPress5.7でブロックエディターのビジュアルエディター表示時に、ブロックリスト外のビジュアルエディター上をクリックした際の動作に関する不具合です。
通常のクリックイベントでは、サイドバーが投稿タブに選択されるのですが、ブロックリストの最下部にある段落にカーソルが移動してしまいます。
また、最下部が段落ブロック以外の場合、新たに段落ブロックをセットしてしまいます。（添付画像参照）
この不具合の原因は
WordPress 5.6アップデートに伴うエディター画面の不具合
と関連していて、
https://wp-cocoon.com/community/postid/44311/
でも説明した通り、要素の追加によって不具合が生じています。
申し訳ないです。質問よろしいでしょうか。
この不具合の原因は
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を挿入する感じになるのでしょうか。
恐れ入ります。あともう1点すいません。
基本的には対応できますが、Cocoonブロックは開発が終了した非推奨の古いコンポーネントを使用していたりもするので、その辺りは新しく書き直さないといけません。
https://wp-cocoon.com/community/postid/44311/
こちらの非推奨の古いコンポーネントというのは、デベロッパーツールのどこかに非推奨と出ているものでしょうか。
もしくは、非推奨コンポーネントの一覧ページとかがあるのでしょうか。
この不具合の原因は
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フェーズ２の開発もある程度形になってきているので、Cocoonのブロックエディターへの対応をどのような形に落とし込むのか、
- フェーズ１のまだ未対応な部分への対応
- フェーズ２への対応に向けた改善や開発
をどのように進めていくかが影響するので、イメージされている方向によっては上記の方法は適していないかもしれません。
基本的には対応できますが、Cocoonブロックは開発が終了した非推奨の古いコンポーネントを使用していたりもするので、その辺りは新しく書き直さないといけません。
https://wp-cocoon.com/community/postid/44311/
こちらの非推奨の古いコンポーネントというのは、デベロッパーツールのどこかに非推奨と出ているものでしょうか。
もしくは、非推奨コンポーネントの一覧ページとかがあるのでしょうか。
DevToolsのコンソールでdeprecatedと表示される箇所は、全て古いパッケージのコンポーネントを使用しています。
2年ほど前（たしかVer.5系の頃）に別のパッケージに移す過程で非推奨になっていて、その後開発が進むにつれて新たなコンポーネントも増えており、書き方が変わっている箇所も多いです。
パッケージだけを置き換えてもある程度動作するとは思いますが、最新版の仕様に対応させるにはそれだけだと不十分で、全体的に見直さないといけません。
私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。
Ver.6あたりから今までの開発ログを見返すか、最新のGutenbergに倣って書き直すかになるのではないかと。
ありがとうございます。
とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。
ただ根本的なパッケージ問題については、おっしゃる通りだと思いました。
この数日間、Gutenberg API 2への対応を試しているのですが、なかなか一筋縄ではいきません。
あと一つほど、試してみたいことを試してダメなようなら、外注しようと思います。
私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。
これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。
とりあえず冒頭の余白クリックでカーソルが移動してしまう不具合は、余計なスタイルを取り除いてWordPress公式テーマのものに近づけたら直ったような気はします。
確認しました。
ブロック外をクリックしたときのカーソル移動はなくなったようですが、編集画面で最初にテキストエリアを選択する際にズレが生じます。（添付画像参照）
タイトルを設定するテキストエリアの高さ制御との間に何らかの問題がありそうですが、それ以上は詳しく検証していません。
私はアップデートの都度書き換えてきたので、どの部分がどのように変わったかまでは細かく覚えておらず、こちらについては具体的な修正点まで提案するのは難しいです。
これは、フックを利用してカスタマイズ的に書き換えているとかでしょうか。
それとも、Cocoon自体のコードを書き直して再コンパイルしているとかでしょうか。
SILKスキンもそうですが、私が管理しているサイト以外では基本的にフックからカスタマイズし、なるべく干渉がないようにしています。
私が管理しているサイトや自作テーマで保守しているサイトは、フルサイト編集に向けて開発を進めているため、Cocoonを使用したサイトも以下のリンク先にある内容の通りコアブロックまたは自作ブロックに移行・統合しており、ブロック部分はCocoon自体のコードとは全く別物です。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。