UI: add displayNames

[simison]

What?

Adds displayName everywhere in UI package.

Combined with #80129 which deals with Fragments in the code examples, this improves code example readability in the storybook, and also when folks use tools like React DevTools.

See also docs;

gutenberg/packages/components/CONTRIBUTING.md

Line 252 in a65fc3e

- setting explicitly the `displayName` on all subcomponents;

Why?

Cleaner code previews and copy-paste for docs consumers.

How?

Testing Instructions

Run npm run storybook:dev
Browse around code examples.

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

(Fragment in screenshot is gone because of #80129)

Use of AI Tools

Yes

[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: simison <simison@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

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

[github-actions]

Size Change: +1.19 kB (+0.02%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
build/modules/boot/index.min.js	49.5 kB	+57 B (+0.12%)
build/modules/content-types/index.min.js	164 kB	+324 B (+0.2%)
build/scripts/block-directory/index.min.js	44.2 kB	+60 B (+0.14%)
build/scripts/block-editor/index.min.js	422 kB	+224 B (+0.05%)
build/scripts/block-library/index.min.js	352 kB	+66 B (+0.02%)
build/scripts/edit-post/index.min.js	52.1 kB	+63 B (+0.12%)
build/scripts/edit-site/index.min.js	303 kB	+184 B (+0.06%)
build/scripts/editor/index.min.js	499 kB	+137 B (+0.03%)
build/scripts/format-library/index.min.js	29.6 kB	+35 B (+0.12%)
build/scripts/media-utils/index.min.js	121 kB	+41 B (+0.03%)

_{compressed-size-action}

[Mamaduka]

Neat. Thanks, @simison!

I guess we won't need this if the package was > React 19 and dropped forwardRef, but that's going to take a while before we can upgrade the requirements.

[ciampo]

Are the changes in this file actually making a difference?

[mirka]

These things are quite finicky, and it's hard to have a pattern that "works forever". Even since the last time I checked, I think the behavior changed to switch which name is chosen for display in exports like this:

// This pattern used to show `TabList` as the display name,
// which kind of avoided the need to set explicit display names.
export const List = forwardRef< HTMLDivElement, TabListProps >(
	function TabList(

The docgen has historically been very sensitive to how everything is structured in our source code at the AST level, and of course this has the possibility to change over time. In the past, we've seen that setting explicit displayName in certain ways can prevent the Storybook docgen from reading the prop types correctly. So that's something that also needs to be smoke tested with a change like this. Here's an example of when prop extraction breaks:

Here, I noticed that this causes the prop type extraction to break in cases like Select.Portal and Tooltip.Trigger. The similarity between the breaking instances seem to be that they export with export { Trigger }, instead of export const Trigger =. So that's also something we need to modify.

Also please update the contributing docs once we have a working pattern for these 🙏

[ciampo]

As an idea, could we look at fixing (patching) this in a way that is more specific about Storybook code snippets, so that it doesn't have other involuntary consequences?

[simison]

As an idea, could we look at fixing (patching) this in a way that is more specific about Storybook code snippets, so that it doesn't have other involuntary consequences?

I'll look if I can find some alternative ways. Lemme know if you have ideas!

That said, displayName helps not just with Storybook, but also with React DevTools, JS console errors, and profiling tools.

React DevTools

Without displayName, minified code

With displayName, minified code

Without displayName, non-minified code

With displayName, non-minified code

JS console error

Without displayName, minified code

With displayName, minified code

[github-actions]

Flaky tests detected in fa6cdd0.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29492703719
📝 Reported issues:

• [Flaky Test] should insert media, convert to blocks, and undo in one step #36123 in /test/e2e/specs/editor/blocks/classic.spec.js

[aduth]

Also want to flag that #80692 and especially #80697 could affect Storybook docgen parsing. The latter, combined with #80655, should give us some confidence to protect against regressions in prop discovery if it becomes a problem with displayName.

[mirka]

Tangential, but I ran into issues when setting display names on reexports of primitive components on higher-level components. Not sure what would be reasonable here 😕