現在デフォルトスキンとして「Season (Summer)」を適用中。

Cocoonインラインを複数用いたときの不具合 | Cocoon Blocksに関する質問・不具合報告・要望 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Cocoonインラインを複数用いたとき...
 
Share:

[解決済] Cocoonインラインを複数用いたときの不具合  

  RSS

ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 19:58  

1か所に複数のCocoonインラインを用いた場合、インラインのactive判定に不具合が見られます。
具体的には、複数のCocoonインラインが使用されているにもかかわらず、ひとつのCocoonインライン(一番外側を囲うタグ?)しかactiveと判定されていません。

以下に例を示しておきます。

画像にある例:

  1. デフォルトインラインの太字+イタリックで装飾した場合
  2. Cocoonインラインの赤色+黄色アンダーラインマーカーで装飾した場合
This topic was modified 4か月 前 by ロコ

わいひら 件のいいね!
引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 19:59  

デフォルトインラインで複数装飾した場合は、用いたそれぞれの装飾がactiveと判定されます。


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 20:01  

Cocoonインラインで複数装飾した場合、ひとつはactiveと判定されています。


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 20:02  

しかし、用いているはずの別の装飾はactiveと判定されていません。


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 20:06  

※HTMLで見ると、より外側を囲うタグ「黄色アンダーラインマーカー」がactiveと判定され、内側を囲うタグ「赤色」はactive判定されていない。


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 20:12  

active判定されているインライン(=黄色アンダーラインマーカー)を外すと、別の装飾インライン(=赤色)がactive判定になります。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年5月4日 22:18  

それなんですが、以下のようにボタンで判定するのであれば、以下のようなコードでできました。
https://notepad.pw/code/j20uqnro

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


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月4日 23:50  

RichTextToolbarButtonでないと、正確なActive判定が取得できないということなのですね。

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

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


【追記】

この方法だと、

RichTextToolbarButtonで作成した…

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

This post was modified 4か月 前 by ロコ

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
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

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


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
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したものをビルドする感じで。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
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の時と同様、問題なく動作はするようですけど。


返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 341
2019年5月8日 00:53  

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

これはCocoon側の問題かと。

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年5月8日 08:42  

いつの間にか「del → s」に仕様変更があったんですね。
WordPressデフォルトはずっとdelタグななのだと思い込んでいました。
sに変わったのであれば、本来欲しいタグだったので、テーマの方は削除しておこうと思います。
削除したものはこちら。
https://github.com/yhira/cocoon

This post was modified 4か月 前 by わいひら

返信引用

返信する


許可された最大ファイルサイズ 3MB

 
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました