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

インラインブロックについて(insertObject) | 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)はこちら

スポンサーリンク
インラインブロックについて(inser...
 
Share:

[解決済] インラインブロックについて(insertObject)  


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年4月3日 01:07  

https://wp-cocoon.com/bugs-and-wants/

「やりたいけど出来ていないところ」としてインラインブロックが挙げられていますが、どこまで進んでいるのか分からないのでとりあえずポイントだけ書き残しておきます。

 

https://github.com/WordPress/gutenberg/blob/7964f381e07e06b2ac13698fd1465a4d0c16da1b/packages/format-library/src/image/index.js

こちらにあるrender内にて、公式のインライン要素である「インライン画像」が記述されており、

  1. リッチテキスト(オブジェクト)がアクティブの場合にブロックボタンを表示
  2. クリックでメディアアップロードコンポーネントを開く
  3. リッチテキスト内に選んだ画像を挿入

となっています。

ここの3番で、insertObjectによって挿入しているのがポイントかと思われます。

 

なのでインライン画像と同じような形式でいくなら、例えばモダールで開く部分をraw HTMLの入力欄に変え、入力されたショートコードを挿入するみたいな感じになるんでしょうかね。

This topic was modified 7か月 前 by わいひら

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年4月3日 19:53  

いつも誠にありがとうございます。
insertObjectという便利なものがあるんですね。
メモメモ。
https://github.com/WordPress/gutenberg/blob/7964f381e07e06b2ac13698fd1465a4d0c16da1b/packages/rich-text/src/insert-object.js

こちらも、近いうちに実装できればと思います。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年4月3日 20:58  

一利用者として、微力ながらではありますが。

今後の改善等に関して気づいたことがあれば、また分かる範囲でメモを残すようにはします。


わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年4月5日 12:58  

WordPress 5.2ではインライン要素はブロック一覧には表示されなくなり、かわりにツールバー右端にドロップダウンでの一覧表示が基本になるようです。

表示位置は自由にカスタマイズできると思うので、必要のない報告かもしれませんが。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年4月5日 18:45  

ツールバー右端にドロップダウンでの一覧表示が基本になるようです。

教えていただきありがとうございます!
確かに、インラインならそっちで挿入できた方が分かりやすいかもしれませんね。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年4月5日 20:27  

右端ドロップダウン部分の主なソースコードを添えておきます。

FormatToolbar

https://github.com/WordPress/gutenberg/blob/8625b82f240e4371704909f6e29e8d1a8a2e61ee/packages/block-editor/src/components/rich-text/format-toolbar/index.js


わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月12日 06:35  

本トピックを書いたときにはインライン画像部分のコードを読んだだけの提案だったのですが、実際に触ってみたところ、insertObjectは挿入されるフォーマット内のオブジェクトを指定するものなので誤りで、正しくはinsertObject内でも使用されているinsertを用いるのがよさそうです。


【サンプルコード】
https://notepad.pw/code/l3qm1r1xg

This post was modified 7か月 前 by ロコ

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月12日 22:27  

サンプルコード、ありがとうございます!

ショートコード機能に関しては、ツールボタン スペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。

ただ、あらためてGIFアニメとしてみると、やっぱりツールボタンから手軽にアクセスできる仕様は魅力的ですね。
やっぱり、ツールボタンとして実装しようかと思い始めました。
ツールボタン 問題については、表示を切り替える機能でもつければ良いかなと。

昨日、吹き出し、吹き出しEXブロックの不具合も改善出来たと思うので、明日からショートコード機能に取りかかってみようと思います。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月13日 00:04  

ツールボタンスペースも限られていることから、本文下のSEO設定がある欄あたりに、ショートコードコピペ用の項目でも作ろうかと思っていました。

個人的には、アフィリエイトタグなどの広告用ショートコードくらいはツールバーにボタンがあった方が楽だなと感じています。

あまり使用する機会のなさそうなショートコードはInspectorにショートコード用パネルとしてまとめておくとか、ショートコードブロックにだけボタンを表示させるとかでもいいかもしれません。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月13日 22:23  

アフィリエイトショートコードはツールバーに必須かもしれませんね。

あとは、汎用ショートコード、テンプレートショートコードあたりは、微妙なところ。

ランキングショートコードは不要ちゃー不要。

とりあえずは、アフィリエイトショートコードをツールバーに実装してどんな感じになるか、確認してみようと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月14日 20:41  

実際に実装してみたら、やはりツールボタンから手軽にアクセスできる方が楽ですね。
とりあえず、全てのショートコードをツールボタンのドロップダウンで実装しました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

ただ、人によっては不要なドロップダウンもあると思うので、Cocoon設定の「エディター」タブの設定項目から非表示にできるようにもしておきました。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月14日 21:59  

汎用ショートコード以外の3つの項目についてですが、それぞれの設定が空または全て非表示の場合、表示にチェックを入れたままだと空のコンポーネントが表示されるので、表示するチェックを入れているかどうかと合わせて、念のため取得できる情報があるかどうかの判別も加えてからコンポーネントを表示させるようにした方がよいかもしれません。


要望を除けば、これで一通り「今後の予定」としていた機能は完成ですかね?


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月14日 22:33  

確かに。
そこまで考えがおよんでいませんでした。
修正したものをアップしておきました。
https://github.com/yhira/cocoon

要望を除けば、これで一通り「今後の予定」としていた機能は完成ですかね?

一応、旧エディターであった機能移行としては、完成といった感じです。
あと1つ作るとしたら、評価スターブロックくらいでしょうか。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月14日 23:41  

表示チェックの有無に関係なく、空のコンポーネントが表示されるようになりました。

おそらく、関数is_block_editor_○○で取得されるのがstring ""だったのに対し、変更後に受け渡すようにした変数$is_○○がtrue/falseとなっている点に問題があると思われます。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月15日 01:29  

空のコンポーネントが表示されるようになりました。

この状態のキャプチャーをいただけますか。

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

ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月15日 01:40  
  • テンプレート
  • アフィリエイト
  • ランキング

3つの表示について、チェックを外した状態です。

また、

  • テンプレートは取得情報あり
  • アフィリエイトはすべて非表示
  • ランキングは空

の状態で、ツールバー右端の縦線が重複している部分が空のコンポーネントです。

This post was modified 7か月 前 by ロコ

わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月15日 01:45  

表示チェックは同様に外した状態で、先ほどのものから

  • テンプレートは全て非表示
  • アフィリエイトは表示

に変更した状態のものです。


わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
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値にする必要があるのではないかと思います。


わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月15日 06:27  

React側で書かれた判定をtrue/falseによる判定に修正するか、$is_rankings_visibleで受け渡す値をstring値にする必要があるのではないかと思います。

の部分に訂正です。

判定値($is_○○_visible、is_block_editor_○○_dropdown_visible)をそのまま渡してしまっている点にもともと問題があり、修正箇所がすべてtrue判定になってしまっているので、判定値の渡し方を修正しなければいけません。


わいひら 件のいいね!
ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月15日 17:07  

今朝は時間的に訂正くらいしか書く余裕がなかったので、もう少し補足しておきます。

 

wp_localize_script

関数リファレンス/wp localize script

$dataはarrayでの受け渡しになります。

各ショートコードの情報は空(全て非表示)でも配列で返されているのでそのまま受け渡しても問題ありません。
一方で、ドロップダウンの判定値はstringまたはboolのまま受け渡してしまっています。

この問題により、今回の修正でbool→arrayとなってtrue判定されているわけなので、適切な修正例としては「それぞれのドロップダウン表示判定値をひとつの配列にまとめる」などが考えられます。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月16日 00:39  

配列で渡す必要があるというのを、完全に忘れていました。
取り急ぎ以下の処理を行った修正版をダウンロードページでダウンロードできるようにしておきました。

適切な修正例としては「それぞれのドロップダウン表示判定値をひとつの配列にまとめる」などが考えられます。

ご指摘、ありがとうございます。助かりました。

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

ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 494
2019年5月16日 06:02  

修正ありがとうございます。

「『全て非表示』かつ『表示チェックあり』」の場合まで考慮するかは細かいので微妙なところではありますが、きちんと対応するのであれば、$is_affiliates_visible部分を例に
https://notepad.pw/code/lek2j0fe
などで対応できると思います。

受け渡し自体には特に問題なさそうなので、ひとまずエディタ周りのGutenberg移行作業お疲れさまでした。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7391
わいひら - Facebookわいひら - Twitter
2019年5月16日 20:55  

確かにそうですね。
そこまで想像力が働いていませんでした。
GitHubの方で修正しておきました。

Gutenberg移行作業は、ロコさんのお力添えがなくては、まだまだ全然出来てなかったと思います。
というか、参考リンクや、サンプルコードなくしては、多分無理だったと思います。
誠にありがとうございます!


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

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

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

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

クーポンコード:Y2KIC92J9Y

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

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

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

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

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

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

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

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

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

Cocoon
  
動作中

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

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