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.

Introduction to Gutenberg- Imran Sayed

698 views

Published on

WordCamp Pune Talk on Gutenberg

  • Be the first to comment

  • Be the first to like this

Introduction to Gutenberg- Imran Sayed

  1. 1. Introduction to Gutenberg Imran Sayed @imranhsayed
  2. 2. What is Gutenberg? ● New way of editing in WordPress ● “Gutenberg” is the name of the project to create a new editor experience for WordPress. ● It is also called “Block Editor” ● Gutenberg is the next generation editing interface for WordPress. Conceptually, its is a block-based editor. Every content element (e.g. heading, paragraph, or YouTube embed) is a block. The collection of blocks makes up the content on the page.
  3. 3. What was the need for Gutenberg?
  4. 4. Classic Editor ● Copy paste from Google docs into the classic editor does not look the same way.
  5. 5. Classic Editor ● You don’t get what you see.
  6. 6. Aligning Multiple Images
  7. 7. Aligning text with Images
  8. 8. Classic Editor ● You don’t get what you see. ● Difficulty in aligning text with image. ● Problem with aligning multiple images.
  9. 9. Need for new editor ● An editor which is simple and easy to use. ● Where we don’t have to struggle when organizing our content ● Where we can focus on our content.
  10. 10. “The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.” Matt Mullenweg, 2017 Goal of the new editor
  11. 11. Release of Gutenberg Plugin ● Gutenberg was first introduced as a plugin in 2017. ● It was purely javascript for a first few months and then turned into a plugin.
  12. 12. Phase #1 ● 1.2 million active installs ● 1.2 million posts written ● 8648 Commits from 340+ Contributors ● 277 WordCamp talks ● 555 meetup events ● 1000+ blog posts
  13. 13. Release of Gutenberg with WordPress ● Gutenberg with WordPress 5.0 on Dec 6th 2018. ● Default theme: Twenty Nineteen ● 70 Native blocks ● 100+ 3rd party blocks ● 1000+ Layout configuration
  14. 14. Design Reuse Edit What are Blocks?
  15. 15. How blocks would improve user experience?
  16. 16. Copying Content
  17. 17. Media & Text
  18. 18. Align Multiple Images
  19. 19. Types Blocks
  20. 20. Technology?
  21. 21. REST API ● Data communication between the server and JavaScript driven interface ● Create and update post.
  22. 22. Fixed layout Focus on Content & Design Drag & drop Standard Text Editing Classic Editor Gutenberg Editor
  23. 23. Why use Gutenberg? Ease of UseVisibilityReusability Saves Time Create Rich & Engaging Content REST API
  24. 24. Gutenberg Implementations
  25. 25. rtcamp.com
  26. 26. 360 Image Plugin - Kevin Bazira
  27. 27. ECWID Shopping Cart
  28. 28. Woocommerce Product Block
  29. 29. Third Party Libraries
  30. 30. Editor Blocks ● Editor Block is a unique collection of blocks for Gutenberg ● https://editorblockswp.com/
  31. 31. Editor Blocks
  32. 32. Gutenberg Hub ● It has Gutenberg WordPress Editor blocks, resources & tutorials ● https://gutenberghub.com/
  33. 33. Gutenberg Hub
  34. 34. Gutenberg Cloud ● You can create your block here. ● Share your code and publish your npm package ● https://gutenbergcloud.org/
  35. 35. Gutenberg Cloud
  36. 36. Gutenberg Block Toolkit ● A zero-configuration developer toolkit for building WordPress Gutenberg block plugins. ● https://github.com/ahmadawais/create-guten-block
  37. 37. Gutenberg Block Toolkit - Ahmed Awais
  38. 38. How to create a Custom Block?
  39. 39. Create your own Custom Blocks ● You can create your own blocks for customized content and you would have to learn just one API to do things and the user would have to learn just one way to insert content. ● A template can be created by defining a list of block items with predefined attributes, placeholder content. Block templates would allow you to specify a default initial state for an editor session.
  40. 40. Create your own Custom Blocks ● Gutenberg encourages us to create blocks instead of shortcodes and meta boxes, so the user can immediately see how the content would look on the front end.
  41. 41. Blocks API: Registering a Block
  42. 42. Registering your block script 1. Register your javascript block file. 1. Register your editor style for dashboard. 1. Register you front style for your block.
  43. 43. Registered block on Dashboard
  44. 44. Contact Card block
  45. 45. Contact Card block
  46. 46. Future of Gutenberg Widgets Blocks Customizer blocks Navigation blocks
  47. 47. Phase #2 ● Show the image for possible progression of widgets ( Anything you can put in your post, you can put it in your widget blocks as well ) ● Editing Menus Inline ( Taking everything that you can currently do in the menu and put that inside a block ) ● Thinking outside of post content ● Focus on customization ● Upgrading themes , widgets and menus
  48. 48. Phase #3 ● Collaboration ● Multi User editing of Gutenberg ( like the Word Document ) ● Workflows
  49. 49. Phase #4 ● An official way for multilingual sites
  50. 50. Future of Gutenberg for Developers ● Learn JavaScript Deeply
  51. 51. Credits ● State of Word ● rtCamp ● WordCamp Pune
  52. 52. Imran Sayed @imranhsayed Thank you! youtube.com/c/ImranSayedDev
  53. 53. Questions?

×