WordPress MVP or:�How I Learned to Stop Worrying �and Love the Block
�Rapid page building with Gutenberg gives you total content and design flexibility to become your client’s Most Valuable Partner.
We’ll cover the basics of Atomic Design patterns using structural blocks, content blocks, custom blocks and how to implement them in different workflow scenarios.
Stop worrying about the block and enjoy the freedom to develop without the headaches of other page builders.
Dynamic Digital Development
jeremyedmiston.com
We begin and end each day as humans. Yet, our technologies and pace of change are making us feel, well, a bit less human.
Knowing what customers, employees, �and partners value most can help �create more meaningful experiences, �build brand loyalty, and drive growth.
When we focus on the human experience, �we go beyond just showing up. ��We build relationships that matter.
Dynamic Digital Development
jeremyedmiston.com
Explore / Design Phase
This is when the designing starts, and the foundation for client expectations are set.
Wireframes are the accepted building blocks at this point.
Dynamic Digital Development
jeremyedmiston.com
Explore / Design Phase
This is also where all those little blocks and blobs are defined and we start thinking about the required components and the development of templates.
Dynamic Digital Development
jeremyedmiston.com
Explore / Design Phase
With all the blocks defined in the wireframes, why not just build the page with blocks?
Dynamic Digital Development
jeremyedmiston.com
Beautiful content doesn’t have to be designed from scratch.
Patterns are collections of pre-arranged blocks you can assemble to make your content impactful, meaningful and appealing.
Experience the flexibility that blocks allow, whether you’re building your first site or write code for a living.
Dynamic Digital Development
jeremyedmiston.com
Atomic design is not a linear process, but rather a mental model to help us think of our interfaces as both a cohesive whole and a collection of parts.
CMS Implementation
Properties
Components
Blocks/Patterns
Modules/Features
Templates/Pages
Products
Atomic Design
Ions
Atoms
Molecules
Organisms
Complex Organisms
Species
Library
System
Dynamic Digital Development
jeremyedmiston.com
Base Stack for web site/app development:
WordPress (Gutenberg)
Astra / Astra Pro
Spectra (UAGB)
The SEO Framework
SiteKit from Google
Gravity Forms
Extended Stack
Toolset Types
WooCommerce
Dynamic Digital Development
jeremyedmiston.com
Structural Blocks
Wrapper elements that define pattern and page flow.
These containers are generally squashed and stretched for “responsive design”
Dynamic Digital Development
jeremyedmiston.com
Structural Blocks
HTML Sections
Columns (Flexbox or CSS Grid)
Spacers
Page sections could and should be locked to prevent editing.
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
This is where content is edited or rendered from other sources.
Content blocks can be simple or have complex components.
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
Header Blocks
Paragraph Blocks
Media and Text Blocks
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
Header Blocks
Paragraph Blocks
Media and Text Blocks
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
Header Blocks
Paragraph Blocks
Media and Text Blocks
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
Editable Content Blocks
Dynamic Content Block Pattern
Dynamic Digital Development
jeremyedmiston.com
Content Blocks
Editable Content Blocks
Dynamic Content Block Pattern
Dynamic Digital Development
jeremyedmiston.com
Custom Blocks
Custom Blocks can be whatever is required by the client.
From dynamic site content to external content feed rendering, imagination is the only limitation.
Dynamic Digital Development
jeremyedmiston.com
The page has been with us for a long time now. A few millennia, actually.
What new technology does is �create new opportunities.
While reading technology has come a long way – from papyrus to parchment to paperback to pixels – the concept of the page holds strong to this day.
Dynamic Digital Development
jeremyedmiston.com
Dynamic Digital Development
jeremyedmiston.com
Been Around the Block…
2020 CampDads Adventures
2014 Hilton Hotels Worldwide
2008 Paul Gauguin Cruises
2002 Point Loma University
Dynamic Digital Development
jeremyedmiston.com
Been Around the Block…
2020 CampDads Adventures
2014 Hilton Hotels Worldwide
2008 Paul Gauguin Cruises
2002 Point Loma University
Dynamic Digital Development
jeremyedmiston.com
Been Around the Block…
2020 CampDads Adventures
2014 Hilton Hotels Worldwide
2008 Paul Gauguin Cruises
2002 Point Loma University
Dynamic Digital Development
jeremyedmiston.com
Been Around the Block…
2020 CampDads Adventures
2014 Hilton Hotels Worldwide
2008 Paul Gauguin Cruises
2002 Point Loma University
If nothing else sticks from this talk, remember one last important thing:
It doesn't matter
what you've done,
what matters is what
you choose to do now.
Questions, comments, anecdotes from the front lines of web development?
Dynamic Digital Development
jeremyedmiston.com
Publicly Available Resources on Atomic Design Methodology
In addition to the e-book “Atomic Design” by Brad Frost, the following
Atomic Design Methodology resources are publicly available:
Atomic Design Methodology
https://atomicdesign.bradfrost.com/
Atomic Design 2022: What we can learn from Eames and other design giants
Publicly Available Resources on WordPress Gutenberg (Block) Editor
The New Gutenberg Editor
https://wordpress.org/gutenberg/
Block Editor Handbook: Component Reference�https://developer.wordpress.org/block-editor/reference-guides/components/
.