HEWeb #DPC4: How we built a design system storefront with WordPress blocks

Wednesday, October 11th, 2023

Red stapler winner! Monday, October 9, 2023, 2:45 PM – 3:30 PM EDT
Mike Henderson – NewCity

A well-designed storefront can be a valuable asset for your working design system. Building on the Atomic Design principles established by Brad Frost, a storefront is a useful way to take your components out of the workshop and display them in a meaningful and organized way. Modern WordPress allows us to build this storefront in a way that provides examples of the actual component in use, demonstrates how to use each component and variant, allows easy movement of the component into its own website via copy/paste, and allows for technical documentation for power users of the design system. Attendees will take a look at a living storefront example and learn how it impacted the rollout of a new design system to a greater campus community.


  • Benefits of a design system
  • Modern wordpress
    • theme.json – to configure and style core blocks and theme settings
      • Manage fonts
      • Set colors
      • Apply spacing
      • Custom CSS
      • Toggle wordpress settings (disable duotone, caps, etc…)
    • Block patterns – arrangement of core blocks and settings
      • Configure in editor
      • Place block code into a file /patterns
        • Can define a bunch of stuff in the comments
      • Or, register block patterns with code
        • Gives you a bit more flexibility
      • Or, Use a plugin like “Pattern Manager”
  • Site editor
    • Shows block & synced “reusable” blocks
  • Block pattern variations
    • Leverage the core wordpress appearance toolbar when possible
    • Patterns can be nested <!– wp:pattern{“slug”…
  • Custom blocks in patterns
    • <!– wp:my-pattern…
  • Idea of a storefront: put all your ingredients our on a shelf
    • Workshop – where you build out tools, and test
    • Storefront – display curated components in a meaningful way
  • WordPress has a pattern directory: wordpress.org/patterns
  • Your storefront
    • Easy to see cards
    • Each card shows details and variations
    • Button to copy block (simply copies meta code) and paste onto any page.
    • Copy/paste relies on on unsing the same theme
  • At this point, there is no way to update the pasted blocks, but this is coming.

An example copied/pasted from wordpress.org/patterns/pattern/two-images-side-by-side/

Leave a Reply

You know you want to...