What you see now and what the Gutenberg editor looks like in 3.6.2. Slides from WordCamp Lehigh Valley 2018

1. Content Editing in
WordPress ...
Now and
... INTO the
FUTURE
Kerch McConlogue (@kerchmcc)

2. Whoever wants to understand much
must play much.
Gottfried Benn
Kerch McConlogue (@kerchmcc) 2

3. What we’ll cover
• First: What you do now and how it will
be different
• Second: Cool stuff you can do with
Gutenberg
Kerch McConlogue (@kerchmcc) 3

4. WordPress 4.9.8
Dashboard Screen
Kerch McConlogue (@kerchmcc) 4

5. Edit Settings || Writing
to keep Gutenberg OFF
Kerch McConlogue (@kerchmcc) 5

6. Couple of problem places
• The edit window sometimes shows up really
slowly
• Preview window doesn’t seem to work well
• Changing the color of a few words in a block
doesn’t seem to work now.
• If you edit classic content that has an image in
it, the image (this week) got stripped out in
the blockification of the post
6Kerch McConlogue (@kerchmcc)

7. Play here: http://poopy.life/
Gutenberg plugin support forum:
wordpress.org/support/plugin/gutenberg/
7Kerch McConlogue (@kerchmcc)

8. PUSH THE ^
BUTTONS!
I promise you:
Nothing will break
Kerch McConlogue (@kerchmcc) 8
Poopy

9. Kerch McConlogue (@kerchmcc)
9
Editing Screen
This corner means it’s from
the existing classic editor

10. The new editor
Kerch McConlogue (@kerchmcc) 10
Some
other
tools
Block and
document
options
Hovering over
stuff is key
Block control

11. Kerch McConlogue (@kerchmcc)
11
Blockcontrol

12. Kerch McConlogue (@kerchmcc)
12
Full list of options Inline elements

13. Kerch McConlogue (@kerchmcc)
13
Common Blocks Formatting

14. Kerch McConlogue (@kerchmcc)
14
Layout Elements Widgets

15. Kerch McConlogue (@kerchmcc)
15
Embeds Reusable Blocks

16. Kerch McConlogue (@kerchmcc)
16
Gear has both Block and
Document settings

17. 17Kerch McConlogue (@kerchmcc)

18. Kerch McConlogue (@kerchmcc)
18
Three dots icon has
• Editor options (Visual or Code)
• Fix Toolbar to top
• Other tools

19. Post title
Kerch McConlogue (@kerchmcc)
19

20. Kerch McConlogue (@kerchmcc)
20

21. Kerch McConlogue (@kerchmcc)
21
What it looks like when you put in a title

22. Permalink
Kerch McConlogue (@kerchmcc) 22

23. Kerch McConlogue (@kerchmcc)
23

24. Text Tab
Visual Tab
Visual Text
Kerch McConlogue (@kerchmcc)
24

25. Kerch McConlogue (@kerchmcc)
25
See BlockSettings

26. Kerch McConlogue (@kerchmcc)
26

27. Kerch McConlogue (@kerchmcc)
27
See BlockSettings

28. Kerch McConlogue (@kerchmcc)
28
Headings

29. 29
2 ways to add/control
Heading Blocks
Kerch McConlogue (@kerchmcc)

30. Kerch McConlogue (@kerchmcc)
30

31. Bullets in Classic Editor
Kerch McConlogue (@kerchmcc)
31
This is an unordered list
• One banana
• Two banana
• Three banana
• Or

32. Kerch McConlogue (@kerchmcc)
32
1. banana
2. banana
3. banana
4. Or
Ordered lists in Classic Editor

33. Kerch McConlogue (@kerchmcc)
33
Lists in Gutenberg

34. Kerch McConlogue (@kerchmcc)
34
Use the bullet blockto make a list

35. Kerch McConlogue (@kerchmcc)
35

36. Add Media.
Kerch McConlogue (@kerchmcc)
36

37. Kerch McConlogue (@kerchmcc)
37
Classic Manipulating Images

38. Alternative Text (Alt tag)
Caption
Kerch McConlogue (@kerchmcc)
38

39. 39
Adding images
Kerch McConlogue (@kerchmcc)

40. Kerch McConlogue (@kerchmcc)
40

41. Classic Screen Options
41Kerch McConlogue (@kerchmcc)

42. ??
Kerch McConlogue (@kerchmcc)
42
Designating Authors and Other Stuff

43. Kerch McConlogue (@kerchmcc)
43

44. 44Kerch McConlogue (@kerchmcc)
All of those bits of
information are contained in
the document sidebar

45. 45
Cool New Gutenberg Things
• Buttons
• Cover image
• Repeatable blocks
• Drop Caps
• Gallery
• Pull quote includes a pre inserted
citation field
• Tables
• Columns
• Embeds
Kerch McConlogue (@kerchmcc)

46. Buttons
46WordCamp Kerch McConlogue

47. 47WordCamp Kerch McConlogue

48. 48
Cover Image
Kerch McConlogue (@kerchmcc)

49. 49Kerch McConlogue (@kerchmcc)

50. 50Kerch McConlogue (@kerchmcc)

51. 51Kerch McConlogue (@kerchmcc)

52. 52Kerch McConlogue (@kerchmcc)

53. 53Kerch McConlogue (@kerchmcc)

54. 54
Reusable blocks
Kerch McConlogue (@kerchmcc)

55. 55Kerch McConlogue (@kerchmcc)
Name the Block

56. 56Kerch McConlogue (@kerchmcc)
Use it again

57. 57Kerch McConlogue (@kerchmcc)

58. 58
Drop Caps
Kerch McConlogue (@kerchmcc)

59. 59Kerch McConlogue (@kerchmcc)
OOOH! COLORS!!
Please be careful!

60. 60
Choosing the Classic Block
Puts back the old editing icons
FOR THAT ONE BLOCK
Kerch McConlogue (@kerchmcc)

61. 61
Inserting tables
Kerch McConlogue (@kerchmcc)

62. 62Kerch McConlogue (@kerchmcc)

63. 63
Using columns
Kerch McConlogue (@kerchmcc)

64. 64
Widgets can be added
right into content
Kerch McConlogue (@kerchmcc)

65. 65
Undo and redo
Kerch McConlogue (@kerchmcc)

66. 66Kerch McConlogue (@kerchmcc)
Info about this page or post

67. 67
And Thanks!
http://bit.ly/2MsUoPf
Kerch McConlogue @kerchmcc
Kerch@WeFixBrokenWebsites.com