Skip to content

Integrating a design system into the block editor #361

Closed
@troychaplin

Description

@troychaplin

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions