[shail-mehta]

What?

Related: #43241

Enable typography Fit text support on the Post Title block (core/post-title) so the title can scale to fill its container width.

Why?

Heading, Paragraph, and Site Title already support Fit text. Post Title is commonly used as a large, prominent heading and should behave the same way for consistent layouts in themes and templates.

How?

Opt in via "fitText": true under supports.typography in block.json. Existing fit-text block support (editor control, has-fit-text class, frontend script module) applies automatically. Docs and changelog updated to match.

Testing Instructions

• In the Site Editor or post editor, insert or select a Title (core/post-title) block.
• Open Typography and enable Fit text.
• Confirm the title scales to the container width in the editor.
• Resize the container (e.g. column/group width or viewport) and confirm the text resizes.
• Enable Make title a link, then confirm Fit text still works.
• Save and check the front end; Fit text should still apply.

Screenshots or screencast

Use of AI Tools

• Yes, for the PR Description

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +383 B (0%)

Total Size: 8.65 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-library/index.min.js	442 kB	+12 B (0%)
build/styles/block-library/editor-rtl.css	13 kB	+5 B (+0.04%)
build/styles/block-library/editor-rtl.min.css	10.6 kB	+5 B (+0.05%)
build/styles/block-library/editor.css	13 kB	+4 B (+0.03%)
build/styles/block-library/editor.min.css	10.6 kB	+5 B (+0.05%)
build/styles/block-library/post-title/editor-rtl.css	92 B	+92 B (new file)	🆕
build/styles/block-library/post-title/editor-rtl.min.css	84 B	+84 B (new file)	🆕
build/styles/block-library/post-title/editor.css	92 B	+92 B (new file)	🆕
build/styles/block-library/post-title/editor.min.css	84 B	+84 B (new file)	🆕

_{From 816ffb2, not the current head. Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	795c35b	trunk	% Change
timeToFirstByte	55.2 ms +22.74% -3.53%	56.55 ms +9.46% -7.25%	-2.39%
largestContentfulPaint	96 ms +10.42% -6.25%	92 ms +4.35% -4.35%	4.35%
lcpMinusTtfb	37.8 ms +12.83% -8.07%	34.65 ms +12.41% -6.93%	9.09%
wpBeforeTemplate	29.42 ms +18.18% -3.37%	29.44 ms +17.46% -3.7%	-0.07%
wpTemplate	21.8 ms +7.52% -3.81%	21.34 ms +5.86% -4.55%	2.16%
wpTotal	51.5 ms +22.29% -3.36%	52.82 ms +8.6% -7.86%	-2.5%
wpMemoryUsage	7.64 MB +0% -0%	7.61 MB +0% -0%	0.46%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	795c35b	trunk	% Change
timeToFirstByte	47.5 ms +7.05% -3.58%	41.8 ms +4.07% -1.91%	13.64%
largestContentfulPaint	104 ms +3.85% -3.85%	92 ms +0% -4.35%	13.04%
lcpMinusTtfb	55.7 ms +3.05% -0.81%	48.15 ms +3.95% -1.97%	15.68%
wpBeforeTemplate	27.35 ms +7.64% -2.82%	26.61 ms +2.29% -1.13%	2.78%
wpTemplate	16.43 ms +1.77% -2.74%	12 ms +2.5% -1.75%	36.92%
wpTotal	44.37 ms +7.3% -3.85%	38.81 ms +4.46% -1.7%	14.33%
wpMemoryUsage	6.32 MB +0% -0%	6.17 MB +0% -0%	2.39%
wpDbQueries	13 +0% -0%	9 +0% -0%	44.44%

media-processing

Metric	795c35b	trunk	% Change
mediaProcessingJpeg	399.58 ms +1.74% -0.98%	403.1 ms +0.52% -0.69%	-0.87%
mediaProcessingAvif	6043.42 ms +0.3% -0.22%	6084.12 ms +0.31% -0.18%	-0.67%
mediaProcessingJpegToAvif	4176.6 ms +0.24% -0.05%	4210.63 ms +0.12% -0.62%	-0.81%

media-upload

Metric	795c35b	trunk	% Change
jpegUploadProcessing	1679.29 ms +15.22% -15.66%	1425.58 ms +0.73% -0.59%	17.8%
pngUploadProcessing	213.75 ms +2.69% -16%	192.24 ms +15.8% -6.76%	11.19%
largeJpegUploadProcessing	1425.89 ms +0.25% -0.74%	1410.98 ms +0.29% -0.52%	1.06%
multipleImageUploadProcessing	1596.6 ms +1.24% -0.36%	1582.63 ms +1.1% -2.17%	0.88%

post-editor

Metric	795c35b	trunk	% Change
serverResponse	345.84 ms +6.95% -8.22%	316.48 ms +9.54% -3.72%	9.28%
firstPaint	362.73 ms +22.26% -30.13%	418.02 ms +3.78% -11.77%	-13.23%
domContentLoaded	994.73 ms +4.79% -2.6%	929.09 ms +4.48% -1.08%	7.06%
loaded	995.79 ms +4.82% -2.57%	930.32 ms +4.47% -1.07%	7.04%
firstContentfulPaint	443.99 ms +1.81% -2.68%	421.71 ms +2.87% -1.84%	5.28%
firstBlock	2810.92 ms +2% -2.03%	2735.68 ms +3.41% -0.54%	2.75%
type	17.28 ms +3.94% -1.16%	16.46 ms +7.23% -4.8%	4.98%
typeWithoutInspector	17.01 ms +2% -2.23%	16.38 ms +2.32% -5.56%	3.85%
typeWithTopToolbar	20.95 ms +13.46% -1.34%	20.8 ms +5.48% -5.72%	0.72%
typeContainer	7.63 ms +3.54% -11.8%	7.13 ms +4.63% -3.37%	7.01%
focus	103.49 ms +4.83% -8.31%	94.38 ms +7.27% -2.36%	9.65%
firstFocus	188.85 ms +0% -0%	174.14 ms +0% -0%	8.45%
selectAll	475.02 ms +3.89% -2.2%	432.76 ms +11.82% -2.43%	9.77%
listViewOpen	63.89 ms +3.65% -6.67%	59.06 ms +2.86% -5.91%	8.18%
inserterOpen	33.73 ms +5.07% -7.2%	31.38 ms +2.61% -7.87%	7.49%
inserterHover	10.07 ms +5.96% -6.36%	10.17 ms +6.1% -10.91%	-0.98%
inserterSearch	6.93 ms +10.1% -1.88%	6.86 ms +2.77% -4.66%	1.02%
loadPatterns	507.42 ms +4.48% -1.37%	507.08 ms +2.42% -2.55%	0.07%
wpTotal	336.88 ms +6.29% -8.41%	307.77 ms +9.27% -3.75%	9.46%
wpMemoryUsage	13.58 MB +0% -0%	13.54 MB +0% -0%	0.28%
wpDbQueries	55 +0% -0%	55 +0% -0%	0%

site-editor

Metric	795c35b	trunk	% Change
serverResponse	497.57 ms +4.96% -3.97%	480.96 ms +4.6% -7.16%	3.45%
firstPaint	253.33 ms +6.76% -3.83%	241.13 ms +9.54% -11.43%	5.06%
domContentLoaded	1243.77 ms +0.71% -0.65%	1241.67 ms +1.22% -1.03%	0.17%
loaded	1245.01 ms +0.69% -0.65%	1242.86 ms +1.21% -1.04%	0.17%
firstContentfulPaint	516.22 ms +1.19% -2.87%	508.34 ms +1.89% -1.4%	1.55%
firstBlock	4638.65 ms +0.23% -0.66%	4611.54 ms +0.62% -0.67%	0.59%
type	18.68 ms +4.18% -4.39%	18.43 ms +1.84% -5.05%	1.36%
navigate	113.7 ms +6.13% -5.25%	115.41 ms +7.62% -3.28%	-1.48%
loadPatterns	1292.92 ms +10.45% -4.47%	1290.1 ms +7.96% -7.48%	0.22%
loadPages	1024.66 ms +0.46% -2.38%	1022.35 ms +0.45% -1.4%	0.23%
wpTotal	487.71 ms +5.11% -3.95%	471.42 ms +4.74% -7.39%	3.46%
wpMemoryUsage	12.62 MB +0% -0%	12.58 MB +0% -0%	0.29%
wpDbQueries	44 +2.27% -0%	44 +2.27% -0%	0%

_{8a709b9 Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt.

Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35

can add a block from the link search results in /test/e2e/specs/editor/blocks/navigation-list-view.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → POST http://localhost:8889/wp-json/wp/v2/navigation
    - user-agent: Playwright/1.63.0 (x64; ubuntu 24.04) node/24.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: ee69a536d5
    - content-type: application/json
    - content-length: 695
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1792515986%7CL8EStdtQ3emooxjjeirBEhC60YQtVVqCYGBL7IazPrq%7C601db530bec6ccc1c330003762d7fc12d52ff853eab58e1e60bbf53c427b24ec; wp-settings-time-1=1792343275

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.createRecord (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/records.ts:20:14)
    at RequestUtils.createNavigationMenu (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/menus.ts:63:14)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/navigation-list-view.spec.js:294:23

should cut and paste individual blocks with collapsed selection in /test/e2e/specs/editor/various/copy-cut-paste.spec.js, passed after 1 failed attempt.

Error: expect(string).toMatchSnapshot(expected) failed

  @@ -1,3 +1,3 @@
   <!-- wp:paragraph -->
  -<p>2Cut - collapsed selection</p>
  +<p>2</p>
   <!-- /wp:paragraph -->


    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:45:49

_{8a709b9 Run}

[aaronrobertshaw]

As mentioned over on #83034, the same applies here.

I recently finished an audit of design tooling across the block library, and I'm now working through the resulting adoptions from #43241 with an automated process. It keeps #43241 up to date as it goes, and every PR it opens follows the decisions from the audit, with testing instructions and screenshots for each state the support needs.

Leaving design tool adoption PRs to that process is probably the fastest and cleanest way to get these changes to users. It will also mean a lot of PRs, and reviewing and testing them is where help would make the biggest difference. Would you be open to me pinging you for review and testing as they come up?

[aaronrobertshaw]

Thanks for tackling this one @shail-mehta 🙇

This is testing ok for the most part. I tested the Post Title block on its own, with and without "Make title a link", and inside a Query Loop, in the editor and on the frontend at desktop and mobile viewports.

On a single post it works. The title fills its container, scales down at mobile width, and turns off cleanly.

There's one problem that needs sorting before this ships:

Query loop in the editor

Every title in the loop gets the same size, so longer titles overflow and get clipped. The frontend sizes each title separately, so the editor and the frontend do not match.

The cause isn't introduced in this PR. The fit text hook writes the size to #block-${clientId} and every item in a Post Template shares that ID.

The Post Title block is the first text block whose text changes per item, so this is the first PR that makes this issue visible. Heading, Paragraph, Site Title, and Site Tagline all render the same text in every loop item, so they never show it.

This might need to be fixed in the hook first before this PR can ship.

Taking a step back here, I'm not sure about Post Title adopting fit text support. Unlike the Site Title, post titles might vary more wildly, which would make the contrast between short titles scaling to a huge size vs long titles becoming tiny in size, much more jarring.

I'd be keen to get others opinions here on this one.

---

To reproduce flagged issue:

1. add a Query Loop with three posts of very different title lengths,
2. turn on Fit text for the Post Title inside it,
3. and compare the editor with the front end.

[shail-mehta]

Thanks for the feedback! I will work on this.

[shail-mehta]

Resolved Conflcts in 28c8673

[aaronrobertshaw]

Took another look at this one. GitHub shows conflicts, so I tested it on a local rebase onto trunk.

✅ The Query Loop problem from my last review is fixed on trunk by #83985.
✅ Each title in a loop now gets its own size.
✅ The editor matches the front end at desktop and mobile widths.
✅ Single titles, linked titles and turning Fit text off all work as expected.

Needs changing

• Can we drop the !important rule? Rich text only adds pre-wrap when the editable has no white-space already. Passing style={ { whiteSpace: fitText ? 'inherit' : 'pre-wrap' } } on the linked PlainText does the same job, so editor.scss and editorStyle can go. Both values are needed, or turning Fit text off leaves the title at normal. I tested it locally and everything matched.
• The branch conflicts with trunk in the block library changelog. When rebasing, keep the entry under Unreleased rather than a released section.

[shail-mehta]

Thanks for the feedback!

I have addressed both points in latest commit.

[aaronrobertshaw]

Thanks for the updates @shail-mehta. Both points from my last review are sorted.

I tested Fit text on Post Title in the post editor, a site editor template and the front end:

✅ The title fills its container at full content width and inside a 320px group.
✅ The editor and the front end match at desktop and mobile widths.
✅ Linked titles work too.
✅

Turning Fit text off brings back the normal size and wrapping.

This looks good to go.