サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年5月4日 20:06
※HTMLで見ると、より外側を囲うタグ「黄色アンダーラインマーカー」がactiveと判定され、内側を囲うタグ「赤色」はactive判定されていない。
pono reacted
トピックスターター 2019年5月4日 20:12
active判定されているインライン（＝黄色アンダーラインマーカー）を外すと、別の装飾インライン（＝赤色）がactive判定になります。
pono reacted
2019年5月4日 22:18
それなんですが、以下のようにボタンで判定するのであれば、以下のようなコードでできました。
https://notepad.pw/code/j20uqnro
けれど、ドロップダウンで行うとなると、editの引数？みたいなものから、isActiveが取得できなくて、ちょっとどうやって良いのかわかりませんでした。
※取得できたとしても、ドロップダウンのルートのisActiveしか取得できないぽかったので。
こんな感じで無理やりやっています。
https://notepad.pw/code/p2x6aykzk
トピックスターター 2019年5月4日 23:50
RichTextToolbarButtonでないと、正確なActive判定が取得できないということなのですね。
- FormatToolbarのドロップダウン
- Slot・Fill
- FormatToolbarへの受け渡し
- 各RichTextToolbarButton
- fillName = 'RichText.ToolbarControls'
Gutenbergでは、各種インラインボタンをRichTextToolbarButtonで用意し、BlockFormatControlsで一部除いたボタンのドロップダウン化を行っているようです。
そのままRichTextToolbarButtonを用いるだけだとデフォルトのドロップダウン内に格納されてしまうと思うので、「新たなBlockFormatControlsの中に、RichTextToolbarButtonで作成したCocoonインラインボタンをドロップダウン化させて入れる。」みたいな方法ではできないでしょうか？
【追記】
この方法だと、
RichTextToolbarButtonで作成した…
は、ToolbarButtonを用いたRichTextToolbarButtonと同様の関数を用意して作成する必要があるかもしれませんね。
2019年5月5日 22:21
ということは、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
方法があるということがわかっただけでも収穫です。
とりあえず、自分でもいろいろ試してみたいと思います。
ただ、現在フォーラムに書き込みが多くて、その対応だけで手一杯だったりします。
この不具合は、そこまで重大な不具合ではないので、時間ができてからの対応になるかもしれません。。
トピックスターター 2019年5月6日 07:06
この不具合は、そこまで重大な不具合ではないので、時間ができてからの対応になるかもしれません。。
発見した不具合を書き込んだだけので、後回しでも大丈夫です。
前回の返信内容で詳しくまとめたつもりだったのですが、私はツールバーのボタン周辺の自作をまだきちんとしたことがないので言葉足らずだったかもしれません。
なので、より細かい説明を加えておきます。
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したものをビルドする感じで。
2019年5月7日 01:14
僕がいまいち理解しておらず、お手数をおかけして恐縮です。
ただ、コードを拝見して、今の自分からは出てこないコードだと思いました。理解不足的な意味で。
その点、サンプルコードをいただいたおかげである程度は理解することができました。
そのおかげで、多分修正することができたかと思います。
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の時と同様、問題なく動作はするようですけど。
トピックスターター 2019年5月8日 00:53
まだ<s>タグのツールボタンに対して、spanのときのようなエラーが出ますね。
これはCocoon側の問題かと。
Gutenberg公式でsタグ用のフォーマットが用意されており、Cocoonのsタグ「打ち消し線（訂正）」と重複していることからエラーが出ています。
（CocoonではGutenberg公式の「取り消し線」が表示されない。）
このエラーはもともとフォーマットの重複を防ぐために用意されたもので、class名を含むspanタグ等の重複判定に問題があった部分に修正が入ったようなので、挙動から考えると「重複するフォーマットは登録しないようにしましょう。」ということなのだと思います。
2019年5月8日 08:42
いつの間にか「del → s」に仕様変更があったんですね。
WordPressデフォルトはずっとdelタグななのだと思い込んでいました。
sに変わったのであれば、本来欲しいタグだったので、テーマの方は削除しておこうと思います。
削除したものはこちら。
https://github.com/yhira/cocoon
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。