サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年2月18日 17:07
お世話になります。
絵文字を使いたく「Emoji Toolbar」をインストールしたのですが、ツールバー自体が出ません。
(WPバージョンは最新で、同サーバー内にある別のWP(テーマはCocoon以外)では表示されます)
ちなみに「Emoji Autocomplete Gutenberg」なら使用できるのですが、クライアントがどうしても「Emoji Toolbar」が良いということで、、
解決方法はございますでしょうか。
よろしくお願いいたします。
2022年2月18日 20:27
申し訳ないですが、プラグインに関しては基本的にサポートの対象外とさせて頂いています。
https://wp-cocoon.com/not-supported/
というのも、プラグインは回答者が使用したことがあるプラグインとは限らないからです。
なので、せめてスクリーンショットで「本来の状態」と「異常な状態」がわかる画像を添付していただいてよろしいでしょうか。
あとできればフォーラムの案内にもありますように環境情報もいただければと思います(URL情報とかは必要ないので)。
※頂いたからといって必ず原因が特定できるとは限らないので予めご了承ください。
2022年2月19日 12:21
※ 私はブロックを作ったことがありません。それどころか開発環境すら作っていません。そのため、これから書く内容は全て的外れかもしれません。
Cocoon の不具合かもしれないと思いました。
まずは現状から書きます。
Emoji Toolbar をインストールし、公式サイトで段落ブロックを使った時にツールバーに絵文字が表示されます。
また、公式サイトでのツールバーは、このような HTML です。
<div class="block-editor-block-toolbar"> <div></div> <div class="components-toolbar-group"></div> <div class="components-toolbar-group"></div> <div class="components-toolbar-group"></div> </div>
わいひら reacted
2022年2月19日 12:23
2022年2月19日 12:40
Cocoon の場合は、投稿ページの編集ページにてデベロッパーツールのコンソールで以下の警告が出ています。
Using Toolbar without label prop is deprecated since version 5.6. Please use ToolbarGroup component instead. See: https://developer.wordpress.org/block-editor/components/toolbar/
Using custom components as toolbar controls is deprecated since version 5.6. Please use ToolbarItem, ToolbarButton or ToolbarDropdownMenu components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols
おそらく、下記リンクに書かれている内容を言っているのだと思います。
Changes to Toolbar components in WordPress 5.6
例えば、dropdown-letters.js を見ると、非推奨になった書き方がされているように思えます。そのため、Emoji Toolbar プラグインの絵文字がツールバーに表示されないのかもと思いました。
ただ、私はブロックの知識が全くないため、全部間違っているかも。
※ 尚、Emoji Toolbar は、ToolbarGroup を使っています。
参考: https://github.com/them-es/emoji-toolbar/blob/main/blocks/src/index.js
This post was modified 3年前 4回 by Akira
2022年2月19日 20:38
ありがとうございます!
とりあえずメッセージが出ないように修正してみたんですが絵文字アイコンは出ないようです。。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年2月19日 20:51
Emoji ToolbarのプラグインページにGitHubのリンクがありました。おそらく圧縮前のものだと思います。
Emoji Toolbarプラグイン https://wordpress.org/plugins/emoji-toolbar/
2022年2月19日 20:52
ただやっぱり、いずれにせよCocoonに問題があるっぽいので原因を探ってみます。
原因がわかるかはわからないのですが…。
2022年2月19日 20:54
ありがとうございます!
ソースコードはコレっぽいですね。ちょっと調べてみます。
https://github.com/them-es/emoji-toolbar/blob/main/blocks/src/index.js
2022年2月20日 00:38
とりあえず原因究明のため'./toolbutton/bold.js'以外のファイルは読み込まないようにしてみました。
https://github.com/yhira/cocoon/commit/3bddf8d271346b9e36721527a3fdb3f378476f03#diff-2b49f6548c15698cce331a814e04cf6e914af16ab9bafdc31443139af0a8d9fdL143
https://github.com/yhira/cocoon/blob/be9a1625396c89238201409a03370b9c74e167fe/blocks/src/blocks.js#L143
加えて'./toolbutton/bold.js'のコード部分も削除してインポート関係のものだけにしてみました。
https://github.com/yhira/cocoon/commit/3bddf8d271346b9e36721527a3fdb3f378476f03#diff-0a2f59bed5a8fb6bf8f0341443a53835bc98b3b59b1362c53226b3f522182db9L17
こんな'./toolbutton/bold.js'のimportだけ読み込んでいる状態でも絵文字アイコンは表示されない…。
2022年2月20日 00:42
けれどそこからたった1行'./toolbutton/bold.js'のimport { registerFormatType, toggleFormat } from '@wordpress/rich-text';をコメントアウトしただけで表示されるようになった…。
https://github.com/yhira/cocoon/commit/be9a1625396c89238201409a03370b9c74e167fe#diff-0a2f59bed5a8fb6bf8f0341443a53835bc98b3b59b1362c53226b3f522182db9L11
https://github.com/yhira/cocoon/blob/be9a1625396c89238201409a03370b9c74e167fe/blocks/src/toolbutton/bold.js#L11
'@wordpress/rich-text'インポートが何か悪さをしているんだろうか。
ちょっと訳が分からない状態です。。
2022年2月20日 13:08
わいひらさん、ありがとうございます。警告が消えました。そして、申し訳ないです。警告が原因ではなかったですね。やっぱり知識がない者の憶測は当てにならない。
ちなみに、Cocoon の blocks.build.js の後で Emoji Toolbar プラグインの index.js を読み込むと表示されました。
※ こんなのを適当に書いてみました。
if (function_exists('emoji_toolbar_enqueue_assets')) { add_action('enqueue_block_editor_assets', function() { $asset_file = include WP_PLUGIN_DIR . '/emoji-toolbar/blocks/build/index.asset.php'; $asset_file['dependencies'][] = 'cocoon-blocks-js'; wp_deregister_script('emoji-toolbar-editor-script'); wp_enqueue_script( 'emoji-toolbar-editor-script', plugins_url('emoji-toolbar/blocks/build/index.js'), $asset_file['dependencies'], $asset_file['version'] ); }); }
わいひら reacted
2022年2月20日 19:45
ちなみに、Cocoon の blocks.build.js の後で Emoji Toolbar プラグインの index.js を読み込むと表示されました。
Akiraさんのこちらの書き込みがヒントになり、なんとか修正することができました(確かな原因は分からないんですけど)。
ありがとうございます!
CocoonのGutenberg関係のスクリプトの読み込み優先度を少し高めただけで絵文字アイコンは表示されるようになりました。
https://github.com/yhira/cocoon/commit/303310e78cb4b4b7685938690b5f34a6b63de676#diff-028a2007287b4cecde59a7e78ce573cac1e519ef4efeb82b791419aac863b84d
修正版はこちら。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
Topic starter
2022年2月21日 10:05
わいひら様、Akira様
ご対応いただき誠にありがとうございました!
私の環境でも正常に表示されました。
迅速にご対応いただき大変感謝です。
Cocoonは今回初めて使用しておりますが、素晴らしいテーマですね。
本当にありがとうございました。
わいひら reacted
2022年2月21日 19:01
Akiraさん、takkさん、ご確認いただきありがとうございます!
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。