画像ブロックの丸抜きスタイルを正方形でない画像でも正円に切り抜くようにしたい

[miminari]

Trello からおひっこし
https://trello.com/c/29R7xTOv

要望、仕様：
画像ブロック（コア）の標準スタイルで正円を実現する。

実現方法

1. CSSで object-fit: cover 追記と フロント側のJSによって正円化する。　△
   　→ 正円にするというスタイル変更のためだけにフロント側をJSでDOM操作するのは微妙。
2. object-fitコンポーネントを作成、コアの画像ブロックとは別に新規にカスタムブロック化して実現する。　△
   　→ フロント側がきれいになるけれど、ユーザーに2つのブロックの違いを理解させる必要がある。開発工数がかかる。

現状、都度正円の画像を用意してもらえば実現出来るものではあること、コアのブロックの標準スタイルなのでいずれ手が入ることなどを鑑みると他に注力し方が良い気がします。

[miminari]

e2e で画像ブロックでシェイプが丸抜きスタイルに指定されている時、
画像の横幅が指定されたら、heightがインラインスタイルで指定されるかどうかのテストを書く

[miminari]

@kurudrive すみません、取り掛かる前に私が仕様を少し勘違いしていたのですが、検証の結果、
object-fitをコントロールするコンポーネントを作成し、コアのブロックとは別のブロック化することで実現はできるとは思います。
が、その場合は開発コストがかかりすぎるということとユーザーの使いやすさとして微妙だな、というのがあります。

また、ちょうどコアで
[Block Library - Post Featured Image]: Add basic dimension controls by ntsekouras · Pull Request #31634 · WordPress/gutenberg
アイキャッチ画像に対してobject-fitのコントロールを行うPRが動いていますので、たぶんこれがうまくいけばobject-fitのコントロールができるコンポーネントが出来ると思うのでこれを待ったほうが良い気がします。

[miminari]

figure.wp-block-image{
    --rounded-image-width: min(80vw, 300px);
    &.is-style-rounded {
        img {
            object-fit: cover;
            width: var(--rounded-image-width);
            height: var(--rounded-image-width);
        }
    }
}

みたいなTIPSをブログとかでシェアするだけで良い気もします。

[miminari]

あとは、別にもうひとつ正円、というカスタムスタイルを追加してあげて、上記のスタイルみたいな感じを当てて提供すると、UI上で正円が分かるから喜ばれる気はします。

[miminari]

直前に書いた代替案が良い気がするので、これで実装してPR出してみます。object-fit control が出てくるまでの場繋ぎ的なスタイルだけど。

[miminari]

WordPress/gutenberg#31634
まだOPENしているので、5.8では入らないから続きをやります

[miminari]

@kurudrive @goutetsuguma 対応しかけて色々触ってたら、画像ブロックのクロップ機能で正円が作れるようになってました！のでこちら対応必要なし、ということでクローズします！

[kurudrive]

@miminari 了解でーす！