Gutenberg: Provide a Card component

[iandunn]

Cards are a common UI pattern across the web, seen for example in Material, Calypso, Jetpack, WooCommerce Admin, etc.

wp-admin itself also has several isolated, inconsistent uses of cards: Dashboard, Apperance > Themes, Tools > Site Health, etc.

It would be helpful for Gutenberg to provide a standard/consistent base component for wp-admin and plugins to use and build on top of.

Modal comes pretty close, but currently it doesn't seem like it's possible/practical to reuse it for this purpose, since the inner components like ModalFrame and ModalHeader aren't extractable from the undesirable container UI/functionality.

It seems like it could probably be abstracted to provide generic functionality, though.

[sarahmonster]

Yes! This seems like it warrants its own component since the use case for one really isn't the same as a Modal (used to focus attention on one thing). Cards are generally used for discrete pieces of information arranged in a logical way, and they're often arranged in a grid of other, equal cards.

Let's start by taking inventory of where and how cards are currently used in wp-admin, and then we can see about writing some guidelines and creating a new UI component.

[sarahmonster]

The design team discussed this during a triage session in Slack today (Note: You may need a Slack account to log in.)

We touched a bit on current usage: whilst Cards are used outside of the editor context, they don't _really_ exist, per se, right now within the current editor/Gutenberg context. So first we needed to take a step back and ask:

Should the @wordpress/components package allow for UI components that are used in wp-admin, but may not be immediately called for in the Gutenberg/post editor context as it exists today?

Our overall consensus seemed to be leaning toward "yes", especially as Gutenberg is slowly expanding outside of the post editor context and its boundaries become blurred and amorphous. These components are available for use outside of Gutenberg (and indeed, WordPress itself) and may prove useful in other contexts if designed well for reusability.

That said, we didn't come to a clear consensus during triage. This may warrant a bit more discussion before we dive into documentation, design, & development:

1. Should WordPress components be built if they aren't directly needed by the Gutenberg plugin immediately?
2. Are there use cases where we could see a Card component being helpful for Gutenberg itself? (The Block Directory work @melchoyce has been shepherding comes to mind...)

[melchoyce]

Here's the card from the latest Block Directory project mocks:

[ItsJonQ]

👋 Hai there!!

I started working on this! Will create a draft pull request when it's ready.

For fun + collaboration, I live streamed the designing + coding process:
https://youtu.be/oAPuOB9oYCw

😊

[iandunn]

Great work on #17963! 🎉

It looks like that was merged; should this be closed now, or are there some more things left to do?

[ItsJonQ]

@iandunn Thanks!! I think we can close this one up now :). The next steps would be to refactor some of the other components (like Panel) with Card