[ 固定表示 ] タイマー機能追加

[mtdkei]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

#2058

どういう変更をしたか？

タイマー機能と「一度表示されたら再表示しない」制御は、連動して動作するため一緒に実装しました。タイマーでブロックを表示した後、次回の訪問で再表示を防ぎたいという需要が必ずあると思いそうしています。
なお、「一度表示されたら再表示しない」制御はSession Storageを使用しているので、データはブラウザを閉じると自動的に削除され、個人情報や追跡に関するリスクはありません。そのため、同意を求める必要はなく、ユーザーのプライバシーに配慮した実装となっています。ただし、Session Storageを使用しているため、ブラウザを閉じたり、プライベートブラウジングモードでは再度表示される可能性があります。

スクリーンショットまたは動画

変更前 Before

変更後 After

2024-10-03.14.44.46.mov

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

• 書けそうなテストは書いたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

既存、新規の固定表示ブロックで以下を確認しました。

1. 以下のコードをコピペし保存

<!-- wp:vk-blocks/fixed-display {"position":"top","scrollTiming":100,"scrollPersistVisible":true,"fixedPositionType":"bottom","fixedPositionValue":0,"fixedPositionUnit":"px","blockId":"85c94b14-bb72-40ff-91f9-8a14d5904d91","className":"is-timed-hide is-timed-display"} -->
<div class="wp-block-vk-blocks-fixed-display vk_fixed-display vk_fixed-display-mode-always-visible vk_fixed-display-position-top  vk_fixed-display-85c94b14-bb72-40ff-91f9-8a14d5904d91 is-timed-hide is-timed-display"><!-- wp:cover {"dimRatio":50,"overlayColor":"black","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full","className":"vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:group {"className":"is-style-vk-group-solid-roundcorner","backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-vk-group-solid-roundcorner has-white-background-color has-background"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">広告！だよ！</p>
<!-- /wp:paragraph -->

<!-- wp:vk-blocks/button {"buttonAlign":"center","blockId":"3e41414f-0090-43a3-8fab-1b296df16b42"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center"><a class="vk_button_link btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">aaaaaaaaaa</span></div></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:vk-blocks/fixed-display -->

2. タイマー機能が正常に動作するか確認

• 表示までの秒数のみ
• 非表示までの秒数のみ
• 表示までの秒数と非表示までの秒数を組み合わせた時

3. 2にプラスして、表示タイプで「スクロールしたら表示」を選択している時は以下を確認しました。

• 「表示するタイミング」で設定した位置に達した際に要素が正しく表示されるか
• 「一度表示したらその時の表示を維持する」が有効な場合、スクロール位置を超えた後に要素が表示されたままであるか。
• 「一度表示したらその時の表示を維持する」が無効な場合、スクロール位置よりも上に戻った際に要素が正しく非表示になるか。

4. 「再訪問者には表示しない」をONの動作確認

• ONにした時:ページを読み込んで固定表示ブロックが表示されるのを確認したあと、以下を確認。
  • 同一ページで再読み込みしたら表示されなくなっていることを確認しました。
  • 同一ドメインの他のページに移動したあと、固定表示ブロックが設定されるページに戻っても固定表示ブロックが表示されなくなっていることを確認しました。
  • 同一ページでキャッシュの削除とハード際読み込みをしても固定表示ブロックが表示されなくなっていることを確認しました。

なお、訪問後、ブラウザを閉じたり、プライベートブラウジングモードではONの場合でも再表示されることを確認しました。

また、タイマー表示が非表示になったあと、固定表示で覆い被さっていた要素がクリックできることを確認しました。

レビュワーに回す前の確認事項

• 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

実装者と同じ確認をしてください。今回設定した機能でこうした方がいいなどあればご連絡ください。
また、一人は開発の方にご確認いただきたいと思っております。

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？
• キャッシュをクリアして確認したか？

[mtdkei]

@mthaichi
丁寧なフィードバックありがとうございます 🙇‍♂️
以下の内容について、修正を進めましたので共有させていただきます。

1. 「Enable Display After Seconds」のトグルスイッチ削除:
   ご指摘の通り、タイマー表示の場合は「最初から表示させる + タイマー消去」のケースにしてみました。
   また、トグルスイッチを削除し、0 を指定すればその設定が効かないことを説明をテキストにして追加してみました。

2. スクロール表示に関してはトグルスイッチ「Do not display again until the browser is closed」を削除し、hideAfterSeconds を設定することでタイマー消去を実現できる仕様に修正しました。

3. PHP の処理を index.php に統合し、vk_blocks_post_new_badge_render_callback() のように $content を動的に変更する形で処理を記述しました。

複数の固定表示ブロックを設定し、さまざまな設定を施した状態でのフロントエンドの挙動も確認済みです。
よろしくお願いいたします。

[mthaichi]

@mtdkei ありがとうございます。動きは問題ないと思います！
あと一点ご確認をお願いします🙏

あ、翻訳関係のファイルは外しておいたほうがいいような気もします。

[mthaichi]

@mtdkei add_filterを使うのではなく、New Badgeブロック同様、register_block_typeのrender_callbackパラメータとして渡して頂くと良いかなと思います。他のブロックのrender時にも呼ばれてしまうからです。

[mtdkei]

@mthaichi
ありがとうございます。こちらの勉強不足でやっと理解できました、すみません。こちら修正しました。
また、labelも追加したPanelBody以外は元に戻しました。

[mthaichi]

@mtdkei 私はこれでOKだと思います。長々とありがとうございました。
どなたか2人目チェックをお願いします。

[kurudrive]

@mtdkei ありがとうございます！