[ アニメーション / 固定表示 / Outer ] X-T9で フル幅／ワイド配置を可能にし、全幅や幅広のブロックを該当ブロックでラップしたときに編集画面で全幅や幅広にならないのを修正しました

[mtdkei]

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

#2384

どういう変更をしたか？

ブロックテーマでは、親ブロックが layout を適切にサポートしていないと、子ブロック（core/cover）で wide/full を選択できなくなる 仕様になってました。
そのため、ブロックごとにlayoutをサポートすることになります。サポートをすると「コンテント幅を使用するインナーブロック」というトグルが出てくるのでそれをONにすると設定可能なためそのようにしました。

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

変更前 Before

変更後 After

実装者の確認事項

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

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• readme.txt に記載の変更内容はエンドユーザーが見て変更の概要がわかるように書かれているか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

• 書けそうなテストは書いたか？→ layoutをサポートしただけなのでスキップ

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

X-T9とLightiningで確認しました。

• 以下のブロックで全幅やワイド幅にしたカバーブロックやOuterを囲った場合、変更後 Afterのスクショのように全幅やワイド幅が選べるようになりました。
  • アニメーション
  • 固定表示
  • Outer
• フロントエンドでも適切に対応されておりました。

TT5ではデフォルトテーマ用のCSSの対応が必要そうですが、このプルリクによる影響は良い意味でも悪い意味でも見受けられないため、ひとまずWPの機能サポートのみにしました。

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

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

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

実装者と同じ確認を行ってください。
他にも対応した方がいいブロックがありましたらご連絡ください。

---

レビュワー向け

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

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

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

[akito-38]

@mtdkei

こちら確認しました。
使ってるテンプレートによって挙動が異なるようです。
以下確認したものをまとめてみました。

	トグルが出る	全幅や幅広になる
Lightning	×	○
X-T9	○	○
Twenty Twenty-Five	○	○
Twenty Twenty-Four	○	○
Twenty Twenty-Three	○	○
Twenty Twenty-Two	○	○
Twenty Twenty-One	×	○
Twenty Twenty	×	○
Twenty Nineteen	×	○
Twenty Seventeen	×	×

トグルが出るテーマについては、トグルをオンにすると全幅や幅広が選択できるようになりますが、これは想定通りだと思います。
トグルはブロックテーマでないと出てこないという認識でよさそうですね。

また、developブランチでも、Lightningは全幅や幅広を選択できました。

Twenty Seventeenは古いテーマですし、今の実装で問題無いと思いますがどうでしょうか？
問題無いようでしたら承認したいと思います。
ただ、developブランチでも、Lightningだけ全幅や幅広を選択できるのが不思議ではありますね。

[mtdkei]

@akito-38
色々ご確認いただきありがとうございます。

トグルはブロックテーマでないと出てこないという認識でよさそうですね。

おっしゃる通りで、そのような認識でお願いいたします。

Twenty Seventeenは古いテーマですし、今の実装で問題無いと思いますがどうでしょうか？

そうですね、問題ないかと思います。
私も初めて知ったのですが、どうやらTwenty Seventeenではalignwide や alignfull をサポートするためのadd_theme_support( 'align-wide' );がfunctions.phpになかったので、線幅や幅広がそもそも使えなさそうでした。

[akito-38]

@akito-38
そうなんですね。確認ありがとうございます。
承認しておきました。
二人目の方、確認お願いいたします。

[sysbird]

確認中です
もとの issue は lightning での現象を報告しているように受け取りましたが、
このプルリクで issue は解決されていないように見えます
このプルリクは x-t9 のための対応で、 x-t9 のみ確認すればよいでしょうか？ > @mtdkei

[mtdkei]

ありがとうございます！
issueを見返したのですが、issue元ではLighitningという表記が私の確認した限りでは見当たりませんでした。

変更理由のリンク先についてこちらの説明が抜けておりまして申し訳ありません。

このプルリクでは宮本さんの
#2384 (comment)

アニメーションブロックでラップされたカバーブロックは全幅や幅広を選択する事ができません。
issuesで上げていただいたような状態にするには、ルートに配置されたカバーブロックに全幅や幅広を設定してからアニメーションブロックの中に入れる必要があります。

のコメントに対して久納さんが

コメントありがとうございます。X-T9などのブロックテーマにしたら全幅や幅広を選択できなくなることが確認できました。

というコメントを書かれておりまして、それを修正するためにアップしました。
そのため、まずはLightningなどのクラシックテーマと同じく、アニメーション等でラップされても全幅や幅広を選択する事ができる状態にすることが目的でした。

[sysbird]

@mtdkei @goutetsuguma
そうなんですね
理解が足らず申しわけありません
もとの issue でテーマは特定されていませんが、まず再現させようとしたときに Lightning で再現したのでそのように受け取った次第です

経緯があるのでしたら、@goutetsuguma さんに確認していただいたほうがスムーズですね
途中ですみませんがお願いします！

[mtdkei]

@sysbird
いえいえ、考えてみたらパッと見よくわからない書き方になってたのでご指摘いただけてありがたかったです…！

[goutetsuguma]

@sysbird
確認ありがとうございます、ややこしくなりすみません、、、！

もとの issue は lightning での現象を報告しているように受け取りましたが、
このプルリクで issue は解決されていないように見えます

Lightning では編集画面で全幅のカバーブロックをアニメーションでラップしたところ、編集画面でずれてしまうようですので、こちらはLightningのissue に書いておこうと思います。

@mtdkei
調整ありがとうございます！
ブロックテーマで確認して、アニメーション / 固定表示 / Outerで layout 制御がサポートされていることが確認できました。
マージします。