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

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

Presented at FlyFest 2020

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

July 16, 2020
Tweet

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?