Replace ad hoc badges with Badge component

[prasadkarmalkar]

What?

In this PR replacing ad hoc badges with Badge component
Issue URL - #68020

Why?

How?

1. Exported Badge component.
2. Replaced span with Badge component in block editor list view, site editor and inspector

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

1. Site editor pages

2. Inspector of editor

3. Editor list view anchor

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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: prasadkarmalkar <[email protected]>
Co-authored-by: jameskoster <[email protected]>

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

[jameskoster]

Thanks for working on this ❤️

One issue is that the current anchor 'badge' that we find in List View truncates to avoid taking over he entire row. Currently the Badge component doesn't support truncation creating a bit of a problem. Here's a comparison:

Trunk	This PR

We could set a max-width, but the text will still overflow:

My suggestion would be to tackle List View separately, after we've decided whether or not to add a truncate property to Badge.

[tyxla]

This will currently throw errors as Badge import doesn't exist. See inline comment for more details.

[tyxla]

We currently don't expose Badge as a public component. You'll have to use the private API unlock mechanism to use it, see #68062 for a similar example.

[prasadkarmalkar]

Thanks everyone for the review. Since an alternative PR has been created for the issue, I will close this PR.