Admin UI: Add logo prop to Page header component#76469
Admin UI: Add logo prop to Page header component#76469CGastrell wants to merge 7 commits intoWordPress:trunkfrom
Conversation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
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. |
|
Thinking if |
| defaultNotFoundComponent: () => null, | ||
| } ); | ||
|
|
||
| const JetpackLogo = ( { |
There was a problem hiding this comment.
Let's swap this to something neutral please, AcmeLogo or just W or globe icon.
There was a problem hiding this comment.
Fair, I thought it could come in handy to have it there. We can stick to WordPress icon.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CGastrell
force-pushed
the
add/page-header-logo
branch
from
94549b1 to
e40fd17
Compare
Move admin-ui stylesheet loading from direct imports in story files to the storybook/package-styles config system for proper isolation, dependency management, and RTL support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CGastrell
force-pushed
the
add/page-header-logo
branch
from
97ed4ef to
4bbd77c
Compare
ThemeProvider is not needed since styles are loaded via the package-styles config system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace custom GlobeLogo SVG with the WordPress icon from @wordpress/icons and remove the image-based logo story that didn't render well. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename the Page header logo prop to icon for consistency. Remove the JetpackLogo component and its stories as brand logos don't belong in the component library. Rename CSS class accordingly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CGastrell
force-pushed
the
add/page-header-logo
branch
from
4bbd77c to
afba908
Compare
2 participants
What?
Adds a
logoprop to the Page component's header, allowing consumers to display a logo or symbol alongside the title or breadcrumbs.See #76448
Why?
As described in #76448, consumers currently pass logos inside the
titleprop, which places them inside theh2tag. This is fragile and creates accessibility issues — when the title contains non-text content, a separateariaLabelmust be passed to maintain good semantics (see #75898).An officially supported
logoprop renders the logo outside theh2tag, ensuring:ariaLabelworkaroundHow?
logo?: React.ReactNodeprop toPage(index.tsx) andHeader(header.tsx)div.admin-ui-page__header-logoobject-fit: containfor img/svg childrenTesting Instructions
npm run storybook:devWith Logo: globe icon + "Page title" headingWith Jetpack Logo: Jetpack icon + "Jetpack" headingWith Logo And Breadcrumbs: globe icon + breadcrumb navigationWith Jetpack Logo And Breadcrumbs: Jetpack icon + breadcrumb navigationh2elementTesting Instructions for Keyboard
EOF
)