In her Rethinking Themes: Embracing Atomic Design with Gutenberg presentation at the online WordCamp Denver 2020, Michelle Schulp discussed atomic design principles, how they apply to Gutenberg, and how WordPress users can start thinking of content as building blocks.
I first met Michele eight years ago, when she attended our WordCamp Detroit 2012 event. I remember chatting about design, WordPress, and conferences.
Over the years, we’ve met up at WordCamp Phoenix as well as WordCamp Orlando and WordCamp US.
Michele designs and builds digital interfaces, works on UX design and strategy as well as front-end development. She runs her own company MarkTime Media.
Here are my notes from her talk.
Rethinking Themes: Embracing Atomic Design with Gutenberg
- When the web was created, it was based on pages. Specifically, HTML static pages were created based on the concept of printed pages.
- As the web advanced, it became based on dynamic content. Content management systems were developed, like WordPress. Content is dynamic, and can be connected in new and exciting ways.
- Page models can be limiting. You want to do more than display static, non-changing content on websites.
- Unique pieces of content on pages, can be functionally smaller than the page itself snd can be used in different ways. Think of the card concept, which can be used to display a recipe. Or a podcast.
- Coined by Brad Frost in 2013, the concept of atomic design refers to approaching design in a modular way.
- With atomic design, the web is made of reordable, reusable elements that can be combined in different ways to build unique content.
- Content of a page determines the layout, rather than layout dictating content
- Elements are self-contained. All elements blend seamlessly into a site.
- DRY stands for “Don’t repeat yourself.”
- Modular file structure, stylesheets organized by specificity and type.
- Component library is a set of tools, pre-built. No guidance is included in the library.
- Style guides are instructions on why and how to use visual elements. It’s not a code library, rather it explains how to use color, typography, spacing, etc.
- Design systems are a unified set of standards, the component libraries and style guides
- Atomic design goes from the least complex to the most complex, using the concepts of atoms, molecules, organisms, templates, and pages.
- Atoms are the smallest building block. In HTML, it’s the HTML elements. It’s also colors and typography.
- Fun to see this cool periodic table of HTML elements Michelle shared during her presentation. Sadly, the table no longer exists due to a copyright suit.
- Molecules are unique, repeatable combinations of atoms. Examples are a page title, image with a captions, breadcrumb navigation
- Organisms: molecules combined to take some action. Examples: form with a button, grid of images.
- Templates: combine organisms together to create layouts., repeatable combinations of organisms. Examples: combining block level elements to create templates.
- Pages: templates filled with specific content. Can be used to create pages from the same layout.
- Gutenberg is the name for the Block Editor, built into WordPress core since WordPress 5.0.
- With the Block Editor, structure is added by using blocks. Replacing what was often referred to as a blob of text to different types of blocks.
- Like atomic design, the Block Editor creates reusable, repeatable elements that can be combined to build unique content. Similarly, the content dictates the layout.
- Core WordPress provides a collection of blocks, plugins add additional blocks
- In WordPress, atoms are headings, paragraphs, links, separators, buttons
- Molecules in WordPress are ordered and unordered lists, images with captions, audio, video, page break, navigation
- In WordPress, organisms are the gallery, media and text block, cover image block (image or video, overlay, buttons
can be added.) Groups and columns are also organisms. - Dynamic, reusable, and custom blocks are organisms in WordPress
- Templates in WordPress are Post Type block templates (think of a calendar block)
- Note: while the Block Editor is built into core WordPress, the Gutenberg plugin is more current with features and functionality
- The future of block editing: will the Block Editor replace page editors like Elementor? Schulp believes themes will have a place to create a cohesive look and feel.
- How should we think of atomic design with WordPress? Be consistent. Build systems, not pages. Think of your design as a style guide, less as a mockup.
- If you’re rebuilding an existing design with the Block Editor, conduct a content audit so you can identify repeatable content and functions.
- Define your brand: what are your colors, fonts, imagery?
- For your design, think of what blocks you’re going to use. Identify what blocks can be handled by core WordPress blocks, what additional plugins you’ll need for other blocks.
- Limitations for blocks: you’ll find you may need to style a lot of content on the pages. Trying to not repeat yourself may mean you’re creating more work for yourself.
Thank you to Michelle Schulp for uploading her presentation slides on SpeakerDeck.
Check the section at the end of her slideshow for resources on the block editor, atomic design, modular design, and the future of themes.
