Migrate pattern list item titles to Text from @wordpress/ui

[kushagra-goyal-14]

What?

Part of: #77265

Migrates pattern list item titles in block-patterns-list/index.js from a <div> to the Text component from @wordpress/ui.

---

Why?

This change is part of the ongoing effort to standardize typography across the editor using shared primitives from @wordpress/ui. Replacing ad hoc elements with Text ensures consistency and alignment with the design system.

---

How?

• Replaced <div className="block-editor-block-patterns-list__item-title"> with <Text>
• Kept existing className to preserve styling
• No additional layout or structural changes introduced

---

Testing Instructions

1. Open the block editor:

   /wp-admin/post-new.php
   

2. Open the Inserter (➕ button) and switch to the Patterns tab.

3. Verify the following:

   • Pattern titles render correctly under each pattern preview

4. Inspect the DOM

---

Screenshots

Before

After

---

Use of AI Tools

• Used Copilot for PR description and commit messages

[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: kushagra-goyal-14 <kush123@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

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

[ciampo]

As mentioned in #77265 (comment), please update the PR description to include more details (especially around testing instructions) and a comprehensive before/after screenshots.

[kushagra-goyal-14]

Hi @ciampo, I’ve updated the PR description to include detailed testing instructions and added a section for before/after screenshots.

Also, since the Text component renders a <span> by default, I used the render prop to pass a <div> so the original layout and styles remain unchanged. Let me know if you’d prefer sticking with the default element instead.

[jameskoster]

From the “After” screenshot alone, I’m wondering why the height is 18.2px. Based on the body-md line-height and it being a block-level element, shouldn’t the rendered height be 20px?

[kushagra-goyal-14]

From the “After” screenshot alone, I’m wondering why the height is 18.2px. Based on the body-md line-height and it being a block-level element, shouldn’t the rendered height be 20px?

@jameskoster, you’re right, as it looks like the issue was due to caching when I captured the earlier “after” screenshot, which is why the height appeared incorrect. Updated with a fresh one, and now it correctly reflects the applied changes (including the expected classes and styles).
Thanks for pointing that out!

[mirka]

Is this an ad hoc override, or a redundant font size style, or is the Text variant wrong?

gutenberg/packages/block-editor/src/components/block-patterns-list/style.scss

Line 36 in e6c1d49

font-size: $helptext-font-size;

[kushagra-goyal-14]

Thanks for catching that @mirka . I checked both variants:

body-sm: 12px font-size, 16px line-height, removes CSS override entirely.

body-md: would require keeping the CSS override, with 20px line-height.

Since the original font styling was effectively 12px and the original height of the div was 18.2px, I am leaning towards body-sm for a clean look. Please share your thoughts if that works.

[mirka]

Yes, that makes sense.

[kushagra-goyal-14]

Thanks, made the changes.

[mirka]

Looks good to go 👍