Non-wrapping source nav row wraps as core/navigation (tablet header grows 96 -> 128px)
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 45/100
Research direction
Start with the reduced case: a flex nav that stays one row in source but becomes a wrapping core/navigation at 768px, where the header goes from 96px to 128px. Find where the converter maps source flex rows to core's layout attributes, and where the engine emits the responsive rule that forces flex-wrap:wrap on .wp-block-navigation__container. Done when a non-wrapping flex row emits flexWrap:nowrap and the container rule uses var(--navigation-layout-wrap, wrap), with the 768px header height matching the source.
Written by the indexing model from the issue text.
Description
Problem
A source navigation row that never wraps is converted into a core/navigation that wraps its items onto a second line once the row runs out of room. The header then grows.
In CSS, flex-wrap defaults to nowrap, so a source nav{display:flex} keeps a single row and lets each item's label wrap inside its own slot. core/navigation defaults to wrap instead (--navigation-layout-wrap). On top of that, the engine's own responsive list-navigation rule hard-codes flex-wrap:wrap on .wp-block-navigation__container. So even a native layout.flexWrap:"nowrap" (core adds .no-wrap) is overridden.
Reduced case
<style>.bar{display:flex;justify-content:space-between;padding:14px 32px}.links{display:none;gap:32px;align-items:center}@media (min-width:768px){.links{display:flex}}</style>
<header><div class="bar"><a href="/">Brand</a><nav class="links"><a href="/a">Services</a> … 8 links incl. a padded CTA</nav></div></header>
Real import (modusdigitaluk.co.uk), header height:
| width | source | WordPress |
|---|---|---|
| 1440 | 76 | 76 |
| 768 | 96 | 128 (items drop to a 2nd row) |
At 768 the source items are 45x40 and 44x60 (their labels wrap) with the CTA at 91x67, all on one row.
Expected
- When the source row is a flex row that no viewport sets to wrap or column, emit core's native
layout:{type:flex, flexWrap:nowrap}. - The engine's responsive container rule should follow core's
var(--navigation-layout-wrap, wrap)instead of forcingwrap.
AI assistance: Claude (Anthropic) via Pi, under Chris Huber's direction.
- Dominant language
- PHP
- Stars
- 21
- Forks
- 2
- Avg merge
- 8h 50m
- Merged PRs (30d)
- 609
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from Automattic/blocks-engine
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/blocks-engine#3090 ·
Maintainers usually reply within 1 day
-
Solved site promotion gate fails on runner PHP patch drift (expects 8.2.33, runner installs 8.2.34)Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Automattic/blocks-engine#2161 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Automattic/blocks-engine#2061 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Automattic/blocks-engine#1701 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Automattic/blocks-engine#775 ·
Maintainers usually reply within 1 day
All issues in Automattic/blocks-engine
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 79/100
Maintainers usually reply within 1 day
-
[2.5] Admin GraphQL attributeValues.value reads price from integer_value instead of float_valueOpen
Difficulty 2/5 1-3 hours Newbie friendliness 69/100
bagisto/bagisto-api#54 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
grokability/snipe-it#19869 · 2 comments ·
Maintainers usually reply within 1 day
-
regression
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
sync-en
Difficulty 1/5 Under an hour Newbie friendliness 82/100
Maintainers usually reply within 1 day