developer-blog-content icon indicating copy to clipboard operation
developer-blog-content copied to clipboard

Integrating a design system into the block editor

Open bph opened this issue 11 months ago • 0 comments

Discussed in https://github.com/WordPress/developer-blog-content/discussions/363

Originally posted by troychaplin January 7, 2025 This idea could be done in a couple of ways, or in multiple parts. The first part isn't directly related to WP, so we can skip over it and instead just have a repo with a nice and detailed README to serve as the overview.

Part One (Optional): Creating a basic design system using React, Typescript, TailwindCSS, Storybook and Vite. This would include a card component that would have multiple applications. This would cover topics like using interfaces, setting various props, some info about component composition and a high level overview of the tools used to bring this all together. I would also touch on creating a GitAction to automate publishing the library as a package to NMP which is needed for the blocks.

For the components I would build a very simple version of this -- https://github.com/troychaplin/ui-kit

Part Two: Once the library is in place I'd reference the multiblock article as a start point and I'll walk through integrating the design library and building out a multiblock plugin that will feature two card types, one for listing posts and another for listing pages. Maybe as a bonus I will create an open ended card where the parent block is a grid and each innerblock is a fully editable card.

bph avatar Jan 09 '25 14:01 bph