Add visual indicator to Gutenberg core components?

[katerlouis]

Gutenberg offers a lot of UI components. The titles of these components don't indicate clear enough (for me atleast) what exactly you get from them. The github repo offers usage instructions and a short description per component (https://github.com/WordPress/gutenberg/tree/master/components) which is great, but still doesn't help enough. Trying out components that sound like this is what I'm looking for isis really frustrating and time consuming. And it might be possible I miss an UI element, suited even better.

An Overview, with visual examples or maybe even interactive examples of the components would improve experience for plugin- / theme-authors immensely.

I suggest an image in each components readme
plus a dedicated site where all components are visually displayed at a glance.

What do you say?

[Soean]

+1
I also thought about it, something like the calypso component live docs: https://wpcalypso.wordpress.com/devdocs/design

[katerlouis]

Yeah, or maybe in the long-run maybe something like http://docs.bootstrap-ui.com/section-4.html.

But since this would be a much bigger project, I beg somebody to add simple images to the readmes of each component as a quick solution.

[iandunn]

It would also be very helpful to have a screen that shows all of the installed blocks. That might be better as a separate Issue, or it could potentially be in scope here.

[Soean]

Another example
Storybook for WordPress Reusable React Components: WP-Storybook by @ajitbohra.
Preview: https://wp-storybook.netlify.com/

@iandunn This is more a separate issue. This one (#7327) is about documentation for developers. A list of installed blocks is a UI in the WordPress backend and maybe related to #14733

[iandunn]

I was thinking of the preview of blocks being a tool for developers. It's something that would help me build blocks, because I could easily reference other blocks to understand conventions, which would help maintain consistency across blocks, and encourage best practices and not reinventing the wheel when solutions already exist.

You get a lot of that by reusing components, but there are still situations where you need to see how components can be pieced together at a higher level, how they interact with each other, etc.

[davewhitley]

Take a look at the components folder and the readmes for each component now. I think you'll find them much easier to use. https://github.com/WordPress/gutenberg/tree/master/packages/components/src/button

[Soean]

Yes, the docs are better now and we have #16367 for a Component Library.

[gziolo]

Now that we landed Storybook in #17475, this can be closed. We still need to work towards adding more examples to the Storybook which can be accessed at https://wordpress.github.io/gutenberg/.

[gziolo]

There is also #16953 opened where some options for integration with WordPress.org are discussed.