Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gutenberg vs. Classic Editor in WordPress

133 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Gutenberg vs. Classic Editor in WordPress

  1. 1. Content Editing in WordPress ... Now and ... INTO the FUTURE Kerch McConlogue (@kerchmcc)
  2. 2. Whoever wants to understand much must play much. Gottfried Benn Kerch McConlogue (@kerchmcc) 2
  3. 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. 4. WordPress 4.9.8 Dashboard Screen Kerch McConlogue (@kerchmcc) 4
  5. 5. Edit Settings || Writing to keep Gutenberg OFF Kerch McConlogue (@kerchmcc) 5
  6. 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. 7. Play here: http://poopy.life/ Gutenberg plugin support forum: wordpress.org/support/plugin/gutenberg/ 7Kerch McConlogue (@kerchmcc)
  8. 8. PUSH THE ^ BUTTONS! I promise you: Nothing will break Kerch McConlogue (@kerchmcc) 8 Poopy
  9. 9. Kerch McConlogue (@kerchmcc) 9 Editing Screen This corner means it’s from the existing classic editor
  10. 10. The new editor Kerch McConlogue (@kerchmcc) 10 Some other tools Block and document options Hovering over stuff is key Block control
  11. 11. Kerch McConlogue (@kerchmcc) 11 Blockcontrol
  12. 12. Kerch McConlogue (@kerchmcc) 12 Full list of options Inline elements
  13. 13. Kerch McConlogue (@kerchmcc) 13 Common Blocks Formatting
  14. 14. Kerch McConlogue (@kerchmcc) 14 Layout Elements Widgets
  15. 15. Kerch McConlogue (@kerchmcc) 15 Embeds Reusable Blocks
  16. 16. Kerch McConlogue (@kerchmcc) 16 Gear has both Block and Document settings
  17. 17. 17Kerch McConlogue (@kerchmcc)
  18. 18. Kerch McConlogue (@kerchmcc) 18 Three dots icon has • Editor options (Visual or Code) • Fix Toolbar to top • Other tools
  19. 19. Post title Kerch McConlogue (@kerchmcc) 19
  20. 20. Kerch McConlogue (@kerchmcc) 20
  21. 21. Kerch McConlogue (@kerchmcc) 21 What it looks like when you put in a title
  22. 22. Permalink Kerch McConlogue (@kerchmcc) 22
  23. 23. Kerch McConlogue (@kerchmcc) 23
  24. 24. Text Tab Visual Tab Visual Text Kerch McConlogue (@kerchmcc) 24
  25. 25. Kerch McConlogue (@kerchmcc) 25 See BlockSettings
  26. 26. Kerch McConlogue (@kerchmcc) 26
  27. 27. Kerch McConlogue (@kerchmcc) 27 See BlockSettings
  28. 28. Kerch McConlogue (@kerchmcc) 28 Headings
  29. 29. 29 2 ways to add/control Heading Blocks Kerch McConlogue (@kerchmcc)
  30. 30. Kerch McConlogue (@kerchmcc) 30
  31. 31. Bullets in Classic Editor Kerch McConlogue (@kerchmcc) 31 This is an unordered list • One banana • Two banana • Three banana • Or
  32. 32. Kerch McConlogue (@kerchmcc) 32 1. banana 2. banana 3. banana 4. Or Ordered lists in Classic Editor
  33. 33. Kerch McConlogue (@kerchmcc) 33 Lists in Gutenberg
  34. 34. Kerch McConlogue (@kerchmcc) 34 Use the bullet blockto make a list
  35. 35. Kerch McConlogue (@kerchmcc) 35
  36. 36. Add Media. Kerch McConlogue (@kerchmcc) 36
  37. 37. Kerch McConlogue (@kerchmcc) 37 Classic Manipulating Images
  38. 38. Alternative Text (Alt tag) Caption Kerch McConlogue (@kerchmcc) 38
  39. 39. 39 Adding images Kerch McConlogue (@kerchmcc)
  40. 40. Kerch McConlogue (@kerchmcc) 40
  41. 41. Classic Screen Options 41Kerch McConlogue (@kerchmcc)
  42. 42. ?? Kerch McConlogue (@kerchmcc) 42 Designating Authors and Other Stuff
  43. 43. Kerch McConlogue (@kerchmcc) 43
  44. 44. 44Kerch McConlogue (@kerchmcc) All of those bits of information are contained in the document sidebar
  45. 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. 46. Buttons 46WordCamp Kerch McConlogue
  47. 47. 47WordCamp Kerch McConlogue
  48. 48. 48 Cover Image Kerch McConlogue (@kerchmcc)
  49. 49. 49Kerch McConlogue (@kerchmcc)
  50. 50. 50Kerch McConlogue (@kerchmcc)
  51. 51. 51Kerch McConlogue (@kerchmcc)
  52. 52. 52Kerch McConlogue (@kerchmcc)
  53. 53. 53Kerch McConlogue (@kerchmcc)
  54. 54. 54 Reusable blocks Kerch McConlogue (@kerchmcc)
  55. 55. 55Kerch McConlogue (@kerchmcc) Name the Block
  56. 56. 56Kerch McConlogue (@kerchmcc) Use it again
  57. 57. 57Kerch McConlogue (@kerchmcc)
  58. 58. 58 Drop Caps Kerch McConlogue (@kerchmcc)
  59. 59. 59Kerch McConlogue (@kerchmcc) OOOH! COLORS!! Please be careful!
  60. 60. 60 Choosing the Classic Block Puts back the old editing icons FOR THAT ONE BLOCK Kerch McConlogue (@kerchmcc)
  61. 61. 61 Inserting tables Kerch McConlogue (@kerchmcc)
  62. 62. 62Kerch McConlogue (@kerchmcc)
  63. 63. 63 Using columns Kerch McConlogue (@kerchmcc)
  64. 64. 64 Widgets can be added right into content Kerch McConlogue (@kerchmcc)
  65. 65. 65 Undo and redo Kerch McConlogue (@kerchmcc)
  66. 66. 66Kerch McConlogue (@kerchmcc) Info about this page or post
  67. 67. 67 And Thanks! http://bit.ly/2MsUoPf Kerch McConlogue @kerchmcc Kerch@WeFixBrokenWebsites.com

×