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

Нажмите для просмотра
Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything
Распечатать
  • Последний IP: 54.36.148.70
  • Уникальность: 81%
  • Слайдов: 78
  • Просмотров: 2037
  • Скачиваний: 1388
  • Размер: 28.96 MB
В закладки
Оцени!
На весь экран

Слайды и текст этой презентации

Слайд 1

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 1

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

Слайд 2

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 2

@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

Слайд 3

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 3

@marktimemedia
WHAT THIS TALK
WILL NOT BE

Слайд 4

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 4

@marktimemedia
VISUAL DESIGN LESSONS

Слайд 5

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 5

@marktimemedia
THEME
CODING LESSONS

Слайд 6

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 6

@marktimemedia
WHAT THIS TALK
WILL BE

Слайд 7

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 7

@marktimemedia
HOW TO
PLAN FOR THE UNKNOWN

Слайд 8

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 8

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

Слайд 9

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 9

@marktimemedia
WHAT IS THE PURPOSE
OF A THEME?

Слайд 10

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 13

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

Слайд 14

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 14

@marktimemedia
LIMITATIONS
of traditional themes

Слайд 15

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 15
@marktimemedia
CONTENT IS
DYNAMIC AND INTERACTIVE

Слайд 16

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 16

@marktimemedia
UNIQUE CONTENT
CAN BE SMALLER THAN PAGES

Слайд 17

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 17

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

Слайд 18

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 18

@marktimemedia
EXPERIENCES
SHOULD BE
CUSTOMIZABLE

Слайд 19

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 19
Patterns Systems Iterating Prototyping Maintaining Scaling

Слайд 20

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 20

@marktimemedia
THE IDEA

Слайд 21

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 21

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

Слайд 22

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 22

@marktimemedia
Content dictates layout
rather than layout dictating content

Слайд 23

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 23

@marktimemedia
Elements can exist within
any context or location

Слайд 24

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 24

@marktimemedia
Seamless functional and
stylistic integration

Слайд 25

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 25

@marktimemedia

Слайд 26

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 26

@marktimemedia
EMBRACE THE
CASCADE

Слайд 27

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 27
@marktimemedia
Style cascade:
LEVERAGING CSS

Слайд 28

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 28

@marktimemedia
Abstract your styling for the broadest use case

Слайд 29

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 30
@marktimemedia
reset > global variables > html elements > utility classes > block-level classes > template-level classes > overrides

Слайд 31

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 31

@marktimemedia
Structural cascade:
LEVERAGING ATOMIC DESIGN

Слайд 32

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 32

@marktimemedia
Abstract your
structure for the broadest use case

Слайд 33

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 33
@marktimemedia
ATOMIC DESIGN
BRAD FROST

Слайд 34

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 34

@marktimemedia

Слайд 35

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 35
@marktimemedia
ATOMS
THE SMALLEST BUILDING BLOCKS

Слайд 36

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 36

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

Слайд 37

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 37
@marktimemedia
http://demo.patternlab.io

Слайд 38

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 38
@marktimemedia
MOLECULES
UNIQUE COMBINATIONS OF ATOMS

Слайд 39

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 39
@marktimemedia
http://demo.patternlab.io

Слайд 40

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 40
@marktimemedia
ORGANISMS
MOLECULES COMING TOGETHER ALLOW ACTION

Слайд 41

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 41
@marktimemedia
http://demo.patternlab.io

Слайд 42

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 42
@marktimemedia
TEMPLATES
ORGANISMS TOGETHER BECOME LAYOUTS

Слайд 43

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 43

@marktimemedia
http://demo.patternlab.io

Слайд 44

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 44
@marktimemedia
PAGES
TEMPLATES WITH SPECIFIC CONTENT

Слайд 45

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 45

@marktimemedia
http://demo.patternlab.io

Слайд 46

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 46

@marktimemedia

Слайд 47

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 47

@marktimemedia
GUTENBERG
& The Block Model

Слайд 48

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 48

the_content()
From the blob to the block

Слайд 49

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 49

@marktimemedia

Слайд 50

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 50

@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.

Слайд 51

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 51

@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.

Слайд 52

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 52
@marktimemedia
HTML elements > block & template parts > single blocks > block patterns > block templates > core/custom templates

Слайд 53

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 53
@marktimemedia
ATOMS
h1-h6 Paragraphs Links Code, Pre Separators Buttons

Слайд 54

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 54
@marktimemedia
ATOMS
Settings Colors Gradients Font Sizes Image Sizes

Слайд 55

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 55
@marktimemedia
MOLECULES
Ordered & Unordered Lists Tables, Headers, & Footers Quote + Citation Image + Captions

Слайд 56

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 56
@marktimemedia
MOLECULES
Image + Captions Video, Audio More, Page Break Navigation Button Groups

Слайд 57

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 57
ORGANISMS Gallery Media + Text
@marktimemedia

Слайд 58

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 58
@marktimemedia
ORGANISMS
Groups Columns Cover Images

Слайд 59

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 59
ORGANISMS Dynamic Blocks Reusable Blocks Custom Blocks
@marktimemedia

Слайд 60

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 60
@marktimemedia
TEMPLATES
Post Type block templates Standard Page templates Standard WordPress templates

Слайд 61

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 61
@marktimemedia
TEMPLATES
Post Type block templates Standard Page templates Standard WordPress templates

Слайд 62

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 62

THE
FUTURE
of block editing

Слайд 63

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 63

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

Слайд 64

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 64

@marktimemedia

Слайд 65

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 65

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

Слайд 66

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 66

@marktimemedia
Gutenberg
Experiments

Слайд 67

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 67

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

Слайд 68

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 68

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

Слайд 69

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 69

@marktimemedia
Global styling
for core blocks and content

Слайд 70

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 70

@marktimemedia
Curating Block
Editor options

Слайд 71

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 71

@marktimemedia
Including
block patterns & templates

Слайд 72

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 72

@marktimemedia
Detailed
styling to target specific plugins

Слайд 73

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 73

@marktimemedia
Support
recommended block libraries

Слайд 74

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 74

@marktimemedia
RESOURCES

Слайд 75

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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/ http://zqsmm.qiniucdn.com/data/20110511083224/index.html https://github.com/marktimemedia/mtm-blocks
HTML Elements
My block plugin:

Слайд 76

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 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

Templates &. Plugins &. Blocks, oh my!. Creating the theme that thinks of everything, слайд 78

@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?
^ Наверх
X

Благодарим за оценку!

Мы будем признательны, если Вы так же поделитесь этой презентацией со своими друзьями и подписчиками.