Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:
通知
すべてクリア

パターンの挿入について

22 投稿
2 ユーザー
9 Reactions
571 表示
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

平素より大変お世話になっております

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
----------------------------------------------
 
ご確認お願い致します。
 
 
ここまで書いた思いましたが。
パターンとアコーディオン、以前何かあったような。
アコーディオン、同期型・・IDが・・・?
 
(もう頭がお眠ですので、考える作業は明日にします)

   
わいひら reacted
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

ふと思いましたけれど。
アコーディオンは、同期型パターンに登録できないようにした方が良いのかも・・・という気がしてきました。
できるのであれば、ですけれど。

(できないのであれば、どこかに注意書きが必要な気はします)

 

【追記】

同様に、非同期型のパターンにアコーディオンを登録してみました。
こちらでは発生しないですね。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ご連絡ありがとうございます。

投稿者:: @mk2_mk2

挿入したパターンは、今回新たに作った単純なものです。
同期型で、アコーディオンを入れてあります。

僕の環境で同期型で空のアコーディオンブロックを入れただけでは、ちょっと再現しませんでした。
念のため、ソースコードを頂いてよろしいでしょうか。
とはいっても空のアコーディオンブロックを入れただけなので、そんな変わらないか。。

投稿者:: @mk2_mk2

アコーディオンは、同期型パターンに登録できないようにした方が良いのかも・・・という気がしてきました。
できるのであれば、ですけれど。

ちょっと難しいかもしれません。
現時点ではちょっとやり方の想像がつかないです;


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

投稿者:: @yhira

ソースコードを頂いてよろしいでしょうか。

以下です。

<!-- 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
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

投稿者:: @yhira

ちょっと難しいかもしれません。
現時点ではちょっとやり方の想像がつかないです;

ですよねぇ。
一覧からブロックだけでも非表示にできないかと試しているのですけれど。

上手くいかないんですよねぇ・・・。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

同じソースコードで試してみましたが、「予期しないエラー」は出ませんでした。
けれど、同じアコーディオンを同じエディター画面に呼び出そうとすると、「ブロックは、ブロック自身の内部でレンダリングできません。」というエラーは出ました。
エラーメッセージを見てみましたが、Cocoonファイルから出ているエラーではないので、ちょっと原因は分からずです…。なかなかに厄介そう。。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

投稿者:: @yhira

同じソースコードで試してみましたが、「予期しないエラー」は出ませんでした。

そうなんですね。
うーん、難しいです。

投稿者:: @yhira

同じアコーディオンを同じエディター画面に呼び出そうとすると、「ブロックは、ブロック自身の内部でレンダリングできません。」というエラーは出ました。

これ、私の環境では、出る時と出ない時があります。

発生するのは、パターン編集画面です。

投稿編集画面で、一旦パターンを貼り付けると、「予期しないエラー」になってしまうのですが。
その後、パターン編集画面で、パターンを編集しようと開くと、この「~レンダリングできません」が表示されることがあります。

ただ、毎回ではなく、今回添付したアコーディオンではないのです。
別のアコーディオンを同期型で作ったもので、内容としては同じなのですけれど。
(見出しと、中の文書は違うかもですけれど、もう更新されてしまっていて、どんなものだったから分からないです)

その辺の法則も良く分からないです。
(同期型で、パターン側が更新されたのではないか・・・と思うのですけれど)


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

再現方法がわからないとちょっと厳しそうですね。。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

とりあえず、ブロックを選択肢から消すことはできました。
(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とか?)
 
そして、何かのスタイルの読み込みができなくなったのか、編集画面を開くと、ブロック挿入の「+」マークも、ブロックウィジェットの編集画面みたいになってしまいました。
 
 
とりあえず、まったくできないという訳ではなさそうです。
 
 
「予期しないエラー」や「~レンダリングできません」が、どういう時に起きるのか、分からないところですけれど。
同期型には使わないのが良いのは間違いないと思いますので、とりあえずここまではやってみた感じです。
 
 
何日か前にChatGPT先生に聞いた時は、PHPだけの方法を教えてくれたのですけれど、それだとまったく上手くいかなくて。
他のサイトもも参考にはしてみたのですけれど、なかなか上手くいかず・・・。
 

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

投稿者:: @mk2_mk2

そして、何かのスタイルの読み込みができなくなったのか、編集画面を開くと、ブロック挿入の「+」マークも、ブロックウィジェットの編集画面みたいになってしまいました。

これは「段落」ブロックを非表示にしたからかも・・・です。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

投稿者:: @mk2_mk2

ただ、現状では投稿編集画面も同様に消えてしまいます。
もう少し、場面を絞り込む必要があるみたいです。
(「管理メニュー」-「パターン一覧」のほうは、post_typeがwp_blockとか?)

そうなんですよね。。

$post_type = get_current_screen()->post_type;

 

とかで$post_typeに'pattern'とかが帰ってくるのかと思いきや空文字でした。
あと「管理メニュー」-「パターン一覧」から個別のパターンを開くと、JavaScriptだけで動作して、PHPも介さないっぽいですね。
あと同期型の判別もPHPだけでは難しそうですね。

Reactで判別して、unregisterBlockTypeできないかやってみます。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

「管理メニュー」-「パターン一覧」から開いた場合ですけれど。

get_post_typeで取得すると、「wp_block」みたいです。

とりあえず、if文を以下にすると、

  • 投稿編集画面ではブロックは表示され、選択可能
  • 「管理メニュー」-「パターン一覧」からのパターン編集画面には、ブロックが表示されず、選択不可能

上記のようにはできました。

if ( ($hook === 'post.php' || $hook === 'post-new.php')
      && isset($_GET['post']) && get_post_type($_GET['post']) === 'wp_block' ) {

 

「外観」-「パターン」の方は、まだ制御できていないです。
(現時点では、ブロックが表示され、選択可能)

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

インデントは無茶苦茶かと思いますが、とりあえず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
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

非同期型は、postmetaにステータスがありますね。

 
同期型は、このmeta_keyが保存されていないです。
 
ただ、新規作成時はこれでは判断できないような・・・。
 
 
何だか雷が、だんだん酷いことに。
PC落とした方が良さそうな感じが・・・。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

あれ・・・。
「管理メニュー」-「パターン一覧」の方は、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
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ありがとうございます。
色々参考にさせて頂いてパターン編集ページでアコーディオンブロックを表示しないようにしました。GitHubのファイルをアップしておきました。
https://github.com/xserver-inc/cocoon/commit/8d39421782dd2cae78ebf41d878697f083293017#diff-2b49f6548c15698cce331a814e04cf6e914af16ab9bafdc31443139af0a8d9fdR18
アコーディオンブロックは、CSSを利用した開閉方式をとっているため、あまりパターンとして、使用すべきではないと思い同期型と関係なく使用しないようにしました。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

ご対応いただきありがとうございます。

「管理メニュー」-「パターン一覧」は挿入できなくなりました。
「+」や、「/」での入力も出来ないことを確認させていただきました。

 
本来なら、「囲みボタン」と「検索案内」の間に、「アコーディオン」があるはず。
 

 
ただ、「外観」-「パターン」は、ちょっと変です。
これは、もしかすると、別件の影響かもしれないです。
 
全ブロックを表示させても、下にスクロールができないです。
マウスのホイールを回しても、スクロールバーをクリックしても、下に行けません。
 
下のGIFは、
  • 最初はホイールを回すも、反応なし
  • スクロールバーをクリックすると、閉じてしまう

上記のような状態です。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ご確認いただきありがとうございます。
何か他に問題があるかもしれないので、もう少しこのトピックはオープンにしておきます。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

ちなみに、上部の「+」マークや、WordPressの「W」マークも選択できないです。

 
クリック操作では、ダッシュボードに戻れなくなってしまい、URLを直接入力して戻りました。

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

投稿編集画面は、問題なく、「アコーディオン」ブロックの挿入ができました。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

こちらの影響かと思います。一旦元に戻しました。
https://wp-cocoon.com/community/postid/80253/


   
mk2 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
トピックスターター  

他の対応をリバートしていただいたバージョンでは、「外観」-「パターン」も挿入できないようになっていました。

 
 
こちらも、本来であれば、「囲みボタン」と「検索案内」の間に、「アコーディオン」があるはずだが、「アコーディオン」が表示されず、挿入できない状態。
 
 
以下のような事象も発生しないです。
 
投稿者:: @mk2_mk2

  • 最初はホイールを回すも、反応なし
  • スクロールバーをクリックすると、閉じてしまう

投稿者:: @mk2_mk2

上部の「+」マークや、WordPressの「W」マークも選択できないです。

 

ばたばたして、晩御飯を食べていないので、これから食べますっ!


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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