Admin UI: Fix Page Header not rendering with only actions and add stories#76695
Merged
Admin UI: Fix Page Header not rendering with only actions and add stories#76695
Conversation
|
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. |
CGastrell
added
[Type] Enhancement
|
Size Change: +6 B (0%) Total Size: 7.73 MB
ℹ️ View Unchanged
|
Contributor
|
Flagging that we have an issue with page header specs — in that sense, code and Storybook examples should ideally align with the scenarios. From a quick look:
|
Contributor
Author
Fair enough, my goal here was to actually have a sample of how things look so you don't have to implement custom code to see it, it would be on the storybook itself. Then again, maybe the storybook is not meant for that but only to represent the specs. I'll remove the mentioned stories and look at specs for any missing stories. Thanks! |
CGastrell
force-pushed
the
fix/admin-ui-page-actions-header-stories
branch
from
a76fd0a to
58781e1
Compare
|
Flaky tests detected in 72d2d17. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23760484918
|
Contributor
Author
|
@ciampo @jameskoster While this PR doesn't really solve anything, do you think it'd be worth merging? More cases/examples on the Storybook seems like a good way to offer easy testing and keeping an eye on things |
ciampo
reviewed
Mar 26, 2026
Contributor
There was a problem hiding this comment.
Assuming that all new examples follow the design specs linked above, I think they can be useful additions.
Let's update the PR description so that it's up to date with the code changes, and consider adding a CHANGELOG entry to the admin-ui package listing the fix?
| */ | ||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | ||
| import { __experimentalText as Text } from '@wordpress/components'; | ||
| import { __experimentalText as Text, Button } from '@wordpress/components'; |
Contributor
There was a problem hiding this comment.
Should we use Button and Text from @wordpress/ui ?
Contributor
Author
There was a problem hiding this comment.
Thanks for pointing it out! Added your suggestion and a changelog
Contributor
There was a problem hiding this comment.
I'm still seeing the old imports from @wordpress/components, maybe you didnt' push your changes?
Contributor
Author
There was a problem hiding this comment.
Sorry, ESLint rule @wordpress/use-recommended-components is blocking me from commit/push. Even if I use --no-verify I think the CI is gonna block it. Any ideas?
Contributor
There was a problem hiding this comment.
Right. I'd be ok with disabling that ESLint rule specifically for that line of code.
@mirka Should we start allowing Button and Text from @wordpress/ui?
Member
There was a problem hiding this comment.
Neither are ready yet, unfortunately. Remaining blockers (#76135) relevant to those two specifically:
Button: Global CSS defense, and overflow behavior. Probably could also use a migration guide for style variants.Text: Global CSS defense.
Contributor
Author
There was a problem hiding this comment.
Gotcha, I added the skip comment, hopefully CI will follow it as well.
… stories The Page component Header was not rendered when only the actions prop was provided, because actions was missing from the render condition. This adds actions to the condition and introduces new Storybook stories covering more prop combinations: without header, badges, actions, and a full header example. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CGastrell
force-pushed
the
fix/admin-ui-page-actions-header-stories
branch
from
28fc8bd to
e22b60a
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ciampo
approved these changes
Mar 31, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Thank you for the patience in iterating 🙏
oandregal
added
[Type] Bug
ObliviousHarmony
pushed a commit
that referenced
this pull request
Apr 1, 2026
…ries (#76695) * Admin UI: Fix Page Header not rendering with only actions and add new stories The Page component Header was not rendered when only the actions prop was provided, because actions was missing from the render condition. This adds actions to the condition and introduces new Storybook stories covering more prop combinations: without header, badges, actions, and a full header example. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Remove off-spec stories and drop title from FullHeader Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * rebase and fix conflicts * Use Button and Text from @wordpress/ui in Page stories Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: CGastrell <cgastrell@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
…ries (#76695) * Admin UI: Fix Page Header not rendering with only actions and add new stories The Page component Header was not rendered when only the actions prop was provided, because actions was missing from the render condition. This adds actions to the condition and introduces new Storybook stories covering more prop combinations: without header, badges, actions, and a full header example. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Remove off-spec stories and drop title from FullHeader Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * rebase and fix conflicts * Use Button and Text from @wordpress/ui in Page stories Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: CGastrell <cgastrell@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
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?
Fix a bug in the Page component and add new Storybook stories for better coverage of prop combinations.
Why?
The Page component Header was not rendered when only the
actionsprop was provided, becauseactionswas missing from the render condition atpackages/admin-ui/src/page/index.tsx. Additionally, the existing stories only covered a few combinations of Page props, leaving gaps in visual documentation.How?
actionsto the Header render condition:( title || breadcrumbs || badges || actions )Testing Instructions
npm run storybook:devactionswas provided)Testing Instructions for Keyboard
Use of AI Tools
This PR was authored with assistance from Claude Code (Claude Opus). All changes were reviewed and approved by the contributor.