Block editor: migrate block-card Badge to UI Badge

[shail-mehta]

Part of #82440

What?

Migrate the block-type badge in BlockCard from the private @wordpress/components Badge to the public @wordpress/ui Badge.

Why?

We're deprecating wp-components Badge and migrating to UI Badge.

How?

Simple component switch. Uses intent="draft" to keep a neutral look close to the previous badge.

Testing Instructions

1. Open the post editor (Posts → Add New).
2. Insert a Paragraph (or any) block.
3. Rename it (List View → ⋮ → Rename), e.g. to Intro Line.
4. Keep the block selected and open the Block settings sidebar.
5. At the top of the sidebar, confirm the custom name shows with a Paragraph (block type) badge.
6. Confirm the badge still renders as a neutral label.

Screenshots or screencast

Before	After

Use of AI Tools

• Yes (For PR Descriptions)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 6bf64eda-4d4f-4f1f-913e-509a9e7cafb6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +75 B (0%)

Total Size: 8 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	479 kB	+28 B (+0.01%)
build/styles/block-editor/style-rtl.css	20.6 kB	+13 B (+0.06%)
build/styles/block-editor/style-rtl.min.css	17.3 kB	+9 B (+0.05%)
build/styles/block-editor/style.css	20.7 kB	+14 B (+0.07%)
build/styles/block-editor/style.min.css	17.3 kB	+11 B (+0.06%)

_{477885d Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	75cfc3a	trunk	% Change
timeToFirstByte	65.7 ms +3.65% -9.97%	63.45 ms +6.86% -7.09%	3.55%
largestContentfulPaint	100 ms +4% -6%	96 ms +4.17% -6.25%	4.17%
lcpMinusTtfb	33.1 ms +14.2% -4.53%	31.2 ms +4.81% -8.49%	6.09%
wpBeforeTemplate	35.12 ms +3.76% -16.2%	33.48 ms +6.42% -13.71%	4.9%
wpTemplate	25.34 ms +5.76% -2.41%	24.65 ms +7.18% -1.38%	2.8%
wpTotal	60.55 ms +3.95% -8.41%	58.4 ms +7.64% -5.29%	3.68%
wpMemoryUsage	7.52 MB +0% -0%	7.48 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	75cfc3a	trunk	% Change
timeToFirstByte	46.1 ms +11.39% -6.72%	40.1 ms +19.7% -2.24%	14.96%
largestContentfulPaint	92 ms +6.52% -4.35%	80 ms +12.5% -0%	15%
lcpMinusTtfb	45.35 ms +4.3% -3.2%	40.75 ms +0.74% -2.09%	11.29%
wpBeforeTemplate	26.55 ms +21.09% -3.69%	26.54 ms +23.51% -2.11%	0.04%
wpTemplate	15.09 ms +8.22% -5.1%	10.47 ms +9.17% -1.24%	44.13%
wpTotal	43.09 ms +10.7% -6.78%	37.44 ms +18.64% -2.72%	15.09%
wpMemoryUsage	5.51 MB +0% -0%	5.36 MB +0% -0%	2.66%
wpDbQueries	14 +0% -0%	10 +0% -0%	40%

media-processing

Metric	75cfc3a	trunk	% Change
mediaProcessingJpeg	401.12 ms +1.04% -0.6%	398.32 ms +0.6% -1.13%	0.7%
mediaProcessingAvif	6018.5 ms +0.19% -0.11%	6027.98 ms +0.1% -0.07%	-0.16%
mediaProcessingJpegToAvif	4144.87 ms +0.32% -0.23%	4149.3 ms +0.08% -0.17%	-0.11%

media-upload

Metric	75cfc3a	trunk	% Change
jpegUploadProcessing	1446.94 ms +34.85% -1.18%	1427.54 ms +0.55% -0.86%	1.36%
pngUploadProcessing	216.33 ms +0.62% -11.85%	203.29 ms +4.22% -5.68%	6.41%
largeJpegUploadProcessing	1430.1 ms +1.2% -0.76%	1405.83 ms +0.96% -0.32%	1.73%
multipleImageUploadProcessing	1575.1 ms +1.27% -0.72%	1503.09 ms +1.68% -0.67%	4.79%

post-editor

Metric	75cfc3a	trunk	% Change
serverResponse	519.73 ms +4.78% -6.19%	533.63 ms +8.86% -6.66%	-2.6%
firstPaint	254.98 ms +10.08% -9.57%	279.63 ms +16.09% -17.47%	-8.82%
domContentLoaded	1340.26 ms +1.74% -0.93%	1328.97 ms +1.11% -1.24%	0.85%
loaded	1341.67 ms +1.73% -0.92%	1330.31 ms +1.1% -1.22%	0.85%
firstContentfulPaint	430.34 ms +6.39% -3.61%	444.86 ms +0.75% -4.22%	-3.26%
firstBlock	3723.24 ms +0.37% -0.39%	3680.65 ms +1.01% -0.69%	1.16%
type	15.25 ms +4.72% -1.18%	15.41 ms +8.05% -5.58%	-1.04%
typeWithoutInspector	15 ms +14.33% -3.6%	15.08 ms +9.48% -5.11%	-0.53%
typeWithTopToolbar	19.97 ms +5.21% -7.66%	20.12 ms +9.24% -4.67%	-0.75%
typeContainer	9.79 ms +10.62% -8.48%	9.47 ms +8.13% -5.6%	3.38%
focus	81.07 ms +9.92% -6.13%	85.54 ms +14.53% -4.83%	-5.23%
firstFocus	179.47 ms +0% -0%	181.08 ms +0% -0%	-0.89%
selectAll	592.54 ms +5.84% -2.13%	629.41 ms +0.51% -6.09%	-5.86%
listViewOpen	71.03 ms +5.91% -5.42%	71.49 ms +14.72% -7.53%	-0.64%
inserterOpen	24.23 ms +11.6% -11.72%	25.47 ms +3.46% -7.58%	-4.87%
inserterHover	3.47 ms +10.09% -3.17%	3.45 ms +8.99% -8.99%	0.58%
inserterSearch	8.73 ms +4.35% -2.75%	8.75 ms +11.2% -12%	-0.23%
loadPatterns	640.23 ms +2.85% -1.81%	653.45 ms +7.14% -4.03%	-2.02%
wpTotal	508.65 ms +4.97% -6.16%	524.03 ms +8.93% -6.77%	-2.93%
wpMemoryUsage	13.05 MB +0% -0%	13.02 MB +0% -0%	0.28%
wpDbQueries	54 +0% -1.85%	54 +0% -1.85%	0%

site-editor

Metric	75cfc3a	trunk	% Change
serverResponse	288.32 ms +1.38% -6.82%	283.33 ms +4.94% -5.03%	1.76%
firstPaint	158.27 ms +3.25% -6.42%	170.05 ms +22.35% -5.9%	-6.93%
domContentLoaded	930.87 ms +3.03% -0.66%	947.43 ms +1.93% -2.74%	-1.75%
loaded	931.66 ms +3.03% -0.66%	948.36 ms +1.93% -2.74%	-1.76%
firstContentfulPaint	298.51 ms +3.04% -2.58%	307.03 ms +3.7% -4.54%	-2.77%
firstBlock	2899.45 ms +0.84% -0.84%	2966.38 ms +1.41% -0.81%	-2.26%
type	10.16 ms +8.37% -2.66%	11.32 ms +5.12% -2.92%	-10.25%
navigate	58.97 ms +65.05% -6.55%	60.38 ms +10.05% -8.33%	-2.34%
loadPatterns	912.69 ms +18.43% -2.97%	958.23 ms +10.05% -4.1%	-4.75%
loadPages	1003.62 ms +0.93% -5.19%	1067.25 ms +3.95% -5.39%	-5.96%
wpTotal	281.2 ms +1.39% -6.9%	276.4 ms +4.97% -5.22%	1.74%
wpMemoryUsage	12.06 MB +0% -0%	12.03 MB +0% -0%	0.3%
wpDbQueries	44 +0% -2.27%	44 +0% -2.27%	0%

_{477885d Run}

🏁 Flaky tests

Show the failures

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.

uses the anchor chosen for a heading after publish in /test/e2e/specs/editor/blocks/table-of-contents.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/template-parts
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/24.18 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: 6ed409de64
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1789060766%7CMISYkMPlZOGbhIgxaEH2xwvlMx19m7BzMvM6OwNQBcy%7Cb703dec87f6757d616ca8f7f5f28a2f4e12455ee85351b5126b0a08db9c65ce2; wp-settings-time-1=1788888251

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.deleteAllTemplates (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/templates.ts:35:31)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/table-of-contents.spec.js:92:17

_{477885d Run}

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: mirka <0mirka00@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

[mirka]

• Has this been tested with overflow scenarios?
• What's thinking behind using different intents between this and Editor: migrate post-card-panel Badge to UI Badge #82500?

[shail-mehta]

@mirka There wasn't a strong semantic reason for the difference.

Here I used intent="draft" mainly to stay visually close to the old neutral components Badge, but both are type/role labels (block type vs page role), not draft status.

I'll align this with #82500 and switch to the default none intent.

Regarding overflow scenarios: Tested this with a long custom block name in a narrow sidebar and its working fine.

the current badge text is truncated with an ellipsis due to white-space: nowrap.

Do we need to change this behavior as well?

Ref:

gutenberg/packages/components/src/badge/styles.scss

Line 59 in 25b5134

white-space: nowrap;

[fcoveram]

I just dropped a comment in #82500 suggesting using a badge with higher intent.

Regarding the semantics of this use case and its intent, I will use none for user attention, since the attention it requires is lower in the hierarchy than the homepage role.

[mirka]

the current badge text is truncated with an ellipsis due to white-space: nowrap.

Do we need to change this behavior as well?

Did you find situations in the previous implementation where the block name badge was actually ellipsized, and not ellipsizing here would cause issues?

[t-hamano]

Regarding overflow scenarios: Tested this with a long custom block name in a narrow sidebar and its working fine.

the current badge text is truncated with an ellipsis due to white-space: nowrap.

Do we need to change this behavior as well?

Ref:

gutenberg/packages/components/src/badge/styles.scss

Line 59 in 25b5134

white-space: nowrap;

From what I've tested, I don't think this was working correctly in the first place. If the block name is long, the text will overflow and a scrollbar will appear. I believe the cause is that many of the containers making up the block card are configured with a flex layout.

Therefore, we need to decide what the ideal behavior for this PR should be. Personally, I think it would be better to just wrap the text without ellipsizing it.

[fcoveram]

Personally, I think it would be better to just wrap the text without ellipsizing it

+1 to this

[shail-mehta]

@mirka @t-hamano , you were both right.

Sorry for misjudging this earlier. I’ve addressed the overflow issue and changed intent to none in 0e7ece5.

Also, thank you, @fcoveram, for the feedback!

After Wrap: