This is a crash course I did for the WP SFO (WordPress SF) meetup group. A crash course in WordPress Gutenberg Project

1. 1
GutenWhat?
A WP Gutenberg
Crash Course
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

2. Senior Software Engineer at
The Walt Disney Company
My first install of WordPress
was 0.7 and been a user &
developer since
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
Who is this geek?

3. arcctrl.com
WHAT ARE WE GOING TO COVER?
•What is Gutenberg?
•What the terms I need to know?
•How do I use Gutenberg & A Demo
•An Intro to Gutenberg Development
•The basic architecture of a block
•Awesome Resources
•Q&A

4. arcctrl.com
WHAT IS GUTENBERG?
A new way to edit WordPress Content

5. arcctrl.com
WHEN IS GUTENBERG COMING?
as of this moment
WordPress v5.0.0 (tentatively April, 2018)

6. WHAT WE HAVE NOW

7. arcctrl.com
LOVED BY ALL

8. arcctrl.com
BORING

9. GUTENBERG

10. arcctrl.com
NEW HOTNESS

11. arcctrl.com
TERMINOLOGY YOU NEED TO KNOW
• Block - A Gutenberg block is basically a block of functionality that outputs to
the_content
• Gutenberg is used by building your content out with blocks
• Attributes -The data that you set that goes into a block. Ultimately stored as HTML
comment attributes
• The Gutes / Gutes - An affectionate term my friend made up to not have to
always type Gutenberg, also a greatTwitter handle for following along

12. arcctrl.com
HOW TO USE GUTENBERG

13. ADDING BLOCKS
Click the +
Search or find a block you want to insert
Blocks - custom content level items
Embeds - embedded content (likeYouTube)
Saved - previously saved blocks you can re-use

14. EXAMPLE: PARAGRAPH BLOCK
The Paragraph block allows you to add
paragraphs of content to your post.
Acts very similar to our current editor, powered
by sameTinyMCE (WYSIWYG editor)

15. EXAMPLE: IMAGE BLOCK
The image block allows you to easily
add images.
Upload from your computer or Add
from the Media Library
Similar to our current “Add Media”
button

16. YOU CAN STILL FLOAT

17. arcctrl.com
STOP

18. DEMO TIME

19. DEVELOPMENT OF CUSTOM BLOCKS
No, you don’t need to know React
No, you don’t need to be a JavaScript master ninja
No, you don’t need to be able to teleport
MYTHS DEBUNKED

20. BUT…
Knowing basic JavaScript is necessary to do it right
Learning React should be something on your radar
Knowing webpack, ESNext (ES6), and more will help make your code
better and more modular

21. WHAT YOU NEED TO KNOW
• How to enqueue for the block(s) - action enqueue_block_editor_assets
• wp.blocks.registerBlockType()
• Edit callback
• Save Callback
• el() ( wp.element.createElement() )
• attributes - this is where we use them

22. arcctrl.com
BASIC ARCHITECTURE OF A BLOCK
• JavaScript File
• Contains wp.blocks.registerBlockType()
• wp.blocks.registerBlockType( ‘block/name’, {attrs}, edit(){}, save(){} )
• PHP File
• Defines plugin (if a plugin)
• Enqueue’s JavaScript file

23. arcctrl.com
DEMO BLOCK CODE

24. arcctrl.com
IF WE HAVE TIME -
COMPONENT BLOCKS

25. arcctrl.com
ARE YOU WORRIED
ABOUT GUTENBERG?
IF SO, ABOUT WHAT?

26. Awesome Resources
WP Gutenberg Handbook
https://wordpress.org/gutenberg/handbook/
Gutenberg Courses
https://gutenberg.courses/
@TheGutes on Twitter
Zac Gordon
Joe Casabona
Josh Pollock
James Tryon

27. Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com