サイト内検索
インラインブロックについて(insertObject) | Cocoon Blocksに関する質問・不具合報告・要望 | Cocoon フォーラム

Topic starter2019年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 starter2019年4月3日 20:58
一利用者として、微力ながらではありますが。
今後の改善等に関して気づいたことがあれば、また分かる範囲でメモを残すようにはします。
わいひら 件のいいね!
2019年4月5日 18:45
ツールバー右端にドロップダウンでの一覧表示が基本になるようです。
教えていただきありがとうございます!
確かに、インラインならそっちで挿入できた方が分かりやすいかもしれませんね。
Topic starter2019年4月5日 20:27
右端ドロップダウン部分の主なソースコードを添えておきます。
FormatToolbar
Topic starter2019年5月12日 06:35
本トピックを書いたときにはインライン画像部分のコードを読んだだけの提案だったのですが、実際に触ってみたところ、insertObjectは挿入されるフォーマット内のオブジェクトを指定するものなので誤りで、正しくはinsertObject内でも使用されているinsertを用いるのがよさそうです。
【サンプルコード】
https://notepad.pw/code/l3qm1r1xg
2019年5月12日 22:27
サンプルコード、ありがとうございます!
ショートコード機能に関しては、ツールボタン スペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。
ただ、あらためてGIFアニメとしてみると、やっぱりツールボタンから手軽にアクセスできる仕様は魅力的ですね。
やっぱり、ツールボタンとして実装しようかと思い始めました。
ツールボタン 問題については、表示を切り替える機能でもつければ良いかなと。
昨日、吹き出し、吹き出しEXブロックの不具合も改善出来たと思うので、明日からショートコード機能に取りかかってみようと思います。
Topic starter2019年5月13日 00:04
ツールボタンスペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。
個人的には、アフィリエイトタグなどの広告用ショートコードくらいはツールバーにボタンがあった方が楽だなと感じています。
あまり使用する機会のなさそうなショートコードはInspectorにショートコード用パネルとしてまとめておくとか、ショートコードブロックにだけボタンを表示させるとかでもいいかもしれません。
pono 件のいいね!
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 starter2019年5月14日 23:41
表示チェックの有無に関係なく、空のコンポーネントが表示されるようになりました。
おそらく、関数is_block_editor_○○で取得されるのがstring ""だったのに対し、変更後に受け渡すようにした変数$is_○○がtrue/falseとなっている点に問題があると思われます。
pono 件のいいね!
2019年5月15日 01:29
空のコンポーネントが表示されるようになりました。
この状態のキャプチャーをいただけますか。
Topic starter2019年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 starter2019年5月15日 17:07
今朝は時間的に訂正くらいしか書く余裕がなかったので、もう少し補足しておきます。
wp_localize_script
$dataはarrayでの受け渡しになります。
各ショートコードの情報は空(全て非表示)でも配列で返されているのでそのまま受け渡しても問題ありません。
一方で、ドロップダウンの判定値はstringまたはboolのまま受け渡してしまっています。
この問題により、今回の修正でbool→arrayとなってtrue判定されているわけなので、適切な修正例としては「それぞれのドロップダウン表示判定値をひとつの配列にまとめる」などが考えられます。
2019年5月16日 00:39
配列で渡す必要があるというのを、完全に忘れていました。
取り急ぎ以下の処理を行った修正版をダウンロードページでダウンロードできるようにしておきました。
適切な修正例としては「それぞれのドロップダウン表示判定値をひとつの配列にまとめる」などが考えられます。
ご指摘、ありがとうございます。助かりました。
Topic starter2019年5月16日 06:02
修正ありがとうございます。
「『全て非表示』かつ『表示チェックあり』」の場合まで考慮するかは細かいので微妙なところではありますが、きちんと対応するのであれば、$is_affiliates_visible部分を例に
https://notepad.pw/code/lek2j0fe
などで対応できると思います。
受け渡し自体には特に問題なさそうなので、ひとまずエディタ周りのGutenberg移行作業お疲れさまでした。
2019年5月16日 20:55
確かにそうですね。
そこまで想像力が働いていませんでした。
GitHubの方で修正しておきました。
Gutenberg移行作業は、ロコさんのお力添えがなくては、まだまだ全然出来てなかったと思います。
というか、参考リンクや、サンプルコードなくしては、多分無理だったと思います。
誠にありがとうございます!