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

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

3.
@jeckman
Be all in
Photo by Tiago Gerken on Unsplash

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

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

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

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

8.
@jeckman
Atomic
Blocks

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

10.
@jeckman
CoBlocks

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

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

13.
@jeckman
Stackable

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

15.
@jeckman
Ultimate
Addons for
Gutenberg

16.
@jeckman
Kioken
blocks

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

18.
American Marketing Association
@jeckman

19.
@jeckman
Restricted
Content
(editing)

20.
@jeckman
Restricted
Content
(front end)

21.
@jeckman

22.
@jeckman
Newsletter &
Latest Content

23.
Starbucks Stories
@jeckman

24.
@jeckman
Story Map
Block
(front end)

25.
@jeckman
Story Map
Block
(edit)

26.
@jeckman
Product
Recommendation

27.
@jeckman
Product
Recommendation
(edit)

28.
@jeckman
Starbucks
Productions
(front end)

29.
@jeckman
Starbucks
Productions
(edit)

30.
JDRF.org
@jeckman

31.
@jeckman
https://jdrf.design/

32.
@jeckman
Container
Options

33.
EAB
@jeckman

34.
@jeckman

35.
@jeckman

36.
@jeckman
Promo
Block

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

38.
Timeline
Block

39.
@jeckman
Timeline
Block
(editing)

40.
@jeckman
Editorial
Commenting

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

42.
@jeckman
Let’s GO!
Photo by Kid Circus on Unsplash

43.
John Eckman
CEO
@jeckman
Q&A
Photo by Camylla Battani on Unsplash