Cocoonインラインを複数用いたときの不具合 - Cocoon Blocksに関する質問・不具合報告・要望 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/ Cocoon ディスカッション掲示板 ja Wed, 20 May 2026 04:45:35 +0000 wpForo 60 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16303 Tue, 07 May 2019 23:42:45 +0000 いつの間にか「del → s」に仕様変更があったんですね。
WordPressデフォルトはずっとdelタグななのだと思い込んでいました。
sに変わったのであれば、本来欲しいタグだったので、テーマの方は削除しておこうと思います。
削除したものはこちら。
https://github.com/yhira/cocoon

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16303 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16301 Tue, 07 May 2019 15:53:41 +0000

まだ<s>タグのツールボタンに対して、spanのときのようなエラーが出ますね。

これはCocoon側の問題かと。

Gutenberg公式でsタグ用のフォーマットが用意されており、Cocoonのsタグ「打ち消し線（訂正）」と重複していることからエラーが出ています。
（CocoonではGutenberg公式の「取り消し線」が表示されない。）

このエラーはもともとフォーマットの重複を防ぐために用意されたもので、class名を含むspanタグ等の重複判定に問題があった部分に修正が入ったようなので、挙動から考えると「重複するフォーマットは登録しないようにしましょう。」ということなのだと思います。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16301 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16272 Mon, 06 May 2019 16:14:09 +0000 僕がいまいち理解しておらず、お手数をおかけして恐縮です。
ただ、コードを拝見して、今の自分からは出てこないコードだと思いました。理解不足的な意味で。
その点、サンプルコードをいただいたおかげである程度は理解することができました。
そのおかげで、多分修正することができたかと思います。
https://github.com/yhira/cocoon
ありがとうございます！
多分、僕では無理だったと思うので本当に助かりました。

1つ、β版のGutenberg（5.6.1）だと、まだ<s>タグのツールボタンに対して、spanのときのようなエラーが出ますね。

Format "cocoon-blocks/strike" is already registered to handle bare tag name "s".

これも、spanと同様に直れば良いなと。それとも本当に不具合なのか。
とりあえず、spanの時と同様、問題なく動作はするようですけど。

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16272 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16211 Sun, 05 May 2019 22:06:19 +0000

この不具合は、そこまで重大な不具合ではないので、時間ができてからの対応になるかもしれません。。

発見した不具合を書き込んだだけので、後回しでも大丈夫です。

前回の返信内容で詳しくまとめたつもりだったのですが、私はツールバーのボタン周辺の自作をまだきちんとしたことがないので言葉足らずだったかもしれません。

なので、より細かい説明を加えておきます。

 

DropdownMenuは使用しないでドロップダウン化するということでしょうか。

いいえ、DropdownMenuは使用します。

 

まず、WordPress5.2からFormatToolbarが部分的にドロップダウン化されることは、以前「インラインブロックについて（insertObject）」で少し触れましたが、前回の返信でまとめた以下のリンク集がこのドロップダウン周りのコードとなっています。

スマートな方法かどうかは分かりませんが、このコードを参考に作成することでisActive判定の問題は解決できると思いました。

 

次に、コードについて要点の解説を加えておきます。

もっとも重要なのはおそらく「FillとSlot」で、今のところ「対となるFillとSlotについて、FillでラップされたものをPropsまで含めた形でSlotに受け渡すことができる（＝呼び出し箇所をSlotで指定できる）」みたいな認識です。

「RichTextToolbarButton」と「FormatToolbar」のコードを見れば分かるように、FillからSlotへPropsを受け渡すことで、各々のRichTextToolbarButtonをひとまとめにするドロップダウン化が実現しています。

 

最後に、上で挙げたコードをもとにしたサンプルコードを添付しておきます。
朝一でとりあえずisActive判定を確認しただけなのでかなり適当です。

toolbar-button.jsではRichTextToolbarButtonで公式のドロップダウン内に格納されてしまうのを避けるために同様のコンポーネントを用意しており、cocoon-buttons.jsで各ボタンを実装、cocoon-dropdown.jsで実装されたボタンをBlockFormatControlsにてまとめてドロップダウン表示しています。
あとはcocoon-buttons.jsとcocoon-dropdown.jsをimportしたものをビルドする感じで。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16211 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16197 Sun, 05 May 2019 13:21:22 +0000 ということは、DropdownMenuは使用しないでドロップダウン化するということでしょうか。
DropdownMenuコンポーネントを使うと、controls属性に配列を指定することになるのでどうしてもできないような気がします。
サンプルでも、isActiveを指定する方法がなくて、現在は無理やりやっている感じです。
https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/dropdown-menu/

「BlockControlsもしくはBlockFormatControls」と「DropdownMenu」と「RichTextToolbarButton」を組み合わせる方法があるのだろうか。
ただ、以下に書かれているテーマは多分当テーマだと思うので、何かしら方法はあるのだと思います。
https://technote.space/wordpress/add-dropdown-to-richtext-toolbar

方法があるということがわかっただけでも収穫です。
とりあえず、自分でもいろいろ試してみたいと思います。
ただ、現在フォーラムに書き込みが多くて、その対応だけで手一杯だったりします。
この不具合は、そこまで重大な不具合ではないので、時間ができてからの対応になるかもしれません。。

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16197 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16164 Sat, 04 May 2019 14:50:09 +0000 RichTextToolbarButtonでないと、正確なActive判定が取得できないということなのですね。

Gutenbergでは、各種インラインボタンをRichTextToolbarButtonで用意し、BlockFormatControlsで一部除いたボタンのドロップダウン化を行っているようです。

そのままRichTextToolbarButtonを用いるだけだとデフォルトのドロップダウン内に格納されてしまうと思うので、「新たなBlockFormatControlsの中に、RichTextToolbarButtonで作成したCocoonインラインボタンをドロップダウン化させて入れる。」みたいな方法ではできないでしょうか？

【追記】

この方法だと、

RichTextToolbarButtonで作成した…

は、ToolbarButtonを用いたRichTextToolbarButtonと同様の関数を用意して作成する必要があるかもしれませんね。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16164 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16152 Sat, 04 May 2019 13:18:02 +0000 それなんですが、以下のようにボタンで判定するのであれば、以下のようなコードでできました。
https://notepad.pw/code/j20uqnro

けれど、ドロップダウンで行うとなると、editの引数？みたいなものから、isActiveが取得できなくて、ちょっとどうやって良いのかわかりませんでした。
※取得できたとしても、ドロップダウンのルートのisActiveしか取得できないぽかったので。
こんな感じで無理やりやっています。
https://notepad.pw/code/p2x6aykzk

]]> Cocoon Blocksに関する質問・不具合報告・要望 わいひら https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16152 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16138 Sat, 04 May 2019 11:12:00 +0000 active判定されているインライン（＝黄色アンダーラインマーカー）を外すと、別の装飾インライン（＝赤色）がactive判定になります。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16138 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16135 Sat, 04 May 2019 11:06:25 +0000 ※HTMLで見ると、より外側を囲うタグ「黄色アンダーラインマーカー」がactiveと判定され、内側を囲うタグ「赤色」はactive判定されていない。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16135 RE: Cocoonインラインを複数用いたときの不具合 https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16134 Sat, 04 May 2019 11:02:08 +0000 しかし、用いているはずの別の装飾はactiveと判定されていません。

]]> Cocoon Blocksに関する質問・不具合報告・要望 ろこ https://wp-cocoon.com/community/cocoon-blocks-all/cocoon%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a4%87%e6%95%b0%e7%94%a8%e3%81%84%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e4%b8%8d%e5%85%b7%e5%90%88/#post-16134