書き込みの前に以下の3点をご確認ください。1つのトピックにつき1つの質問を書き込んでください不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かりますフォーラム利用ガイドリンクフォーラムガイドラインよくある質問と答え(FAQ)サポート対象外のケース原因不明の不具合用トラブルシューティングトピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)真っ白画面でのエラーメッセージの確認方法ブラウザ環境チェックツールフォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。「いいね!」機能はフォーラム登録者のみが利用できる機能です。2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。詳細なカスタマイズ依頼をするならこちら。Cocoonカスタマイズ依頼フォーラムのTwitterアカウント(@CocoonForum)はこちら。01:32わいひら様、アップデートありがとうございます。今のところやり方は、よくわかってないとありますが、Gutenberg公式のテーブルブロックがサンプルとして参考になるかと思いますがいかがでしょうか。https://wp-cocoon.com/cocoon-blocks-response-status/また、「今後特にやりたいこと」には挙げられていなかったのですが、可能であればCocoon用のレイアウトブロックも対応していただければ幸いです。こちらも公式のカラムブロックとそれをフォークしたようないくつかのプラグインが参考になるかと思います。20:49Gutenberg公式のテーブルブロックがサンプルとして参考になるかと思いますがいかがでしょうか。これは、多分これを利用していると思うのですが、いまいち実装してみても動作しなくて。https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/dropdown-menu/こんな感じでやってみても、ボタンが表示すらされなかったりして。https://notepad.pw/code/f3r2542c3※突貫で書いたコードなので余計なコードも多少入っています何か使い方自体間違っているんでしょうかね。20:51こちらも公式のカラムブロックとそれをフォークしたようないくつかのプラグインが参考になるかと思います。どのプラグインでしょうか?よろしければURLをいただければ幸いです。20:54また、「今後特にやりたいこと」には挙げられていなかったのですが、可能であればCocoon用のレイアウトブロックも対応していただければ幸いです。これも以前、作ろうと思って以下のように何も考えず作ってはみました。/>を2つ入れると、それぞれ別のものが表示されと思っていたのですが、同じものが表示されてしまうんですよね。ここら辺の解決方法がまだよくわかっていません。いうか調べる時間がなくてまだ調べていません。20:55というか、公式のカラムブロックがあるのでいいかなと思って、暫く放置しています。01:04わいひら様、返信ありがとうございます。ドロップダウン化の方ですが、示していただいている『DropdownMenu』を公式でも利用しているようで、サンプルコードと比較した感じだと、https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/table/edit.jsこのあたりが参考になるのではないかと思いました。同様に公式カラムブロックのコードは以下で、https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/columnsプラグインだと例えば、https://wordpress.org/plugins/variable-column-block/などがありました。Cocoon用にカラムブロックを用意する予定とのことだったので、ブロックも可能な限りCocoonのもので統一しようかと考えていたのですが、カラムは公式ブロックのみならそれでも私は構いません。20:39リンクありがとうございます。DropdownMenuですが、僕も同様のことを試したことあるのですが、うまくいきませんでした。僕もこれに関しては、以前からトータルで十数時間は試しているのですが、ダメでした。これは、僕自身JSXを始めたのが、Gutenbergエディター組み込み後のWordPress5.0以降で、現在行っているプログラミング自体付け焼刃のものだからだと思います。書籍を購入して、仕様時手をしっかりと理解しないと、できないような気もします。これ自体、何時間かやれば必ずうまくいくというのであれば、やるのですが、何時間やってもうまくいかない可能性があるので、ちょっとこれは良いサンプルコード待ちをしようと思います。「これをやればうまくいく」的なものがあればいいのですが、僕も他に仕事があるので、トライ&エラー時間があまりなくて。Columnsプラグインも見てみました。これと同様に、カラムの中にテキストしか挿入しないものであれば、今も作成できるかもしれません。/>を入れて、カラム内にブロックを入れようと思っているからダメだったり。調べても、1つのブロック内に複数のInnerBlocksはできないっぽいです。https://wordpress.org/support/topic/multiple-inner-blocks/それを、うまく動作させるには、「公式のカラムブロック」みたいなことをやればいいとは思うのですが、それだったら「公式のもの」でいいのかなと思ってしまいました。テキストだけで良いのであれば、多分できると思います。「リストは入れられないの?」とか問い合わせが来そうで、どうしたものか...と思って現在に至る感じです。21:42Gutenbergのツールボタンですが、そのプラグインのおかげで、様々な表現ができることはわかっています。https://technote.space/add-richtext-toolbar-buttonなんで、このプラグインのような表現を目指して情報収集出来ればと思います。※プラグインコードを見てみたのですが、コンパイル後のコードしか見つけられなかったので、正直よくわからなかった...。できるということが分かっただけでもありがたい。07:23わいひら様、お忙しい中ありがとうございます。Toolkitを用いて試してみたところ、ドロップダウンは表示されました。わいひら様はhttps://notepad.pw/code/f3r2542c3にあるようなコードで試したとのことですが、「ひとまずドロップダウンを表示させる」という観点から言えることは、ひとつはコンポーネントを適切に扱うことです。/></Toolbar></BlockControls></Fragment>の方が適切なようです。(公式テーブルブロックのドロップダウン部分のコードを参照)もうひとつは該当のコードが動作するようにビルドされているかを確認することです。ビルド時にエラーが出ていないか、該当のコードが書かれたファイルがきちんと読み込まれているかなどを再度確認してみてください。今のところ、ドロップダウンが表示されない原因について心当たりがあるのは上記の2点ではないかと思います。07:36朝一に動作確認のみを大雑把に行ってみて、とりあえず書き込んだだけなので、少ない情報ですみませんが、また何か分かったことがあれば追記させていただきます。21:02!!!というか、そんな部分に表示されるんですね。僕としては、「太字(boldクラス指定)」の手前に表示される順番で挿入し、そのつもりでいたのでその部分は見てもいませんでした。<BlockControls><Toolbar>も以前試したときに、やったと思うんですが、まさかそんなところに表示されると思わず、太字の手前ばかり見ていました。探りながら、動作方法を探ってみたいと思います。ターミナルやブラウザーのコンソールに、エラーが出てくれれば、ありがたいんですけどね...。ないケースが結構あって。書き込みのおかげで、かなり進展しました。ありがとうございます!またあとでコードを書いてみて進捗があれば書き込もうと思います。03:02エディタのツールバーについて、基本は既存コンポーネント群→追加コンポーネント群→最後尾にフォーマットボタン用コンポーネント群と表示されるみたいです。Gutenbergの仕様に則ってカスタマイズするのであれば、フォーマットボタンの自由度は高くなく、用意されている様々なコンポーネントを活用するには新たにコンポーネント群を追加するのが良さそうです。コンポーネント『DropdownMenu』や『Toolbar』などを用いることで、コンポーネント群を追加する形です。(『Toolbar』は例えば、テキストの左・中央・右寄せボタンの箇所など。)ちなみに、実際に試してはいないので詳しくは分かりませんが、『MenuItem』を用いると『DropdownMenu』内をより細かく構築できるとのことです。わいひら様が示されたhttps://technote.space/add-richtext-toolbar-buttonにあるプラグインを軽く読んでみましたが、フォーマットボタン用コンポーネント下に新たな独自コンポーネントを用意し、より自由度の高いフォーマットボタンへと拡張させることで実現しているようですね。独自コンポーネントを追加すれば、その分拡張性は増すわけですが、そこにかける労力や今後のメンテナンス等を考えると、極力既存のコンポーネントのみでうまく組み合わせて作った方が良いのでは?と個人的には思います。コンポーネント群の順番変更方法についてはまだよく見ていないので分からないですが、少なくとも順番を気にしなければ、既存のコンポーネントだけでもプラグインと同じような機能の多くは実現可能かと。22:00エディタのツールバーについて、基本は既存コンポーネント群→追加コンポーネント群→最後尾にフォーマットボタン用コンポーネント群と表示されるみたいです。知らず、追加されていた部分は見てませんでした...。ちなみに、実際に試してはいないので詳しくは分かりませんが、『MenuItem』を用いると『DropdownMenu』内をより細かく構築できるとのことです。あとでMenuItemで検索してみたいと思います。Buttonこれは、どのファイルをよく読まれたのでしょうか。以下のファイルをBeautifyして読んだとかでしょうか。https://github.com/technote-space/add-richtext-toolbar-button/blob/master/assets/js/add-richtext-toolbar-button-gutenberg.min.jsプラグインを軽く読んでみましたが、フォーマットボタン用コンポーネント下に新たな独自コンポーネントを用意し、より自由度の高いフォーマットボタンへと拡張させることで実現しているようですね。technoteさんの技術力は半端ないですね。独自コンポーネントを追加すれば、その分拡張性は増すわけですが、そこにかける労力や今後のメンテナンス等を考えると、極力既存のコンポーネントのみでうまく組み合わせて作った方が良いのでは?と個人的には思います。僕も、既存のものでないと、現在の僕の能力では多分手に負えなくなると思います。Reactの記法はなじみがなくて、正直全然慣れません...。やるとしても、ちゃんとした本を一冊読まないとダメそう。22:09現在、テキスト色だけは、昨日こんな感じで作成してみました(これが作法的に良いのかわかりませんが)。https://github.com/yhira/cocoon/blob/blocks/blocks/src/toolbutton/letter-colors.js色つけや太字のような動作はするのですが、isActiveの「現在該当のインライン要素を選択中か」の取得方法は謎ですね...。Button」については、わいひら様がおっしゃるようにhttps://github.com/technote-space/add-richtext-toolbar-button/blob/master/src/classes/models/editor.phpにてツールバー用のJS(add-richtext-toolbar-button-gutenberg.min.js)が読み込まれているので、ツールバーの動作についてはそちらを読むのがよいかと。Gutenberg公式の資源を流用しつつ...といった感じではありますが、やはり正攻法とは言えなさそうなので、少なくともしばらくはGutenbergの仕様変更についていくのが大変だと思います。今朝、ブロックエディタのツールバーについていろいろ調べていて見つけたのですが、どうやら次回のWordPressアップデートでツールバーにも変更が加えられるようです。formats.https://github.com/WordPress/gutenberg/pull/14233とのことです。01:30DropdownMenuのcontrolsにはisActiveというオブジェクトが用意されていないようです。https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/dropdown-menu/Gutenbergのテーブルブロックでは、isDisabledでテーブルセルが選択されているかどうかを取得しています。19:06DropdownMenuのcontrolsにはisActiveというオブジェクトが用意されていないようです。これは、isActiveにtrueを設定すると、選択状態にできるので、値を渡してやればできるようです。19:08とりあえず、editの引数のvalueの値から、判別処理を書くと何とか「選択/解除」できるっぽいです。19:11問題は、controlsの中それぞれに、classの指定方法がちょっとわからないことです。添付画像のように、色を指定できないので、わかりづらい...。Button」を見てみると、しっかりとclassが入ってスタイリングされているので、やろうと思えばできるっぽいですね。現在までの進捗はこんな感じです。あとは、classの指定方法がわかれば、完成が見えてきそうです。プラグインのソースコードを探れればと思います。19:24もしやと思って、titleにこんなふうに書いてみたら、普通にHTML要素(class)を追加できました。19:28意外に結構なんでも出来るっぽい。これで標準機能だけでも、なんとかやりたいことは出来そう。20:42わいひら様、どうやらドキュメントの方は少し古いみたいで、現在controlsには以下のオブジェクトが格納できるようです。MenuGroup)でできることを確認しながら作るのがよいかもしれません。MenuItem等でできることは大抵何とかすればDropdownMenu下でできるでしょう(ショートカットキーの設定とかも?)し、逆にMenuItem等を使った方が楽にできるパターンもあるのではないでしょうか。22:48ありがとうございます。controlsには以下のオブジェクトが格納できるようです。subscriptも設定できるんですね。これは初めて見ました。MenuItemは、リンク先を見る限りでは、ツールボタン右端の「3つの点」をクリックすると表示されるメニューアイテムのことでいいのかな。DropdownMenuでやりたいことの材料は揃ったので、一度DropdownMenuで実装します。その後、補足機能が必要であれば、随時書き換えていこかなと。時間ができたらMenuItemのデモを作ってみて、動作を確認してみようと思います。00:06分かりました。20:44最新版で、ようやく機能追加できました。https://wp-cocoon.com/1-7-2/この実装ができたのも、ロコさんのご協力のおかげです。20:45次は、カラムレイアウト機能を出来ればと。1.6.5スポンサーリンクシェアするTwitterFacebook10はてブ8Pocket15LINEコピーわいひらをフォローするスポンサーリンクおすすめサーバカラフルボックス性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。○サーバ引っ越しオプションあり(有料)サービス運営期間:1年6ヶ月1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。クーポンコード:PK4JK4RJクーポンの使用方法はこちら。安定感抜群のサーバーです。急激なアクセス変動がないアフィリエイトサイトに向いています。詳細ページエックスサーバーMixHostプラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。WINGとにかく速い。サイトに表示スピードを求めるならココ。WINGJETBOY格安な値段で始められる高機能サーバーです。性能も備えつつ最安ならここ。サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。Cocoon設定の「スキン」タブで変更できます。新着記事Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】2019.09.092020.02.03Cocoon既知の不具合。