Experiment: Render badges for some content types' fields#78194
Merged
Conversation
ntsekouras
added
[Type] Experimental
|
Size Change: +16.8 kB (+0.21%) Total Size: 7.95 MB 📦 View Changed
ℹ️ View Unchanged
|
t-hamano
reviewed
May 12, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
I don't think we need to completely polish the design in this PR, but just in case, let's get the design team's feedback. cc @WordPress/gutenberg-design
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
|
Neat!
Three is maybe a little aggressive? It'd be nice to find a balance between reducing the likelihood of having to rely on the popover and keeping the table clean. |
Contributor
Author
We can always update this value, but I think three might be enough for most cases. |
ntsekouras
force-pushed
the
content-types-render-badges-for-some-fields
branch
from
b4490ab to
1bfed1e
Compare
Contributor
Author
|
Design and UX will be polished iteratively, so I believe we can land this one. What do you think? |
t-hamano
reviewed
May 13, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
We can address the design in a follow-up, but it would be beneficial to fix the accessibility issues here.
This is an example, but the popover needs some kind of title.
diff --git a/packages/content-types/src/utils/overflowing-badges.tsx b/packages/content-types/src/uti
ls/overflowing-badges.tsx
index e642cd1c8fa..d76438ab3b2 100644
--- a/packages/content-types/src/utils/overflowing-badges.tsx
+++ b/packages/content-types/src/utils/overflowing-badges.tsx
@@ -2,8 +2,16 @@
* WordPress dependencies
*/
import { __, sprintf, _n } from '@wordpress/i18n';
-// eslint-disable-next-line @wordpress/use-recommended-components -- Used here because it supports rendering as a `span` via the `render` prop to avoid invalid HTML.
-import { Badge, Button, Popover, Stack, Tooltip } from '@wordpress/ui';
+/* eslint-disable @wordpress/use-recommended-components -- Used here because it supports rendering as a `span` via the `render` prop to avoid invalid HTML. */
+import {
+ Badge,
+ Button,
+ Popover,
+ Stack,
+ Tooltip,
+ VisuallyHidden,
+} from '@wordpress/ui';
+/* eslint-enable @wordpress/use-recommended-components */
const DEFAULT_MAX = 3;
@@ -23,6 +31,11 @@ export function OverflowingBadges( {
_n( 'Show %d more', 'Show %d more', hidden.length ),
hidden.length
);
+ const popoverTitle = sprintf(
+ /* translators: %d: number of additional items */
+ _n( '%d more item', '%d more items', hidden.length ),
+ hidden.length
+ );
return (
<Stack
direction="row"
@@ -65,6 +78,9 @@ export function OverflowingBadges( {
}
/>
<Popover.Popup style={ { maxWidth: 320 } }>
+ <VisuallyHidden render={ <Popover.Tit
le /> }>
+ { popoverTitle }
+ </VisuallyHidden>
<Stack direction="row" wrap="wrap" ga
p="xs">
{ hidden.map( ( item ) => (
<Badge key={ item.key
}>
Contributor
|
Happy to address design in follow-ups but one more thought; could the popover open on hover? Then perhaps we wouldn't need the tooltip. |
ntsekouras
force-pushed
the
content-types-render-badges-for-some-fields
branch
from
1bfed1e to
941b180
Compare
Contributor
Author
Oh.. I missed that.. Fixed.
@jameskoster I think it's way more accessible like this. We can revisit later, but let's keep it as is for now. I'm also thinking that each (post types/taxonomies) could even become a link in the future.. |
t-hamano
approved these changes
May 13, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
I think we can ship this as is for now. However, it would be great if we could get the final design and accessibility feedback before the Content Type feature is stabilized.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
This PR updates the
taxonomies and supportsfields' rendering for the experimental user post types and thepost typesfor user taxonomies.It uses
badgesto make them easier to scan and if more than three, renders a button that triggers a popover to show the rest. I think it's fine for first iteration and we can revisit the design if needed.Testing instructions
Content typesexperiment.Settings → Content typesand associate a post type with many taxonomies (more than three)taxonomies and supportsfields for user post typespost typesfor user taxonomiesUse of AI Tools
Opus 4.7 with direction, changes and review