ブログカード カスタムブロックバリエーション機能追加

[shimotmk]

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

#749 #1778

事の発端
#749 (comment)

どういう変更をしたか？

ブログカード カスタムバリエーション設定機能追加

バリエーションとはブロック単位でプリセットを登録できる機能です
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-variations/

実装者の確認事項

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

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

プログラムの変更の場合

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

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

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

実装者が確認した手順を箇条書きで記載してください。

• レビュー確認方法と同様です。

確認URL

（　どこかのデモサイトかテストサーバーにデプロイ済みなどで確認できる場合はそのURL　）

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

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

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

レビュワーがどういう手順で何を確認して欲しいかを記載してください。

• 翻訳は別ブランチで行います
• 基本的な使用方法は以下のような使用方法を想定しております

variation.mp4

• 既存のバリエーションの変更するとコアのstoreの優先順位的にリアルタイムで反映されないことがありますがこれは使用上調整できないと思います。（リロードすれば反映されます）
• 何かユーザーとして気になる機能やわかりにく箇所などあればご指摘いただければと思います

---

レビュワー向け

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

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

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

[mthaichi]

@shimotmk ありがとうございます。素晴らしいといいますか、想像を上回る実装に驚いています。
この機能は他のブロックに展開することも視野に開発されてますよね？

不具合というほどでもないのですが、気づいた点をいくつか挙げさせて頂きます。

• ブロック挿入後、URL入力〜パターン選択時のところまで「バリエーション設定」ボタンはdisableなり非表示にしたほうが良いと思いました。
• 「バリエーション設定」の各入力項目に一応文字数制限を入れたほうがよいと思いました。（死ぬほど長い文字列をいれても動くことは確認しましたが、ボタンが重なってインターフェイスが乱れたりします）
• 本修正以前のことかもしれませんが、「ブログカードの抜粋」ブロックのスタイルのタイポグラフィーを変更してもエディタに反映されないように思います。（フロントには反映されているようです）

ご確認、ご検討のほど、よろしくお願いします。

[shimotmk]

@mthaichi
確認ありがとうございます！

@shimotmk ありがとうございます。素晴らしいといいますか、想像を上回る実装に驚いています。 この機能は他のブロックに展開することも視野に開発されてますよね？

他のブロックに展開しても良いとは思いますが、どのブロックにどのくらい展開するかは考えた方が良いと思います

• ブロック挿入後、URL入力〜パターン選択時のところまで「バリエーション設定」ボタンはdisableなり非表示にしたほうが良いと思いました。

そうですね！
インナーブロックが存在しない時はバリエーション設定ボタンを非表示にしました！

• 「バリエーション設定」の各入力項目に一応文字数制限を入れたほうがよいと思いました。（死ぬほど長い文字列をいれても動くことは確認しましたが、ボタンが重なってインターフェイスが乱れたりします）

文字数制限は付けずに長い文字列を入れられた時に...で隠れるようにしました

バリエーションの管理はこのプラグインで行っていますが、登録自体はコアのregisterBlockVariationに任せていてそこに文字数制限は無いので、文字数制限は要らないかなと思った次第です！

• 本修正以前のことかもしれませんが、「ブログカードの抜粋」ブロックのスタイルのタイポグラフィーを変更してもエディタに反映されないように思います。（フロントには反映されているようです）

私の環境ではエディタでも反映されていました
タイポグラフィーはblock supportsで実装しているので今回の機能とは関係ないのではないかなと思っています

blog-card-excerpt.mp4

[mthaichi]

@shimotmk ご対応ありがとうございます。

• インナーブロックが存在しない時はバリエーション設定ボタンを非表示
• 長い文字列への対応

上記は確認しました。

ブログカードの抜粋のテキストサイズが変更できない件ですが、Lightningで症状を確認しました。X-T9は問題ありませんでした。どうもLightningでは

.editor-styles-wrapper p {
    font-size: var(--vk-size-text);
}

が効いているようです。これはどちらかというとテーマ側の問題でしょうかね。
いずれにせよ、別の問題ということで、Approveさせて頂きます。

[mthaichi]

どなたか２人目レビューお願いします。

[osmdik]

ありがとうございます。確認しました！
使いやすくとても便利な機能だと思います。
動作も特に問題ないと思いますので、このままマージします。