「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

ブロックエディタで独自のidを追加する...
 
共有:
通知
すべてクリア

[解決済] ブロックエディタで独自のidを追加する方法

5 投稿
2 ユーザー
1 Likes
2,029 表示
(@戸井健吾)
New Member
結合: 4年前
投稿: 3
Topic starter  

はじめまして。
戸井と申します

Cocoonカスタマイズのサポート範疇は超えていると思いますが、もし可能であれば助言をいただきたく書き込ませていただきました。

不都合あれば、削除いただけたらと思います。

ブロックエディタで、Cocoonでいうトグルボックスのような機能を実装しようとしていますが、独自のid設定に困っています。

Cocoonでは以下のようにidとforを設定していると思います。

<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box"><input id="toggle-checkbox-20191218133137" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-20191218133137">トグルボックス見出し</label><div class="toggle-content"><!-- wp:paragraph -->
<p>あああ</p>
<!-- /wp:paragraph --></div></div>

「20191218133137」に該当する部分は、タイムスタンプを入れているのだと思いますが、これをどのように実装しているのか、教えていただけないでしょうか。

単純にタイムスタンプを挿入するだけならこちらでもできました。

しかし、保存→エディタから抜ける→編集で再表示、という流れになった時、1回目の初回保存時のタイムスタンプとは変わってしまうため、「Block validation」というエラーになってしまい、ブロックエディタが解除されてしまいます

わいひら様は初回保存と同じタイムスタンプを復元して、うまく解決しているのだろうとは思うのですが、この実装方法がしりたく……。

もし可能であれば、Reactをビルドする前の実装をサンプルとしてご開示いただけたりしますと、大変助かります。
※その他の方法でも問題ございません

よろしくお願いしますいたします。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

一応、現時点でのトグルボックスのソースコードはこんな感じです。
https://notepad.pw/code/gkqr72n8
attributesに対してdateIDという値を設定して、2回目以降はその値を取得するようにしています。

単純にタイムスタンプを挿入するだけならこちらでもできました。

とのことですが、一応タイムスタンプを取得するgetDateID関数も載せておきます。
https://notepad.pw/code/91hbejqlp


   
(@戸井健吾)
New Member
結合: 4年前
投稿: 3
Topic starter  

わいひら様、ソースコードのご提示ありがとうございます!

こちらを参考に試してみます。結果は改めてご報告しますが、取り急ぎ御礼申し上げます


   
(@戸井健吾)
New Member
結合: 4年前
投稿: 3
Topic starter  

わいひら様

実装できました!

数日悩んでいたので、本当に助かりました。ありがとうございましたm(__)m


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

うまくいったようでよかったです ? 


   
共有:

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

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

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

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

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

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

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

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