Презентация - Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything

TEMPLATES &
PLUGINS &
BLOCKS, Oh my!
Creating The Theme That Thinks Of Everything

@marktimemedia
HI, I’M
MICHELLE.
I Design
& Build DIGITAL
INTERFACES Rockstar at saying stuff. Adorable badass. Carefully curated spontaneity. Master suitcase packer. Accidental fitness buff.
likely not coffee

@marktimemedia
WHAT THIS TALK
WILL NOT BE

@marktimemedia
VISUAL DESIGN LESSONS

@marktimemedia
THEME
CODING LESSONS

@marktimemedia
WHAT THIS TALK
WILL BE

@marktimemedia
HOW TO
PLAN FOR THE UNKNOWN

@marktimemedia
HOW TO STYLE
THE MOST CONTENT WITH THE LEAST WORK

@marktimemedia
WHAT IS THE PURPOSE
OF A THEME?

@marktimemedia
SUPPORT ALL
CONTENT Content is meant to change Content will never be perfect Themes should account for any future decision that is possible

@marktimemedia
SUPPORT ALL
DEVICES Design breakpoints/context changes based on screen size, not device Keep accessibility in mind (contrast, resizing, navigation, focus, semantics, etc)

@marktimemedia
SUPPORT ALL
ELEMENTS All semantic HTML should be styled All WordPress content types should be styled All added elements should be styled

@marktimemedia
Post Types Metadata Plugins & Functions Third-Party Integrations One-to-one Relationships One-to-many Relationships

@marktimemedia
LIMITATIONS
of traditional themes

@marktimemedia
CONTENT IS
DYNAMIC AND INTERACTIVE

@marktimemedia
UNIQUE CONTENT
CAN BE SMALLER THAN PAGES

@marktimemedia
HOW IT WORKS
IS NOT DEPENDENT ON WHAT IT SAYS

@marktimemedia
EXPERIENCES
SHOULD BE
CUSTOMIZABLE

Patterns Systems Iterating Prototyping Maintaining Scaling

@marktimemedia
THE IDEA

@marktimemedia
Reorderable, reusable
elements that combine to build unique content

@marktimemedia
Content dictates layout
rather than layout dictating content

@marktimemedia
Elements can exist within
any context or location

@marktimemedia
Seamless functional and
stylistic integration

@marktimemedia

@marktimemedia
EMBRACE THE
CASCADE

@marktimemedia
Style cascade:
LEVERAGING CSS

@marktimemedia
Abstract your styling for the broadest use case

@marktimemedia
ITCSS
https://www.creativebloq.com/web-design/ manage-large-css-projects-itcss-101517528 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

@marktimemedia
reset > global variables > html elements > utility classes > block-level classes > template-level classes > overrides

@marktimemedia
Structural cascade:
LEVERAGING ATOMIC DESIGN

@marktimemedia
Abstract your
structure for the broadest use case

@marktimemedia
ATOMIC DESIGN
BRAD FROST

@marktimemedia

@marktimemedia
ATOMS
THE SMALLEST BUILDING BLOCKS

@marktimemedia
http://zqsmm.qiniucdn.com/data/20110511083224/index.html

@marktimemedia
http://demo.patternlab.io

@marktimemedia
MOLECULES
UNIQUE COMBINATIONS OF ATOMS

@marktimemedia
http://demo.patternlab.io

@marktimemedia
ORGANISMS
MOLECULES COMING TOGETHER ALLOW ACTION

@marktimemedia
http://demo.patternlab.io

@marktimemedia
TEMPLATES
ORGANISMS TOGETHER BECOME LAYOUTS

@marktimemedia
http://demo.patternlab.io

@marktimemedia
PAGES
TEMPLATES WITH SPECIFIC CONTENT

@marktimemedia
http://demo.patternlab.io

@marktimemedia

@marktimemedia
GUTENBERG
& The Block Model

the_content()
From the blob to the block

@marktimemedia

@marktimemedia
developer.wordpress.org
At the core of Gutenberg lies the concept of the block. From a technical point of view, blocks both raise the level of abstraction from a single document to a collection of meaningful elements, and they replace ambiguity—inherent in HTML—with explicit structure.

@marktimemedia
developer.wordpress.org
From a user perspective, blocks allow any kind of content, media, or functionality to be directly added to their site in a more consistent and usable way. The “add block” button gives the user access to an entire library of options all in one place.

@marktimemedia
HTML elements > block & template parts > single blocks > block patterns > block templates > core/custom templates

@marktimemedia
ATOMS
h1-h6 Paragraphs Links Code, Pre Separators Buttons

@marktimemedia
ATOMS
Settings Colors Gradients Font Sizes Image Sizes

@marktimemedia
MOLECULES
Ordered & Unordered Lists Tables, Headers, & Footers Quote + Citation Image + Captions

@marktimemedia
MOLECULES
Image + Captions Video, Audio More, Page Break Navigation Button Groups

ORGANISMS Gallery Media + Text
@marktimemedia

@marktimemedia
ORGANISMS
Groups Columns Cover Images

ORGANISMS Dynamic Blocks Reusable Blocks Custom Blocks
@marktimemedia

@marktimemedia
TEMPLATES
Post Type block templates Standard Page templates Standard WordPress templates

@marktimemedia
TEMPLATES
Post Type block templates Standard Page templates Standard WordPress templates

THE
FUTURE
of block editing

@marktimemedia
Block
Patterns
https://developer.wordpress.org/ block-editor/developers/block-api/block-patterns/

@marktimemedia

@marktimemedia
https://developer.wordpress.org/block-editor/developers/ themes/block-based-themes/
Block Template Parts

@marktimemedia
Gutenberg
Experiments

@marktimemedia
https://wptavern.com/themes-of-the-future-a-design-framework-and- a-master-theme
Whole Site Editor

@marktimemedia
WHAT IS A THEME
IN THE AGE OF BLOCKS?

@marktimemedia
Global styling
for core blocks and content

@marktimemedia
Curating Block
Editor options

@marktimemedia
Including
block patterns & templates

@marktimemedia
Detailed
styling to target specific plugins

@marktimemedia
Support
recommended block libraries

@marktimemedia
RESOURCES

@marktimemedia
Resources
Block Editor https://developer.wordpress.org/block-editor/ Atomic Design http://atomicdesign.bradfrost.com/ Style Guides http://styleguides.io/tools.html Style Prototype http://sparkbox.github.io/style-prototype/ “Ish” variable viewport tool http://bradfrost.com/demo/ish/ http://zqsmm.qiniucdn.com/data/20110511083224/index.html https://github.com/marktimemedia/mtm-blocks
HTML Elements
My block plugin:

@marktimemedia
Modular design
https://www.toptal.com/designers/ux/getting-started-with-modular-front-end- development https://room34.com/philosophy/modular-design/ https://www.crema.us/blog/atomic-design-systems https://ethanmarcotte.com/wrote/pattern-patter/ http://alistapart.com/article/language-of-modular-design https://airbnb.design/building-a-visual-language/ https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/ https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/ https://blog.prototypr.io/atomic-design-in-practice-does-it-work-9655bacb49d7

@marktimemedia
The future of themes
https://make.wordpress.org/themes/2020/03/18/block-based-themes-meeting- notes/?mc_cid=8b1c91717b&mc_eid=ad2f6116f3 https://wptavern.com/where-gutenberg-went-wrong-theme-developer-edition https://wptavern.com/key-takeaways-from-the-first-future-of-themes-meeting https://twitter.com/carolinapoena/status/1255324873137762306 https://matiasventura.com/post/thoughts-on-themes/ https://richtabor.com/block-patterns/

@marktimemedia
Michelle Schulp
QUESTIONS?
" michelle@marktimemedia.com ! @marktimemedia ! michelleschulp.pink bit.ly/themes-plugins-blocks-2020
Here’s how to
get in touch:
#
WHERE TO FIND ME NEXT:
NOW: General Q&A Twitter & WP Slack
ONLINE: Fitness & Freelance, Meetups, WordCamp MSP
IN PERSON: Maybe someday?