コアブロックのナビゲーションメニューの縦並び時の不具合修正

[mtdkei]

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

#244

どういう変更をしたか？

以下の点を修正しました。

• 編集画面で設定したgapが効かない
• サブメニューを含むメニュー項目にオンマウスしていないのにサブメニューが表示される
• サブメニューを含むメニュー項目のテキストと下矢印が横並びになっていない
• ブロックエディター上でサブメニューの色を設定していない時、背景が透明になる
• サブメニューのpaddingを追加

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

ソースコードについて

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• 関数名 / 変数名 / クラス名 / 保存値名 はそれだけで内容が想像できるものになっているか？紛らわしい命名になっていないか？
• 関数名 / 変数名 / クラス名 / 保存値名 は既存のコードの命名規則に沿ったものになっているか？

プログラムの変更の場合

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

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

その他

• readme.txt に変更内容は書いたか？
• Files changed (変更ファイル)の内容は目視でちゃんと確認したか？
• このチェック項目を機械的にチェックするのではなく本当にちゃんと確認をしたか？
• レビュワーが確認しないでリリースしてしまっても問題ないレベルまでちゃんと作りこみ・確認をしたか？

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

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

フッターのパターンブロックをコピペして以下をご確認ください。

• 編集画面で設定したgapが効いているか？(効いていない場合、gapが0になっています。)
• サブメニューを含むメニュー項目にオンマウスしていない状態では非表示になっているか？
• サブメニューを含むメニュー項目のテキストと下矢印が横並びになっているか？
• ブロックエディター上でサブメニューの色を設定していない時に背景が透明にならないか？
• サブメニューのpaddingを追加(効いていない場合、paddingが0になっています。)

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

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

---

レビュワー向け

確認して変更が反映されていない場合の確認事項

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

[sysbird]

@mtdkei
確認しました、ありがとうございます！

@kurudrive
ねんのため確認してマージお願いしたいです

[kurudrive]

@mtdkei @sysbird
うーむ、難しいところですね...。
これ解除すると既存のサイトのメニューの gap が広がっちゃうのよね...。
アップデートで既存サイトの表示が変わらない事は非常に注意しないといけないので、

[kurudrive]

とりあえず gap が効かない問題はこのブランチから切り離して、別の issue / プルリク とした方が良いかなと思います（・ｗ・

[kurudrive]

@mtdkei これって、他のセレクタからの padding:0.8em 指定に負けて効いてなくないです（・・？

[mtdkei]

@kurudrive
ご確認ありがとうございます。
ご指摘の点は修正しました。

gapが効かない部分はどうしましょう。確かに既存の縦並びメニューにも影響がありそうで難しいです。

[goutetsuguma]

パターンの修正を確認しており、こちらのプルリクを確認しました。

gapが効かなかった件を修正しました。一度さらっと見ていただきたいと思いますので、2人目確認待ちにします

石川さんが確認途中でしたので石川さん確認待ちとします🙇

[kurudrive]

@mtdkei ありがとうございます。
縦方向のナビゲーションに限って指定しないと添付のようになってしまうかなと（・ｗ・

[mtdkei]

@kurudrive
ありがとうございます。フッターのみに適用されるように変更しました。
また、ヘッダーに適用されているサブメニューのカラーがフッターにも適用されるようにしました。

[kurudrive]

@mtdkei / Cc: @goutetsuguma @sysbird

変更ありがとうございます！
対象セレクタのクラス名を変更する場合、
もともとなぜそのセレクタになっていたのかを慎重に考えてみましょう（・ｗ・ｂ

この場合、"__responsive-container" が対応になってますが...
よくよく考えたらこのCSSは常時表示のメニュー（ハンバーガーメニューに切り替わらないメニュー）でも当てないといけない内容でしたので、それに気づいてなくて __responsive-container をセレクタにしていた僕の認識間違いです。
なので、このクラス名の変更自体は正しいです。ありがとうございます。

ただ、ここを変更するという事は 他に __responsive-container をセレクタにしている箇所がある場合は同じ勘違い・不具合が発生している可能性が考えられます。
となってくると、これは "縦並びの不具合修正" とは別の意図になってきますので、別のプルリクにしました。
#314

実際こういった感じで、テーマのCSSの修正は元の意図がわかりにくかったり、得にこのテーマはフルサイト編集が初期の頃に手探りで作ったものなので、現行の仕様では不要になった指定や、単純な僕の間違いなども含んでいる事もあり、何気に修正が難しいです。

各意図を把握した上でプルリクを分けないと、後から「なんでこれに指定したんだろう」と思った時も追いにくくなるので、注意しましょう。

実際こういう修正作業は難しいというか、「他人が作ったモノの意図なんかわかるかい！」という部分も多分に含んでしまうので、ものすごく触りにくいと思います。
「そんなん作った石川さんじゃないと気づかないじゃん」案件だと僕も思います。

それを踏まえて、他の人が見て意図がわかるようにテーマのCSSでは特にコメントなど工夫したり、プルリクを細かく区切って出した方がいいかもしれません。

無理難題な気は僕もしているのですが、テーマのCSSを変更する時はそのあたりも気にしつつよろしくお願いいたします。
(￣人￣)

[mtdkei]

確かにおっしゃる通りです。ありがとうございます。
プルリクとしてこちらに出していいものか迷ってた部分がありましたのでご確認いただけて幸いです。
今後クラス名を変更する場合はこの点を特に気をつけてみてみたりコメントアウトを残します。

[kurudrive]

#315 の後で再確認

[mtdkei]

@kurudrive ナビゲーションリファクタリングのプルリクがCloseになっていますので、このプルリクはもう閉じても大丈夫でしょうかね？

[kurudrive]

@mtdkei はい、せっかく調整いただいたのにすみません (￣人￣)