Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

Presented at FlyFest 2020

Transcript

1. TEMPLATES & PLUGINS & BLOCKS, Oh my! Creating The Theme That Thinks Of Everything
2. @marktimemedia I Design & Build DIGITAL INTERFACES HI, I’M MICHELLE. Rockstar at saying stuff. Adorable badass. Carefully curated spontaneity. Master suitcase packer. Accidental fitness buff. likely not coffee
3. @marktimemedia WHAT THIS TALK WILL NOT BE
4. @marktimemedia VISUAL DESIGN LESSONS
5. @marktimemedia THEME CODING LESSONS
6. @marktimemedia WHAT THIS TALK WILL BE
7. @marktimemedia HOW TO PLAN FOR THE UNKNOWN
8. @marktimemedia HOW TO STYLE THE MOST CONTENT WITH THE LEAST WORK
9. @marktimemedia WHAT IS THE PURPOSE OF A THEME?
10. @marktimemedia SUPPORT ALL CONTENT Content is meant to change Content will never be perfect Themes should account for any future decision that is possible
11. @marktimemedia SUPPORT ALL DEVICES Design breakpoints/context changes based on screen size, not device Keep accessibility in mind (contrast, resizing, navigation, focus, semantics, etc)
12. @marktimemedia SUPPORT ALL ELEMENTS All semantic HTML should be styled All WordPress content types should be styled All added elements should be styled
13. @marktimemedia Post Types Metadata Plugins & Functions Third-Party Integrations One-to-one Relationships One-to-many Relationships
14. @marktimemedia LIMITATIONS of traditional themes
15. @marktimemedia CONTENT IS DYNAMIC AND INTERACTIVE
16. @marktimemedia UNIQUE CONTENT CAN BE SMALLER THAN PAGES
17. @marktimemedia HOW IT WORKS IS NOT DEPENDENT ON WHAT IT SAYS
18. @marktimemedia EXPERIENCES SHOULD BE CUSTOMIZABLE
19. @marktimemedia Patterns Systems Iterating Prototyping Maintaining Scaling
20. @marktimemedia THE IDEA
21. @marktimemedia Reorderable, reusable elements that combine to build unique content
22. @marktimemedia Content dictates layout rather than layout dictating content
23. @marktimemedia Elements can exist within any context or location
24. @marktimemedia Seamless functional and stylistic integration
25. @marktimemedia
26. @marktimemedia EMBRACE THE CASCADE
27. @marktimemedia Style cascade: LEVERAGING CSS
28. @marktimemedia Abstract your styling for the broadest use case
29. @marktimemedia ITCSS https://www.creativebloq.com/web-design/ manage-large-css-projects-itcss-101517528 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
30. @marktimemedia reset > global variables > html elements > utility classes > block-level classes > template-level classes > overrides
31. @marktimemedia Structural cascade: LEVERAGING ATOMIC DESIGN
32. @marktimemedia Abstract your structure for the broadest use case
33. @marktimemedia ATOMIC DESIGN BRAD FROST
34. @marktimemedia
35. @marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS
36. @marktimemedia http://zqsmm.qiniucdn.com/data/20110511083224/index.html
37. @marktimemedia http://demo.patternlab.io
38. @marktimemedia MOLECULES UNIQUE COMBINATIONS OF ATOMS
39. @marktimemedia http://demo.patternlab.io
40. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION
41. @marktimemedia http://demo.patternlab.io
42. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS
43. @marktimemedia http://demo.patternlab.io
44. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT
45. @marktimemedia http://demo.patternlab.io
46. @marktimemedia
47. @marktimemedia GUTENBERG & The Block Model
48. @marktimemedia the_content() From the blob to the block
49. @marktimemedia
50. @marktimemedia 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. developer.wordpress.org
51. @marktimemedia 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. developer.wordpress.org
52. @marktimemedia HTML elements > block & template parts > single blocks > block patterns > block templates > core/custom templates
53. @marktimemedia ATOMS h1-h6 Paragraphs Links Code, Pre Separators Buttons
54. @marktimemedia ATOMS Settings Colors Gradients Font Sizes Image Sizes
55. @marktimemedia MOLECULES Ordered & Unordered Lists Tables, Headers, & Footers Quote + Citation Image + Captions
56. @marktimemedia MOLECULES Image + Captions Video, Audio More, Page Break Navigation Button Groups
57. @marktimemedia ORGANISMS Gallery Media + Text
58. @marktimemedia ORGANISMS Groups Columns Cover Images
59. @marktimemedia ORGANISMS Dynamic Blocks Reusable Blocks Custom Blocks
60. @marktimemedia TEMPLATES Post Type block templates Standard Page templates Standard WordPress templates
61. @marktimemedia TEMPLATES Post Type block templates Standard Page templates Standard WordPress templates
62. @marktimemedia THE FUTURE of block editing
63. @marktimemedia Block Patterns https://developer.wordpress.org/ block-editor/developers/block-api/block-patterns/
64. @marktimemedia
65. @marktimemedia Block Template Parts https://developer.wordpress.org/block-editor/developers/ themes/block-based-themes/
66. @marktimemedia Gutenberg Experiments
67. @marktimemedia Whole Site Editor https://wptavern.com/themes-of-the-future-a-design-framework-and- a-master-theme
68. @marktimemedia WHAT IS A THEME IN THE AGE OF BLOCKS?
69. @marktimemedia Global styling for core blocks and content
70. @marktimemedia Curating Block Editor options
71. @marktimemedia Including block patterns & templates
72. @marktimemedia Detailed styling to target specific plugins
73. @marktimemedia Support recommended block libraries
74. @marktimemedia RESOURCES
75. @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/ • HTML Elements http://zqsmm.qiniucdn.com/data/20110511083224/index.html • My block plugin: https://github.com/marktimemedia/mtm-blocks
76. @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
77. @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/
78. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp michelle@marktimemedia.com @marktimemedia michelleschulp.pink bit.ly/themes-plugins-blocks-2020 WHERE TO FIND ME NEXT: NOW: General Q&A Twitter & WP Slack ONLINE: Fitness & Freelance, Meetups, WordCamp MSP IN PERSON: Maybe someday?