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.

Notes:

• 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/