何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
https://wp-cocoon.com/bugs-and-wants/
「やりたいけど出来ていないところ」としてインラインブロックが挙げられていますが、どこまで進んでいるのか分からないのでとりあえずポイントだけ書き残しておきます。
こちらにあるrender内にて、公式のインライン要素である「インライン画像」が記述されており、
- リッチテキスト（オブジェクト）がアクティブの場合にブロックボタンを表示
- クリックでメディアアップロードコンポーネントを開く
- リッチテキスト内に選んだ画像を挿入
となっています。
ここの3番で、insertObjectによって挿入しているのがポイントかと思われます。
なのでインライン画像と同じような形式でいくなら、例えばモダールで開く部分をraw HTMLの入力欄に変え、入力されたショートコードを挿入するみたいな感じになるんでしょうかね。
いつも誠にありがとうございます。
insertObjectという便利なものがあるんですね。
メモメモ。
https://github.com/WordPress/gutenberg/blob/7964f381e07e06b2ac13698fd1465a4d0c16da1b/packages/rich-text/src/insert-object.js
こちらも、近いうちに実装できればと思います。
一利用者として、微力ながらではありますが。
今後の改善等に関して気づいたことがあれば、また分かる範囲でメモを残すようにはします。
右端ドロップダウン部分の主なソースコードを添えておきます。
FormatToolbar
本トピックを書いたときにはインライン画像部分のコードを読んだだけの提案だったのですが、実際に触ってみたところ、insertObjectは挿入されるフォーマット内のオブジェクトを指定するものなので誤りで、正しくはinsertObject内でも使用されているinsertを用いるのがよさそうです。
【サンプルコード】
https://notepad.pw/code/l3qm1r1xg
サンプルコード、ありがとうございます！
ショートコード機能に関しては、ツールボタン スペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。
ただ、あらためてGIFアニメとしてみると、やっぱりツールボタンから手軽にアクセスできる仕様は魅力的ですね。
やっぱり、ツールボタンとして実装しようかと思い始めました。
ツールボタン 問題については、表示を切り替える機能でもつければ良いかなと。
昨日、吹き出し、吹き出しEXブロックの不具合も改善出来たと思うので、明日からショートコード機能に取りかかってみようと思います。
ツールボタンスペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。
個人的には、アフィリエイトタグなどの広告用ショートコードくらいはツールバーにボタンがあった方が楽だなと感じています。
あまり使用する機会のなさそうなショートコードはInspectorにショートコード用パネルとしてまとめておくとか、ショートコードブロックにだけボタンを表示させるとかでもいいかもしれません。
実際に実装してみたら、やはりツールボタンから手軽にアクセスできる方が楽ですね。
とりあえず、全てのショートコードをツールボタンのドロップダウンで実装しました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
ただ、人によっては不要なドロップダウンもあると思うので、Cocoon設定の「エディター」タブの設定項目から非表示にできるようにもしておきました。
確かに。
そこまで考えがおよんでいませんでした。
修正したものをアップしておきました。
https://github.com/yhira/cocoon
要望を除けば、これで一通り「今後の予定」としていた機能は完成ですかね？
一応、旧エディターであった機能移行としては、完成といった感じです。
あと1つ作るとしたら、評価スターブロックくらいでしょうか。
表示チェックの有無に関係なく、空のコンポーネントが表示されるようになりました。
おそらく、関数is_block_editor_○○で取得されるのがstring ""だったのに対し、変更後に受け渡すようにした変数$is_○○がtrue/falseとなっている点に問題があると思われます。
例えば、ランキングの表示について挙動を見てみると、
wp_localize_scriptに関数is_block_editor_ranking_shortcode_dropdown_visibleで取得したstring値（修正前）を入れると、チェックの有無で判定されます。
一方、$is_rankings_visibleに入るtrue/falseのbool値（修正後）のままだと上記で示したように判定されていません。
なので、React側で書かれた判定をtrue/falseによる判定に修正するか、$is_rankings_visibleで受け渡す値をstring値にする必要があるのではないかと思います。
今朝は時間的に訂正くらいしか書く余裕がなかったので、もう少し補足しておきます。
wp_localize_script
$dataはarrayでの受け渡しになります。
各ショートコードの情報は空（全て非表示）でも配列で返されているのでそのまま受け渡しても問題ありません。
一方で、ドロップダウンの判定値はstringまたはboolのまま受け渡してしまっています。
この問題により、今回の修正でbool→arrayとなってtrue判定されているわけなので、適切な修正例としては「それぞれのドロップダウン表示判定値をひとつの配列にまとめる」などが考えられます。
修正ありがとうございます。
「『全て非表示』かつ『表示チェックあり』」の場合まで考慮するかは細かいので微妙なところではありますが、きちんと対応するのであれば、$is_affiliates_visible部分を例に
https://notepad.pw/code/lek2j0fe
などで対応できると思います。
受け渡し自体には特に問題なさそうなので、ひとまずエディタ周りのGutenberg移行作業お疲れさまでした。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。