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