Don't Fear The Block: Gutenberg is Gettin' Good

Slide 1

Slide 1 text

Don’t Fear the Block John Eckman @jeckman WordCamp New York September 15th, 2019

Slide 2

Slide 2 text

@jeckman https://twitter.com/jeckman/status/1021092249885659136 Photo by Nathan Anderson on Unsplash

Slide 3

Slide 3 text

@jeckman Be all in Photo by Tiago Gerken on Unsplash

Slide 4

Slide 4 text

@jeckman What’s New in Gutenberg? Photo by Kahika on Unsplash

Slide 5

Slide 5 text

@jeckman Gutenberg Improvements • 5.0: RSS Block, Kindle Embed Block, Focal Point Picker • 5.1: Search, Calendar, Tag Cloud Blocks; Micro- animations; Widgets-to-Blocks complete • 5.2: @wordpress/block-editor module • 5.3: block management, nested blocks, legacy widget • 5.4: Vertical alignment in columns, playsinline video, improved hover state • 5.5: Group block, vertical alignment and image fill options in Media & Text block • 5.6: Improved focus state, simplified style specificity • 5.7: Width setting in column block, show post content or excerpt in Latest Posts; headers and footers in table block • 5.8: Change text color in heading block, reorder gallery images, widgets screen POC • 5.9: Snackbar notices, group block • 6.0: predefined layouts in columns block, improvements to group block • 6.1: Using motion/animation when moving blocks • 6.2: Nesting cover and media & text blocks, button block customization • 6.3: A11y support for navigation and edit modes • 6.4: Resize and background color for Cover block, typewriter experience, circle crop on image block https://wpengine.com/blog/gutenberg-a-six-month-feature-update Photo by Guilherme Cunha on Unsplash

Slide 6

Slide 6 text

@jeckman Content Block Areas (Phase II begins) https://make.wordpress.org/ core/2019/09/05/deﬁning- content-block-areas/

Slide 7

Slide 7 text

@jeckman Third -Party Libraries Photo by Susan Holt Simpson on Unsplash

Slide 8

Slide 8 text

@jeckman Atomic Blocks

Slide 9

Slide 9 text

@jeckman “More recently, Array’s Atomic Blocks library has emerged as a go-to source for creative, easy-to-use Gutenberg blocks that leverage the new WordPress editor. Atomic Blocks is the most popular and most downloaded library of beautiful, responsive, and customizable blocks for Gutenberg. It allows users to add great-looking elements to their web pages at significantly reduced turnaround times that convert at higher rates, all without touching a line of code.” https://wpengine.com/blog/bringing-array-themes-into-the-wp-engine-family/

Slide 10

Slide 10 text

@jeckman CoBlocks

Slide 11

Slide 11 text

@jeckman “Effective today, Rich Tabor is joining GoDaddy to help lead innovation around Gutenberg.” “CoBlocks and ThemeBeans are joining the GoDaddy family.” https://www.godaddy.com/garage/coblocks-themebeans-tabor/

Slide 12

Slide 12 text

10up & GoDaddy collaboration - Gutenberg ready, CoBlocks enabled theme - coming soon to .org

Slide 13

Slide 13 text

@jeckman Stackable

Slide 14

Slide 14 text

@jeckman https://demo.wpstackable.com/v2/bold/

Slide 15

Slide 15 text

@jeckman Ultimate Addons for Gutenberg

Slide 16

Slide 16 text

@jeckman Kioken blocks

Slide 17

Slide 17 text

@jeckman 10up Projects Using Gutenberg Photo by Andrew Neel on Unsplash

Slide 18

Slide 18 text

American Marketing Association @jeckman

Slide 19

Slide 19 text

@jeckman Restricted Content (editing)

Slide 20

Slide 20 text

@jeckman Restricted Content (front end)

Slide 21

Slide 21 text

@jeckman

Slide 22

Slide 22 text

@jeckman Newsletter & Latest Content

Slide 23

Slide 23 text

Starbucks Stories @jeckman

Slide 24

Slide 24 text

@jeckman Story Map Block (front end)

Slide 25

Slide 25 text

@jeckman Story Map Block (edit)

Slide 26

Slide 26 text

@jeckman Product Recommendation

Slide 27

Slide 27 text

@jeckman Product Recommendation (edit)

Slide 28

Slide 28 text

@jeckman Starbucks Productions (front end)

Slide 29

Slide 29 text

@jeckman Starbucks Productions (edit)

Slide 30

Slide 30 text

JDRF.org @jeckman

Slide 31

Slide 31 text

@jeckman https://jdrf.design/

Slide 32

Slide 32 text

@jeckman Container Options

Slide 33

Slide 33 text

EAB @jeckman

Slide 34

Slide 34 text

@jeckman

Slide 35

Slide 35 text

@jeckman

Slide 36

Slide 36 text

@jeckman Promo Block

Slide 37

Slide 37 text

The Rockefeller Archive Center is a major repository and research center for the study of philanthropy and its impact throughout the world. In addition to the papers of the Rockefeller family, the RAC's collections include the records of the Rockefeller Foundation, Ford Foundation, Near East Foundation, Commonwealth Fund, Rockefeller Brothers Fund, Henry Luce Foundation, W. T. Grant Foundation and many other philanthropic organizations. Rockefeller Archive Center

Slide 38

Slide 38 text

Timeline Block

Slide 39

Slide 39 text

@jeckman Timeline Block (editing)

Slide 40

Slide 40 text

@jeckman Editorial Commenting

Slide 41

Slide 41 text

@jeckman Lessons Learned • Use Gutenberg to force component based designs & design systems • Aim for direct manipulation of visual objects - but balance that with the flexibility of attributes and inspector controls • Extend core blocks where possible instead of remaking them • Combine blocks into groupings • The “reusable blocks” feature is amazing but needs improvement Photo by Roman Mager on Unsplash