【確認中】[ グリッドカラムカード ] カラムヘッダーメディアエリアやカラムフッターボタンエリアのデフォルトを「表示」に変更

[mtdkei]

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

#2136

どういう変更をしたか？

ブロック挿入時に初期状態をdeleteからdisplayに変更しました。
また、フッターボタンエリアに入るコアのbuttonを初期状態では中央寄せにしてみています。

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

変更前 Before

変更後 After

実装者の確認事項

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

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

プログラムの変更の場合

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

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

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

• 編集画面でグリッドカラムカードを設置したときにカラムヘッダーメディアエリアやカラムフッターボタンエリアのデフォルトが「表示」になっていることを確認しました。
• 既存のグリッドカラムカードに影響がないことを確認しました。
• WP6.5、6.6で確認しました。

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

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

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

実装者と同じ実装を行なってください。また、開発の方はコードの確認もお願いいたします。
今回はdeleteからdisplayに変えた方が使いやすいかどうかのご確認も含めているため、普段レビュワーではない方も含めています。実際に実装するかどうかも含めてご検討ください。
よろしくお願いいたします。

---

レビュワー向け

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

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

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

[sysbird]

@mtdkei
確認中です
デフォルトで表示はわかりやすくてよいと思います
最初から隠れているとユーザーは気づきにくいですもんね

気になるところ
以前に作成したグリッドカラムカードをこのブランチで編集しようとすると、[削除]だったところが、[表示]になってしまうようです。たぶん以前は値がないとき「削除」だったのが「表示」に変更したためでしょうかね
あれ、これどうなったらいいんでしょう…難しいです

[mtdkei]

@sysbird
おっしゃる通り、既存のブロックにも影響があるようでした。
色々調整しているのですが、既存のブロックでdeleteにしている時でもdisplayになってしまう部分の対応がうまくいきません。

もしデフォルトを「表示」にする方向で進めていい場合は開発の方にもこの辺を見ていただけたら嬉しいのですが @kurudrive さんはどう思いますか？

[sysbird]

@mtdkei
案でなくて 現状報告でおそれいいります〜

既存のブロックで delete はデフォルトなので、headerDisplay がないときは delete 扱い
このブランチでは display がデフォルトなので、headerDisplay がないときは display 扱い
デフォルト値は保存されてないためと思います

先日、
[ グリッドカラムカード ] 編集モードのデフォルト値を「すべてのカラム」に #1992
の仕様変更がありましたが、この場合は編集モードは保存されていなくて、初期表示をどうするか？だった気がします

[mtdkei]

@sysbird
ご指摘の通り、既存のブロックがdeleteの設定のまま新しいデフォルト値displayに影響されてしまう点について、こちらも対応がうまくいっておりません。この問題を解決するために、デフォルトを「表示」に変更する方向で進める場合、皆さんのご意見をいただけると助かります。@kurudrive さんは、この問題についてどのようにお考えでしょうか？

[kurudrive]

@mtdkei @sysbird 表示で良いと思います（・ｗ・ｂ

[mtdkei]

@sysbird @kurudrive
ご確認ありがとうございます。
既存のグリッドカラムカードで、header や footer が delete だったものが display にならないように、gridcolcard-item に headerDisplay と footerDisplay の data 属性を付けて、明示的に保存するように修正しました。
また、VKパターンから https://patterns.vektor-inc.co.jp/vk-patterns/lp-online-en-school-custom-css/ をコピペした時もdelete設定はそのまま引き継がれました。

[mthaichi]

@mtdkei ありがとうございます！
動きは良いと思います。コードも適切に変更されていると思いますが、細かい所で一点確認があります。

[mthaichi]

@mtdkei これはなんのための変更ですか？ （save.jsも同様に）

[mthaichi]

@mtdkei あー、ごめんなさい。

既存のグリッドカラムカードで、header や footer が delete だったものが display にならないように、gridcolcard-item に headerDisplay と footerDisplay の data 属性を付けて、明示的に保存するように修正しました。
また、VKパターンから https://patterns.vektor-inc.co.jp/vk-patterns/lp-online-en-school-custom-css/ をコピペした時もdelete設定はそのまま引き継がれました。

これのための修正ですね。
「data 属性を付けて、明示的に保存する」ってどういうことですか？ そんなことできるんでしたっけ？
単に私が知らない類のことかもしれないので、ご説明頂けますと幸いです。🙏

[mtdkei]

@mthaichi
ご質問ありがとうございます。
確かに「data属性を付けて、明示的に保存する」という部分についての説明が不足していましたので、補足させていただきます。

今回のケースでは、block.jsonで headerDisplay と footerDisplay のデフォルト値を delete から display に変更しています。この変更によって、新しく作成するブロックはデフォルトで display になります。ただし、もともと delete がデフォルトだった時期に作成した既存のブロックでも、編集画面を開くと勝手に display になってしまうという問題が発生しました。この問題を防ぐために、既存のブロックの状態を保存しておく方法が必要になりました。

このため、headerDisplay や footerDisplay の状態を、ブロックのHTMLに data-header-display や data-footer-display の形で保存するようにしました。こうすることで、ブロックエディタはブロックの現在の状態を正しく認識できるようになりました。

具体的には、編集画面を開いたときや保存するときに、これらの data 属性をHTMLに含めることで、headerDisplay や footerDisplay の状態を保存しています。これにより、ブロックエディタが再読み込みされた際も、既存ブロックの headerDisplay や footerDisplay の設定が正しく引き継がれるようにしてみました。