Fields package: Add Storybook examples #71864
Merged
Conversation
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
andrewserong
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 1.95 MB ℹ️ View Unchanged
|
ramonjd
approved these changes
Sep 24, 2025
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Thanks. Good place to test new fields before they're used.
👍🏻
Comment on lines
+67
to
+71
| avatar_urls: { | ||
| '24': 'https://gravatar.com/avatar?d=retro&s=24', | ||
| '48': 'https://gravatar.com/avatar?d=retro&s=48', | ||
| '96': 'https://gravatar.com/avatar?d=retro&s=96', | ||
| }, |
Member
There was a problem hiding this comment.
Just curious where is this used. I can't see John in the fields! 😄
Contributor
Author
There was a problem hiding this comment.
I know, how disappointing! I wasn't quite sure how far we want to go with setting up the testing environment for the author within the Storybook example, so this is a remnant of my explorations there. For this one, it won't show us the avatar unless we inject some stuff into the state, as it turns out it's using the avatar_urls from a call to getEntityRecord.
To satisfy the type, though, I believe we need to have avatar_urls be set, but it could always be set to an empty object intead.
|
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. |
|
Flaky tests detected in 24e793e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17997705243
|
Contributor
Author
|
Thanks for the review, @ramonjd! I've updated this to include one tiny extra feature, which is to be able to configure the layout type of the form, as it's a useful way to see how the fields will look in a panel configuration (which happens a fair bit for these fields). Here's how it looks: 
Once the tests pass, I'll look to merge this in, as I think it'll form a useful starting point for building on the fields (and proposing more). |
Member
Sounds good 👍🏻 |
andrewserong
deleted the
try/add-storybook-examples-to-fields-package
branch
bph
added
[Feature] Media
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Add a couple of Storybook examples for the fields package. These are "base" fields that are used for post and pages, etc, but currently aren't able to be demoed in isolation within Storybook.
Why?
I'm working on some ideas for the new media library (proposed in #55238), which will require adding new media-specific fields.
Before we go to add new fields, though, it would be good to be able to quickly demo the existing fields within an easy to test environment: hence adding Storybook examples. Then, as we start to propose adding in fields for things like media, we'll have a good place to test them.
The couple of examples I've gone to add here are using
DataViewsandDataFormto display the fields.Note that the purpose of this PR is to showcase the fields themselves, and not the DataViews APIs, so (for now at least) I've tried to keep things quite simple.
How?
fieldspackage, one using DataForm, and one using DataViewsTesting Instructions
npm run storybook:devto develop the storieshttp://localhost:50240/?path=/story/fields-base-fields--data-forms-previewto view the storyScreenshots or screencast
2025-09-24.16.14.38.mp4