WordCamp Pune Talk on Gutenberg

1. Introduction to Gutenberg
Imran Sayed
@imranhsayed

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. What was the need for Gutenberg?

4. Classic Editor
● Copy paste from Google docs into the classic
editor does not look the same way.

6. Classic Editor
● You don’t get what you see.

7. Aligning Multiple Images

8. Aligning text with Images

9. Classic Editor
● You don’t get what you see.
● Difficulty in aligning text with image.
● Problem with aligning multiple images.

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

12. “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

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

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

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

16. Design Reuse Edit
What are Blocks?

17. How blocks would improve user experience?

18. Copying Content

19. Media & Text

20. Align Multiple Images

21. Types Blocks

22. Technology?

23. REST API
● Data communication between the server and
JavaScript driven interface
● Create and update post.

24. Fixed layout
Focus on Content &
Design
Drag & drop
Standard Text Editing
Classic Editor Gutenberg Editor

25. Why use Gutenberg?
Ease of UseVisibilityReusability Saves
Time
Create Rich &
Engaging Content
REST API

26. Gutenberg Implementations

27. rtcamp.com

28. 360 Image Plugin - Kevin Bazira

29. ECWID Shopping Cart

30. Woocommerce Product Block

31. Third Party Libraries

32. Editor Blocks
● Editor Block is a unique collection of blocks for
Gutenberg
● https://editorblockswp.com/

33. Editor Blocks

34. Gutenberg Hub
● It has Gutenberg WordPress Editor blocks, resources
& tutorials
● https://gutenberghub.com/

35. Gutenberg Hub

36. Gutenberg Cloud
● You can create your block here.
● Share your code and publish your npm package
● https://gutenbergcloud.org/

37. Gutenberg Cloud

38. Gutenberg Block Toolkit
● A zero-configuration developer toolkit for building
WordPress Gutenberg block plugins.
● https://github.com/ahmadawais/create-guten-block

39. Gutenberg Block Toolkit - Ahmed Awais

40. How to create
a Custom
Block?

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

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

43. Blocks API: Registering a Block

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

46. Registered block on Dashboard

47. Contact Card block

48. Contact Card block

49. Future of Gutenberg
Widgets Blocks Customizer blocks Navigation blocks

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

51. Phase #3
● Collaboration
● Multi User editing of Gutenberg ( like the Word
Document )
● Workflows

52. Phase #4
● An official way for multilingual sites

53. Future of Gutenberg for Developers
● Learn JavaScript Deeply

54. Credits
● State of Word
● rtCamp
● WordCamp Pune

55. Imran Sayed
@imranhsayed
Thank you!
youtube.com/c/ImranSayedDev

56. Questions?