Cocoonのコードブロックに関する不具合 - Cocoon Blocksに関する質問・不具合報告・要望 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/ Cocoon ディスカッション掲示板 ja Thu, 16 Jul 2026 23:08:41 +0000 wpForo 60 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25341 Sat, 07 Dec 2019 14:41:33 +0000 すいません。テーマの方をアップし忘れていました（現在は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上のフックでしょうか。

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25341 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25340 Sat, 07 Dec 2019 13:57:40 +0000 私の環境では、すでに用意されている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に入れるようにしています。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25340 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25338 Sat, 07 Dec 2019 13:45:52 +0000 公式コードブロックに「言語設定」機能を追加してみました。
ほぼほぼ、参考サイトのコードの流用。
https://github.com/yhira/Cocoon-Blocks-embed/blob/master/src/custom/code/block.js
テーマにも適用しておきました。
https://github.com/yhira/cocoon

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25338 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25318 Fri, 06 Dec 2019 11:09:19 +0000 調べてみたら、こんな方法があるんですね。
僕もちょっと挑戦してみようと思います。
https://www.webopixel.net/wordpress/1499.html

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25318 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25317 Fri, 06 Dec 2019 11:07:59 +0000 そんなことができるんですね！
それは、Gutenbergのフックか何かを利用されているのでしょうか？

公式のコードブロックを見てみたのですが、やり方の想像がつきませんでした。
https://github.com/WordPress/gutenberg/blob/c583ea29c869ea2a7028c03551b8925f9a9777df/packages/block-library/src/code/edit.js

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25317 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25303 Thu, 05 Dec 2019 17:11:09 +0000

言語指定以外はSyntax Highlightのように高度化したり、差別化したりするつもりはないので、早めにこのブロックは廃止しておこうと思います。

Cocoonのコードブロックは廃止ということで確認しました。

 

公式コードブロックの「高度な設定」から、「追加CSSクラス」を追加すれば、同じことができますよね。。

補足しておくと、私の環境では添付画像の方法で言語を指定できるようにしています。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25303 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25291 Thu, 05 Dec 2019 14:31:31 +0000 元々は、言語を指定してソースコードを表示させるために実装しました。
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にアップしておきました。

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25291 RE: Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25279 Thu, 05 Dec 2019 10:17:50 +0000 追加でCocoonのブログカードもです。
なので、ショートコードの括弧とURL全般に対してエスケープ処理を加えないといけません。

 

報告ついでに質問ですが、公式コードブロックの機能改善（インデント用ショートカットキーやコードブロックエディタのSyntax Highlight化など）による利便性向上に対し、今後Cocoonのコードブロックでも追従していく予定なのでしょうか？
それとも全く別の方向性に差別化していく予定なのでしょうか？

今Cocoonのコードブロックにある機能は、私の環境では以前から公式コードブロックの方に実装済みで、わざわざブロックを分ける必要があるのか疑問に思ったので。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25279 Cocoonのコードブロックに関する不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25258 Wed, 04 Dec 2019 11:51:01 +0000 ブロックエディターでソースコードを挿入する方法

先日のアップデートで新たにコードブロックが追加されていますが、少なくとも2点の不具合が確認されました。

  1. ショートコード
  2. oEmbed URL

該当ブロックのエディタ内に上記の内容が含まれている場合です。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-25258