サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-12-04 20:51
先日のアップデートで新たにコードブロックが追加されていますが、少なくとも2点の不具合が確認されました。
- ショートコード
- oEmbed URL
該当ブロックのエディタ内に上記の内容が含まれている場合です。
mirutana reacted
Topic starter
2019-12-05 19:17
追加でCocoonのブログカードもです。
なので、ショートコードの括弧とURL全般に対してエスケープ処理を加えないといけません。
報告ついでに質問ですが、公式コードブロックの機能改善（インデント用ショートカットキーやコードブロックエディタのSyntax Highlight化など）による利便性向上に対し、今後Cocoonのコードブロックでも追従していく予定なのでしょうか？
それとも全く別の方向性に差別化していく予定なのでしょうか？
今Cocoonのコードブロックにある機能は、私の環境では以前から公式コードブロックの方に実装済みで、わざわざブロックを分ける必要があるのか疑問に思ったので。
2019-12-05 23:31
元々は、言語を指定してソースコードを表示させるために実装しました。
https://wp-cocoon.com/community/demands/highlight-js%e3%81%ae%e8%a8%80%e8%aa%9e%e3%82%92%e6%8c%87%e5%ae%9a/
けれど、公式コードブロックの「高度な設定」から、「追加CSSクラス」を追加すれば、同じことができますよね。。
言語指定以外はSyntax Highlightのように高度化したり、差別化したりするつもりはないので、早めにこのブロックは廃止しておこうと思います。
おっしゃるようにこれだけの機能でしたら、わざわざ分ける必要はなくて不要だと思います。
とりあえず、要望した方には申し訳ないですが、次のバージョンで廃止しようと思います。
とりあえず、廃止版はGitHubにアップしておきました。
Topic starter
2019-12-06 02:11
言語指定以外はSyntax Highlightのように高度化したり、差別化したりするつもりはないので、早めにこのブロックは廃止しておこうと思います。
Cocoonのコードブロックは廃止ということで確認しました。
公式コードブロックの「高度な設定」から、「追加CSSクラス」を追加すれば、同じことができますよね。。
補足しておくと、私の環境では添付画像の方法で言語を指定できるようにしています。
mirutana reacted
2019-12-06 20:07
そんなことができるんですね！
それは、Gutenbergのフックか何かを利用されているのでしょうか？
公式のコードブロックを見てみたのですが、やり方の想像がつきませんでした。
https://github.com/WordPress/gutenberg/blob/c583ea29c869ea2a7028c03551b8925f9a9777df/packages/block-library/src/code/edit.js
2019-12-06 20:09
調べてみたら、こんな方法があるんですね。
僕もちょっと挑戦してみようと思います。
https://www.webopixel.net/wordpress/1499.html
2019-12-07 22:45
公式コードブロックに「言語設定」機能を追加してみました。
ほぼほぼ、参考サイトのコードの流用。
https://github.com/yhira/Cocoon-Blocks-embed/blob/master/src/custom/code/block.js
テーマにも適用しておきました。
https://github.com/yhira/cocoon
Topic starter
2019-12-07 22:57
私の環境では、すでに用意されているclassNameのみで対応しています。
https://www.webopixel.net/wordpress/1499.html
コードを読んだだけですが、おそらくこの方法だと別途で用意されているattribute（サンプルだと'marginSetting'）はあまり意味がないのではないでしょうか。
今回の場合、例えば言語指定で'php'を指定したとします。
新たに用意したattributeとclassNameにphpが入っていて、className側（高度な設定）でさらに'html'に書き換えたとします。
すると、attributeとclassNameが一致しなくなります。
また、既存のclassNameに設定されている言語がある場合もattributeと一致しません。
新たにattributeを用意するのであれば、classNameの挙動と一致させるか切り離す必要があります。
- できるだけattributeによる管理項目を増やしたくない。（今後の仕様変更などでmigrate等しなければいけない可能性もある。）
- 既存のclassNameだけでも簡易的には対応が可能。
といった点を考慮し、classNameのみで対応する方法を選びました。（添付したGIFの前半参照）
その場合はフック"editor.BlockEdit"だけで十分になります。
ついでに言語指定用クラスに加えて、追加のクラスも合わせて挿入できる仕組みを一応用意しています。（GIFの後半参照）
それから、Cocoonのコードブロックでは全ての言語を選択肢に入れていましたが、私は選択肢の言語や順序を変えられるように、フックを通してからSelectControlのoptionsに入れるようにしています。
mirutana reacted
2019-12-07 23:41
すいません。テーマの方をアップし忘れていました（現在はRevertで打消し済み）。
今回の場合、例えば言語指定で'php'を指定したとします。
新たに用意したattributeとclassNameにphpが入っていて、className側（高度な設定）でさらに'html'に書き換えたとします。すると、attributeとclassNameが一致しなくなります。
また、既存のclassNameに設定されている言語がある場合もattributeと一致しません。
確かに。
ただその場合、SelectControlのvalueはどのように設定してセレクトボックスを選択させているのでしょうか。
https://github.com/yhira/Cocoon-Blocks-embed/blob/cc5602bd3d1bee98b22b4f70a8f1f161f8920b27/src/custom/code/block.js#L48
それから、Cocoonのコードブロックでは全ての言語を選択肢に入れていましたが、私は選択肢の言語や順序を変えられるように、フックを通してからSelectControlのoptionsに入れるようにしています。
これは、Gutenberg上のフックでしょうか。
それとも、PHPで配列を指定して、JavaScriptに受け渡しといったようなPHP上のフックでしょうか。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。