[Murota]

【お使いの unitone のバージョン】バージョン: 19.3.2
【お使いのブラウザ】Chrome

 

### 発生している問題

いつもお世話になっております。

ナビゲーションメニュー内にボタンを設置した時に、最小幅を設定しても反映されない現象がありました。

（ナビゲーション内だと「 –unitone–min-width」が効いていないっぽい…？）

ご確認いただけますと幸いです🙇‍♂️

♥ 0

いいねをした人： いません

[inc2734]

ご報告ありがとうございます！ナビゲーションの項目がフレックスボックスになっているから、内容量に応じて縮んでしまうみたいでした。修正を入れようと思いますが、念の為、下記の CSS を追加するとどうなるか確認してもらえないでしょうか？

.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content > * {
  flex: 1 1 auto;
}

僕の環境では特にメニューの崩れは発生せず、ボタンも指定した最小幅になりましたが、念の為試してみていただけると助かります！

♥ 0

いいねをした人： いません

[Murota]

ありがとうございます！

 

いただいたコードを追加したところ、ナビゲーションブロック単体の場合は最小幅が機能しました。（ただし、エディター上では反映されませんでした）

 

また、どうも両端ブロックとの相性もありそうな感じでした。

• 両端ブロック
  • サイトロゴ
  • ナビゲーション

というよくあるヘッダー構成にしたところ、いただいたコードを追加しても最小幅が効きませんでした🤔

♥ 0

いいねをした人： いません

[inc2734]

検証ありがとうございます！どうもエディター上とフロントでナビゲーションブロックの HTML 構造がが違う影響で、エディター用のセレクタも指定しておかないといけないみたいでした。

.wp-block-navigation__container.block-editor-block-list__layout, // for Site Editor
.wp-block-navigation__responsive-container-content {
  > * {
    flex: 1 1 auto;
  }
}

僕の環境ではこれで大丈夫そうだったので、一旦これでアップデートしようと思います。アップデート後、また確認いただければと思います。

ということでアップデートまでしばしお待ちください…。

♥ 0

いいねをした人： いません

[inc2734]

今 v19.3.3 としてリリースしました！

♥ 0

いいねをした人： いません

[Murota]

ありがとうございます！

アップデートしたところ、最小幅が効いていることが確認できました。

 

ただ、やはり両端ブロック内にナビゲーションブロックを設置すると最小幅は効きませんでした。

追加CSSで最小幅は設定できるので、両端ブロックの特性としてわざわざ修正する必要もない気もしますが…。

♥ 0

いいねをした人： いません

[inc2734]

なるほどです。僕の環境でも両端ブロックの中に入れてるんですがなんでしょうね…。

そのページの URL を共有して頂くか、その部分のブロックのコードを共有して頂くことはできますか？

♥ 0

いいねをした人： いません

[Murota]

ご連絡が遅れてしまい、申し訳ありません…。

ローカルサイトで実験しているので、ブロックコードを共有させていただきます。

↓ヘッダー部分のコード

<!-- wp:unitone/section {"tagName":"div","unitone":{"maxWidth":"100%","padding":"-1"},"align":"full"} -->
<div class="alignfull unitone-section"><div data-unitone-layout="gutters"><div data-unitone-layout="container"><div data-unitone-layout="stack"><!-- wp:unitone/both-sides {"unitone":{"alignItems":"center","gap":{"column":"-1","row":"-2"}}} -->
<div data-unitone-layout="both-sides"><!-- wp:unitone/stack {"unitone":{"gap":"0"}} -->
<div data-unitone-layout="stack"><!-- wp:site-logo /-->

<!-- wp:site-title /--></div>
<!-- /wp:unitone/stack -->

<!-- wp:navigation {"ref":14,"className":"is-style-unitone-accordion","style":{"typography":{"fontWeight":"600","fontStyle":"normal"}},"fontSize":"unitone-s","layout":{"type":"flex","orientation":"horizontal","justifyContent":"left"}} /--></div>
<!-- /wp:unitone/both-sides --></div></div></div></div>
<!-- /wp:unitone/section -->

↓ナビゲーション部分のコード

<!-- wp:navigation-link {"label":"Sample1","type":"page","id":8,"url":"http://unitone.local/sample1/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample2","type":"page","id":10,"url":"http://unitone.local/sample2/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample3","type":"page","id":12,"url":"http://unitone.local/sample3/","kind":"post-type"} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"unitone":{"minWidth":"300px"},"className":"is-style-fill min-400"} -->
<div class="wp-block-button is-style-fill min-400"><a>サンプルボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

ご確認をお願いいたします。

♥ 0

いいねをした人： いません

[Murota]

すみません！

ナビゲーションのボタン部分に余計なクラスをつけていました。

正しくはこちらです。

<!-- wp:navigation-link {"label":"Sample1","type":"page","id":8,"url":"http://unitone.local/sample1/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample2","type":"page","id":10,"url":"http://unitone.local/sample2/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Sample3","type":"page","id":12,"url":"http://unitone.local/sample3/","kind":"post-type"} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"unitone":{"minWidth":"300px"},"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a>サンプルボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

あと、サンプルボタンの部分は class="wp-block-button__link wp-element-button" の a タグで囲まれています。

♥ 0

いいねをした人： いません

[inc2734]

ありがとうございます！再現できました！
僕の環境でできたと思っていたのは勘違いでした(TT)

ボタンブロックの最小幅、画面や親要素が小さいときでもはみださないように、min-width: min(100%, 指定した値) という CSS になっているのですが、この min(100% が両端ブロックと相性がわるいみたいで、入力した値（300px）よりも 100% のほうが優先されて縮んでしまうみたいでした。

min(100% を外せば解決はするのですが、そうすると本来の意図である「画面や親要素が小さいときでもはみださない」が達成できなくなるので、対応が難しいというか悩ましいというか、どうやれば良いかわからないです…。

なのでここは追加 CSS で対応頂くのがベストかなと思います。お手間おかけしてすみません！

♥ 1

いいねをした人：

[Murota]

丁寧なご対応ありがとうございました！

該当箇所はCSSで対応したいと思います。

本筋とはズレてしまいますが、divブロックやデコレーターブロックのおかげで、簡単な不具合やブロックの相性問題は簡単に修正できてしまうんですよね。

どこまで北島さんにご報告すべきなのか、と迷うことが時々あります…。

♥ 1

いいねをした人：

[inc2734]

本筋とはズレてしまいますが、divブロックやデコレーターブロックのおかげで、簡単な不具合やブロックの相性問題は簡単に修正できてしまうんですよね。

あとで僕が不具合に気づいて修正したときに影響がでる可能性もゼロではないと思うので、お手間でなければ報告いただいたほうが安定しやすいかな？とは思います！（もちろん今回のように unitone 側で修正・変更できない場合もあるとは思いますが…

♥ 0

いいねをした人： いません

[Murota]

おっしゃる通りですね！

後方互換性や、安定性を考えるとunitone自体を修正していただいた方が良い気がします。

今後も度々ご報告させていただくことになるかもしれませんが、よろしくお願いいたします。

本件もありがとうございました！

♥ 1

いいねをした人：

[投稿者]

投稿