サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年7月19日 02:29
平素より大変お世話になっております
WordPress 6.6で、パターンの挿入時に「予期しないエラー」が発生することがあるようです。
(まだ、見つけたばかりで、何も分からないです。)
挿入したパターンは、今回新たに作った単純なものです。
同期型で、アコーディオンを入れてあります。
同期型で、アコーディオンを入れてあります。
ちなみに、パターンに、「段落」や「案内ボックス」ブロックを入れてみましたが、発生しませんでした。
他にも発生するブロックがあるのかは、今のところ分かりません。
他にも発生するブロックがあるのかは、今のところ分かりません。
以下のエラーですけれど。
「エラー文をコピー」すると、以下でした。
Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at ts ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:102636) at Ku ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:65625) at https://xxxxxxxx.local/wp-includes/js/dist/compose.min.js?ver=b8d54449305350b51869&fver=20240717065138:9:31719 at ri ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:93198) at Ss ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:113320) at https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:112062 at ws ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:112127) at is ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:105883) at Hl ( https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:46663) at https://xxxxxxxx.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1&fver=20240717065138:2:103288
上記の以下にアクセスすると、
https://reactjs.org/docs/error-decoder.html?invariant=185
表示されているのは、以下でした。
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
最大更新深度を超えました。これは、コンポーネントがcomponentWillUpdateまたはcomponentDidUpdateの内部でsetStateを繰り返し呼び出す場合に発生する可能性があります。Reactは、無限ループを防ぐために、ネストされた更新の数を制限します。
ローカル環境ですが、環境情報です。
----------------------------------------------
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:6.6
PHPバージョン:8.1.29
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
サーバーソフト:nginx/1.16.0
サーバープロトコル:HTTP/1.0
エンコーディング:gzip, deflate, br, zstd
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.5.1
カテゴリー数:25
タグ数:6
ユーザー数:4
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
WP Multibyte Patch 2.9
----------------------------------------------
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:6.6
PHPバージョン:8.1.29
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
サーバーソフト:nginx/1.16.0
サーバープロトコル:HTTP/1.0
エンコーディング:gzip, deflate, br, zstd
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.5.1
カテゴリー数:25
タグ数:6
ユーザー数:4
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
WP Multibyte Patch 2.9
----------------------------------------------
ご確認お願い致します。
ここまで書いた思いましたが。
パターンとアコーディオン、以前何かあったような。
アコーディオン、同期型・・IDが・・・?
(もう頭がお眠ですので、考える作業は明日にします)
わいひら reacted
トピックスターター 2024年7月19日 03:04
ふと思いましたけれど。
アコーディオンは、同期型パターンに登録できないようにした方が良いのかも・・・という気がしてきました。
できるのであれば、ですけれど。
(できないのであれば、どこかに注意書きが必要な気はします)
【追記】
同様に、非同期型のパターンにアコーディオンを登録してみました。
こちらでは発生しないですね。
わいひら reacted
トピックスターター 2024年7月19日 20:04
ソースコードを頂いてよろしいでしょうか。
以下です。
<!-- wp:cocoon-blocks/toggle-box-1 {"content":"アコーディオン","dateID":"2024071919545030"} --> <div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle"><input id="toggle-checkbox-2024071919545030" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-2024071919545030">アコーディオン</label><div class="toggle-content"><!-- wp:paragraph --> <p>本文</p> <!-- /wp:paragraph --></div></div> <!-- /wp:cocoon-blocks/toggle-box-1 -->
投稿編集画面で挿入しようとすると、以下のようになってしまうんですね。
この「投稿内容をコピー」すると、以下だけなんです。
<!-- wp:block {"ref":4776} /-->
わいひら reacted
トピックスターター 2024年7月19日 20:21
トピックスターター 2024年7月20日 19:27
同じソースコードで試してみましたが、「予期しないエラー」は出ませんでした。
そうなんですね。
うーん、難しいです。
同じアコーディオンを同じエディター画面に呼び出そうとすると、「ブロックは、ブロック自身の内部でレンダリングできません。」というエラーは出ました。
これ、私の環境では、出る時と出ない時があります。
発生するのは、パターン編集画面です。
投稿編集画面で、一旦パターンを貼り付けると、「予期しないエラー」になってしまうのですが。
その後、パターン編集画面で、パターンを編集しようと開くと、この「~レンダリングできません」が表示されることがあります。
ただ、毎回ではなく、今回添付したアコーディオンではないのです。
別のアコーディオンを同期型で作ったもので、内容としては同じなのですけれど。
(見出しと、中の文書は違うかもですけれど、もう更新されてしまっていて、どんなものだったから分からないです)
その辺の法則も良く分からないです。
(同期型で、パターン側が更新されたのではないか・・・と思うのですけれど)
わいひら reacted
2024年7月21日 19:22
再現方法がわからないとちょっと厳しそうですね。。
トピックスターター 2024年7月22日 03:46
とりあえず、ブロックを選択肢から消すことはできました。
(ChatGPT先生に聞きながら試している最中です。GPT-4oが必要とのことで、今これ以上続けることができないです)
名前は何でも良いのでしょうけれど、「block-editor.js」というファイルを作りました。
wp.domReady(function() { wp.blocks.unregisterBlockType('core/paragraph'); wp.blocks.unregisterBlockType('cocoon-blocks/toggle-box-1'); });
ここに非表示にするブロックを追加しました。
今回は確認のために「段落」ブロックと、「アコーディオン」ブロックです。
そして、functions.phpに以下を追加しました。
(テスト中ですので、デバッグ用のものも入っています)
function enqueue_block_editor_script($hook) { if ($hook === 'post.php' || $hook === 'post-new.php') { $script_path = get_stylesheet_directory() . '/block-editor.js'; if (file_exists($script_path)) { wp_enqueue_script( 'custom-block-editor', get_stylesheet_directory_uri() . '/block-editor.js', array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'), filemtime($script_path), true ); } else { error_log("Script file does not exist: " . $script_path); } } } add_action('admin_enqueue_scripts', 'enqueue_block_editor_script');
これで、「管理メニュー」-「パターン一覧」からのパターン編集画面は、2つのブロックが選択肢から消えました。
通常時は以下
「外観」-「パターン」の方も、選択肢から削除するには、最初のif文の条件に'site-editor.php'を追加する必要がありました。
ただ、現状では投稿編集画面も同様に消えてしまいます。
もう少し、場面を絞り込む必要があるみたいです。
(「管理メニュー」-「パターン一覧」のほうは、post_typeがwp_blockとか?)
もう少し、場面を絞り込む必要があるみたいです。
(「管理メニュー」-「パターン一覧」のほうは、post_typeがwp_blockとか?)
そして、何かのスタイルの読み込みができなくなったのか、編集画面を開くと、ブロック挿入の「+」マークも、ブロックウィジェットの編集画面みたいになってしまいました。
とりあえず、まったくできないという訳ではなさそうです。
「予期しないエラー」や「~レンダリングできません」が、どういう時に起きるのか、分からないところですけれど。
同期型には使わないのが良いのは間違いないと思いますので、とりあえずここまではやってみた感じです。
何日か前にChatGPT先生に聞いた時は、PHPだけの方法を教えてくれたのですけれど、それだとまったく上手くいかなくて。
他のサイトもも参考にはしてみたのですけれど、なかなか上手くいかず・・・。
トピックスターター 2024年7月22日 04:09
そして、何かのスタイルの読み込みができなくなったのか、編集画面を開くと、ブロック挿入の「+」マークも、ブロックウィジェットの編集画面みたいになってしまいました。
これは「段落」ブロックを非表示にしたからかも・・・です。
2024年7月22日 20:28
ただ、現状では投稿編集画面も同様に消えてしまいます。
もう少し、場面を絞り込む必要があるみたいです。
(「管理メニュー」-「パターン一覧」のほうは、post_typeがwp_blockとか?)
そうなんですよね。。
$post_type = get_current_screen()->post_type;
とかで$post_typeに'pattern'とかが帰ってくるのかと思いきや空文字でした。
あと「管理メニュー」-「パターン一覧」から個別のパターンを開くと、JavaScriptだけで動作して、PHPも介さないっぽいですね。
あと同期型の判別もPHPだけでは難しそうですね。
Reactで判別して、unregisterBlockTypeできないかやってみます。
トピックスターター 2024年7月22日 21:13
「管理メニュー」-「パターン一覧」から開いた場合ですけれど。
get_post_typeで取得すると、「wp_block」みたいです。
とりあえず、if文を以下にすると、
- 投稿編集画面ではブロックは表示され、選択可能
- 「管理メニュー」-「パターン一覧」からのパターン編集画面には、ブロックが表示されず、選択不可能
上記のようにはできました。
if ( ($hook === 'post.php' || $hook === 'post-new.php') && isset($_GET['post']) && get_post_type($_GET['post']) === 'wp_block' ) {
「外観」-「パターン」の方は、まだ制御できていないです。
(現時点では、ブロックが表示され、選択可能)
トピックスターター 2024年7月22日 21:34
インデントは無茶苦茶かと思いますが、とりあえずif文の部分は今以下のようにしていて、上手くいってるっぽい感じです
(「外観」-「パターン」の部分を追加しました)
if ( ( ( $hook === 'post.php' || $hook === 'post-new.php' ) && isset($_GET['post']) && get_post_type($_GET['post']) === 'wp_block' ) || ( $hook === 'site-editor.php' && isset($_GET['postType']) && $_GET['postType'] === 'wp_block' ) ) {
同期型の見分け方が分からない・・・。
わいひら reacted
トピックスターター 2024年7月22日 23:27
あれ・・・。
「管理メニュー」-「パターン一覧」の方は、get_current_screen()でpost_typeに「wp_block」が入っているような。
とりあえず、以下にしても上手くいきました。
$screen = get_current_screen(); if ( ( $hook === 'post.php' || $hook === 'post-new.php' ) && isset($screen->post_type) && $screen->post_type === 'wp_block' ) ) {
「外観」-「パターン」の方は、get_current_screen()では値が入らず、どうしたものか・・・。
わいひら reacted
2024年7月23日 20:44
ありがとうございます。
色々参考にさせて頂いてパターン編集ページでアコーディオンブロックを表示しないようにしました。GitHubのファイルをアップしておきました。
https://github.com/xserver-inc/cocoon/commit/8d39421782dd2cae78ebf41d878697f083293017#diff-2b49f6548c15698cce331a814e04cf6e914af16ab9bafdc31443139af0a8d9fdR18
アコーディオンブロックは、CSSを利用した開閉方式をとっているため、あまりパターンとして、使用すべきではないと思い同期型と関係なく使用しないようにしました。
トピックスターター 2024年7月23日 22:25
ご対応いただきありがとうございます。
「管理メニュー」-「パターン一覧」は挿入できなくなりました。
「+」や、「/」での入力も出来ないことを確認させていただきました。
本来なら、「囲みボタン」と「検索案内」の間に、「アコーディオン」があるはず。
ただ、「外観」-「パターン」は、ちょっと変です。
これは、もしかすると、別件の影響かもしれないです。
全ブロックを表示させても、下にスクロールができないです。
マウスのホイールを回しても、スクロールバーをクリックしても、下に行けません。
下のGIFは、
- 最初はホイールを回すも、反応なし
- スクロールバーをクリックすると、閉じてしまう
上記のような状態です。
わいひら reacted
2024年7月23日 22:28
ご確認いただきありがとうございます。
何か他に問題があるかもしれないので、もう少しこのトピックはオープンにしておきます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。