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