Skip to content

Storybook: Add illustrated package cards to the Design System intro page - #85482

Open
simison wants to merge 4 commits into
trunkfrom
simison/design-system-intro-visuals-c880a4
Open

simison wants to merge 4 commits into
trunkfrom
simison/design-system-intro-visuals-c880a4

Conversation

@simison

@simison simison commented Oct 23, 2026

Copy link
Copy Markdown
Member

What?

  • Show Theming, Components, Icons, DataViews and Admin UI as cards with abstract SVG headers, a short description, and links to the Storybook page and the developer handbook.
  • Condense copy all around and make it flow better and more to the point; previous felt a bit lengthy and repetative for folks to actually read. 😅
  • Make principles section more engaging/skimmable as cards rather than a list
  • Link to developer handbook rather than GitHub markdown files

Essentially, trying to condense this as an "introduction" page that is easy to skim.

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before After
intro-before intro-new

Use of AI Tools

yes

@github-actions

github-actions Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

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: 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.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: 0 B

Total Size: 9.07 MB

d6b3fef Run

@simison simison added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Oct 23, 2026
@simison
simison requested a review from aduth October 23, 2026 16:36
…ction

Show Theming, Components, Icons, DataViews and Admin UI as cards with abstract SVG headers, a short description, and links to the Storybook page and the developer handbook.
Rework the copy, show the principles as cards, and tune the package cards.
- **Consistent visual language**: Drawn to a shared style so icons feel coherent wherever they appear across WordPress.

See the [`@wordpress/icons` README](https://github.com/WordPress/gutenberg/tree/trunk/packages/icons) for usage details.
<PackageCards only={ [ 'theming', 'components', 'icons' ] } />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ciampo 's feedback at #84864 (comment) got me thinking about how .mdx as its used to represent content can create issues when that content is obfuscated behind components. I don't know that we do or would use this page as raw content, but in a general sense it feels like Markdown is where the human text should live, not in the component implementation. And that we could use (sub-)components to handle the structuring. What would you think about moving some of that content back into this file?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants