|
| 1 | +# Gutenberg #79372 — Post Title link is `inline-block`, breaking float / `shape-outside` wrapping |
| 2 | + |
| 3 | +**Status:** reserve fix prepared, held. Issue is filed and a maintainer has triaged |
| 4 | +it as a confirmed bug; no core PR yet. Open the PR (or, first, post the archaeology |
| 5 | +below as a comment) when ready. |
| 6 | + |
| 7 | +- Issue: <https://github.com/WordPress/gutenberg/issues/79372> — triaged `[Type] Bug` |
| 8 | + / `[Block] Post Title`, otherwise idle since 2026-06-22. |
| 9 | +- Patch: [`gutenberg-79372-post-title-inline-float.patch`](gutenberg-79372-post-title-inline-float.patch) |
| 10 | +- Filed issue text (source of record): [`gutenberg-issue-draft.md`](gutenberg-issue-draft.md) |
| 11 | +- Repro: [`chrome-float-repro.html`](chrome-float-repro.html) and |
| 12 | + [`../sidebar-thumbnail-layout.md`](../sidebar-thumbnail-layout.md) |
| 13 | +- Theme-side workaround already shipped: a float style variant scopes the title link |
| 14 | + back to `display: inline` |
| 15 | + (`.sidebar-content:not(.is-grid) .sidebar-entry > .wp-block-post-title :where(a)`). |
| 16 | + |
| 17 | +## The problem |
| 18 | + |
| 19 | +Core styles the link inside the Post Title block as an atomic inline box: |
| 20 | + |
| 21 | +```scss |
| 22 | +// packages/block-library/src/post-title/style.scss → .wp-block-post-title :where(a) |
| 23 | +:where(a) { display: inline-block; } |
| 24 | +``` |
| 25 | + |
| 26 | +An `inline-block` is an atomic inline-level box: its contents may wrap internally, but |
| 27 | +the box itself cannot split across the separate line boxes a float creates beside and |
| 28 | +below it. So a linked Post Title flowing around a `float` (or `shape-outside`) **drops |
| 29 | +whole below the float** the moment it is too wide for the line box beside it, instead |
| 30 | +of wrapping its text beside and under the float. A plain inline link wraps correctly. |
| 31 | +This is spec-correct CSS, not a browser bug — it reproduces in any engine (including |
| 32 | +headless Chrome) at a narrow-enough column. |
| 33 | + |
| 34 | +## Why the `inline-block` is there — and why the front end doesn't need it |
| 35 | + |
| 36 | +Archaeology on `post-title/style.scss` (2026-07-04): |
| 37 | + |
| 38 | +- The `display: inline-block` on the link was introduced by |
| 39 | + [#30666](https://github.com/WordPress/gutenberg/pull/30666) (2021-04-13), |
| 40 | + *"Fix Post Title warnings for RichText in inline containers."* Its **sole** purpose |
| 41 | + is to silence the editor warning *"RichText cannot be used with an inline |
| 42 | + container"* — an **editor-only** concern (`RichText` is the block editor's editable |
| 43 | + component; it does not exist on the front end). |
| 44 | +- [#43457](https://github.com/WordPress/gutenberg/pull/43457) added padding support, |
| 45 | + but the padding / `box-sizing: border-box` it introduced apply to the |
| 46 | + `.wp-block-post-title` **wrapper**, not to the `<a>`. The link's `inline-block` is |
| 47 | + unrelated to padding. |
| 48 | +- [#64911](https://github.com/WordPress/gutenberg/pull/64911) and |
| 49 | + [#65307](https://github.com/WordPress/gutenberg/pull/65307) added and then |
| 50 | + consolidated the `font-*: inherit` rules on the link (so a linked title inherits the |
| 51 | + block's typography). Those `inherit` rules are load-bearing; the `display` line just |
| 52 | + rode along into the consolidated `:where(a)` block. |
| 53 | + |
| 54 | +The rule lives in `style.scss`, which loads on **both** the editor and the front end. |
| 55 | +So an editor-only requirement is silently constraining every front-end theme that |
| 56 | +wants a magazine-style float beside a post title. |
| 57 | + |
| 58 | +## The fix |
| 59 | + |
| 60 | +Make `display: inline-block` **editor-only**. On the front end the link becomes a |
| 61 | +normal `inline` link and wraps around floats; in the editor the RichText warning stays |
| 62 | +silenced. Nothing else about the block changes — typography inherits, wrapper padding, |
| 63 | +and `box-sizing` are untouched. |
| 64 | + |
| 65 | +The patch does three things: |
| 66 | + |
| 67 | +1. `post-title/style.scss` — remove `display: inline-block;` from `:where(a)` (front |
| 68 | + end + editor no longer forces it via the shared stylesheet). |
| 69 | +2. `post-title/editor.scss` (**new**) — re-add `display: inline-block` on the link, |
| 70 | + with a comment pointing at #30666 and #79372. Editor styles load only in the |
| 71 | + editor. |
| 72 | +3. `block-library/src/editor.scss` — `@use "./post-title/editor.scss"` so the new |
| 73 | + partial is compiled into the aggregated editor bundle (the block-library |
| 74 | + convention; post-title's `block.json` needs no `editorStyle` key because editor |
| 75 | + partials are aggregated here, not registered per block). |
| 76 | + |
| 77 | +## Verifying |
| 78 | + |
| 79 | +CSS-only change; no unit test harness. Verify by observation: |
| 80 | + |
| 81 | +- **Editor** — add a Post Title block, enable *Make title a link*, open the browser |
| 82 | + console: the *"RichText cannot be used with an inline container"* warning must |
| 83 | + **not** reappear. (Confirms the editor.scss rule is loading.) |
| 84 | +- **Front end** — render a linked Post Title beside a floated element in a narrow |
| 85 | + column (the [`chrome-float-repro.html`](chrome-float-repro.html) matrix, or a real |
| 86 | + Dirtbag sidebar entry). The title text must wrap **beside and under** the float, not |
| 87 | + drop whole below it. Inspect the link: computed `display` is `inline`, not |
| 88 | + `inline-block`. |
| 89 | +- **No regression** — a normal (wide-column) linked title looks identical to before; |
| 90 | + wrapper padding and typography are unchanged. |
| 91 | + |
| 92 | +## Turning this into a PR (when ready) |
| 93 | + |
| 94 | +1. `git clone https://github.com/WordPress/gutenberg && cd gutenberg && npm ci` |
| 95 | +2. `git apply ../dirtbag/docs/repro/gutenberg-79372-post-title-inline-float.patch` |
| 96 | + (rooted at the repo top, `a/packages/...`; creates `post-title/editor.scss`). |
| 97 | +3. `npm run build:package-types` is not needed; rebuild styles / run the editor to |
| 98 | + verify per **Verifying** above. |
| 99 | +4. Open the PR against `trunk`, referencing #79372, summarising: *"Post Title: keep |
| 100 | + the title-link `inline-block` in editor styles only, so the front-end link can wrap |
| 101 | + around floats / `shape-outside`."* Explain the #30666 origin so reviewers see the |
| 102 | + editor warning is preserved. |
| 103 | +5. No self-prop; credit per the project's contributor-attribution norms. |
| 104 | + |
| 105 | +## Before opening a PR — consider commenting first |
| 106 | + |
| 107 | +Unlike #79380 (an unambiguous a11y fix), this touches a decision core made |
| 108 | +deliberately, so the highest-value first step may be to **post the archaeology above |
| 109 | +as a comment on #79372** — the #30666 origin, that the constraint is editor-only, and |
| 110 | +the proposed editor-scoped fix — and let a maintainer confirm the direction before a |
| 111 | +PR. The issue was filed as a question (*"Is `display: inline-block` load-bearing?"*); |
| 112 | +this answers it. If a maintainer prefers to keep the runtime constraint or fix it |
| 113 | +differently, the theme-side float variant stays as the local fix and this patch is |
| 114 | +retired. |
0 commit comments