This is a curated post with all the awesome tips for by Zac Gordon.
@zgordon
Tip 1
Use &;enqueue_block_editor_assets&x27; to hook your custom block&x27;s JavaScript into Gutenberg
Gutenberg Development ~ Beginner's Tip of the Day ๐ค:
— Zac Gordon (@zgordon) December 6, 2017
Use 'enqueue_block_editor_assets' to hook your custom block's JavaScript into Gutenberg#WordPress #Deeply pic.twitter.com/6SAvLjJwzH
Tip 2
wp.element is the WordPress abstraction layer on top of React and ReactDOM
Gutenberg Development ~ Beginner's Tip of the Day ๐ค:
— Zac Gordon (@zgordon) December 7, 2017
wp.element is the WordPress abstraction layer on top of React and ReactDOM#WordPress #Deeply https://t.co/BKqq0gHX2L pic.twitter.com/gkdjb3P1Pc
Tip 3
wp.i18n is the client side library for localization in WordPress, make it a dependency in your block JS files as &x27;wp-i18n&x27; – https://buff.ly/2zQBQ1vย
Gutenberg Development ~ Beginner's Tip of the Day #3 ๐ค:
— Zac Gordon (@zgordon) December 8, 2017
wp.i18n is the client side library for localization in WordPress, make it a dependency in your block JS files as 'wp-i18n' – https://t.co/VFVQsd4b2r#WordPress #Gutenberg #Deeply pic.twitter.com/9wpZwhph1A
Tip 4
You can use default WordPress Dashicons as Block Icons. You can also use custom SVG Icons ๐ Here is a tutorial how => https://buff.ly/2BSlA1sย
Gutenberg Development ~ Beginner's Tip of the Day #4 ๐ค:
— Zac Gordon (@zgordon) December 11, 2017
You can use default WordPress Dashicons as Block Icons. You can also use custom SVG Icons ๐ Here is a tutorial how => https://t.co/xsQzAahrxF#WordPress #Gutenberg #Deeply pic.twitter.com/qrmZdOzK7A
Tip 5
/blocks/library is where all of the default Gutenberg Blocks live. Check out how they are built – https://buff.ly/2BSAVPzย
Gutenberg Development ~ Beginner's Tip of the Day #5 ๐ค:
— Zac Gordon (@zgordon) December 12, 2017
/blocks/library is where all of the default Gutenberg Blocks live. Check out how they are built – https://t.co/tsYb2BoLVC#WordPress #Gutenberg #Deeply pic.twitter.com/kq6h8T1qWl
Tip 6
Use the &x27;keyword&x27; setting to have your Block show up for keywords not found in the name of the block. Here is a tutorial showing how => https://buff.ly/2BdM4gPย
Gutenberg Development ~ Beginner's Tip of the Day #6 ๐ค:
— Zac Gordon (@zgordon) December 13, 2017
Use the 'keyword' setting to have your Block show up for keywords not found in the name of the block. Here is a tutorial showing how => https://t.co/2WOkAAyevK#WordPress #Gutenberg #Deeply pic.twitter.com/eerpacEqxp
Tip 7
Read this article from Core Gutenberg Developer @riadbenguella – "One thousand and one way to extend Gutenberg today" โ https://buff.ly/2BiVEPEย
Gutenberg Development ~ Beginner's Tip of the Day #7 ๐ค:
— Zac Gordon (@zgordon) December 14, 2017
Read this article from Core Gutenberg Developer @riadbenguella – "One thousand and one way to extend Gutenberg today" โ https://t.co/SLVQV5WObc#WordPress #Gutenberg #Deeply pic.twitter.com/JgLl1dbVUl
Tip 8
In case you haven&x27;t explored it yet, the Gutenberg Developer Handbook is pretty helpful – https://buff.ly/2BBK1Dzย
Gutenberg Development ~ Beginner's Tip of the Day #8 ๐ค:
— Zac Gordon (@zgordon) December 15, 2017
In case you haven't explored it yet, the Gutenberg Developer Handbook is pretty helpful – https://t.co/Yyr7vgTYuj#WordPress #Gutenberg #Deeply pic.twitter.com/4TUbYRCL4p
Tip 9
Did you know there is a "Gutenberg Theme" in development you can checkout? twentyeighteen? https://buff.ly/2nSbfQqย
Gutenberg Development ~ Beginner's Tip of the Day #9 ๐ค:
— Zac Gordon (@zgordon) December 18, 2017
Did you know there is a "Gutenberg Theme" in development you can checkout? twentyeighteen?
https://t.co/K5E1QWUnem#WordPress #Gutenberg #Deeply pic.twitter.com/hJcXnTn9IS
Tip # 10
Did you know there is a @wpcli command for scaffolding blocks? https://buff.ly/2Cy19Xmย
Gutenberg Development ~ Beginner's Tip of the Day #10 ๐ค:
— Zac Gordon (@zgordon) December 19, 2017
Did you know there is a @wpcli command for scaffolding blocks? https://t.co/yRg0mOG2dt#WordPress #Gutenberg #Deeply pic.twitter.com/r62NDneF3B
Tip 11
To use JSX in your blocks, simply add the &x27;transform-react-jsx&x27; plugin like done in the Gutenberg Core .babelrc file – https://buff.ly/2CY76Ogย
Gutenberg Development ~ Beginner's Tip of the Day #11 ๐ค:
— Zac Gordon (@zgordon) December 20, 2017
To use JSX in your blocks, simply add the 'transform-react-jsx' plugin like done in the Gutenberg Core .babelrc file – https://t.co/s27KdRe0M0#WordPress #Gutenberg #Deeply pic.twitter.com/TZLIwFKrZG
Tip 12
There is an interesting discussion on how plugins should handle fallback to the Classic Editor. If you&x27;re a plugin dev, you should check it out – https://buff.ly/2D4xUwhย
Gutenberg Development ~ Beginner's Tip of the Day #12 ๐ค:
— Zac Gordon (@zgordon) December 21, 2017
There is an interesting discussion on how plugins should handle fallback to the Classic Editor. If you're a plugin dev, you should check it out – https://t.co/4zr8ACW65s#WordPress #Gutenberg #Deeply pic.twitter.com/PKCSaz1nQ0
Tip 13
There are categories of blocks you can choose from when creating a custom blocks: common, formatting, layout, widgets & embed https://buff.ly/2p9AY7tย
Gutenberg Development ~ Beginner's Tip of the Day #13 ๐ค:
— Zac Gordon (@zgordon) December 22, 2017
There are 5 categories of blocks you can choose from when creating a custom blocks: common, formatting, layout, widgets & embed https://t.co/kgYI3j2jFw#WordPress #Gutenberg #Deeply pic.twitter.com/neix7rOLET
Tip 14
Ever use the Gutenberg Demo when you install the plugin? Checkout the simple JS file that loads the block content. See GB comment attributes in work. https://buff.ly/2BQ88eZย
Gutenberg Development ~ Beginner's Tip of the Day #14 ๐ค:
— Zac Gordon (@zgordon) December 25, 2017
Ever use the Gutenberg Demo when you install the plugin? Checkout the simple JS file that loads the block content. See GB comment attributes in work. https://t.co/fnEp7IIVcd#WordPress #Gutenberg #Deeply pic.twitter.com/ytmUGJdYtX
Tip 15
How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes https://buff.ly/2DMDlQSย
Gutenberg Development ~ Beginner's Tip of the Day #15 ๐ค:
— Zac Gordon (@zgordon) December 26, 2017
How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes https://t.co/G3jl227on1#WordPress #Gutenberg #Deeply pic.twitter.com/zwZvJz6AgA
Tip 16
If you find yourself starting to or wanting to rebuild Core blocks… It&x27;s possibly time to switch to a template or reusable blocks approach.
Gutenberg Development ~ Beginner's Tip of the Day #16 ๐ค:
— Zac Gordon (@zgordon) December 27, 2017
If you find yourself starting to or wanting to rebuild Core blocks… It's possibly time to switch to a template or reusable blocks approach.#WordPress #Gutenberg #Deeply
Tip 17
registerBlockType() is at the heart of building custom blocks.

Here&x27;s how it works https://buff.ly/2lkIAicย
Gutenberg Development ~ Beginner's Tip of the Day #17 ๐ค:
— Zac Gordon (@zgordon) December 28, 2017
registerBlockType() is at the heart of building custom blocks. ๐ Here's how it works https://t.co/DH0LLorxkR#WordPress #Gutenberg #Deeply pic.twitter.com/2rfoPoq34s
Tip 18
In general, custom blocks belong in plugins, not themes. Themes can style and integrate to an extent with blocks though! IMHO
Gutenberg Development ~ Beginner's Tip of the Day #18 ๐ค:
— Zac Gordon (@zgordon) December 29, 2017
In general, custom blocks belong in plugins, not themes. Themes can style and integrate to an extent with blocks though! IMHO#WordPress #Gutenberg #Deeply pic.twitter.com/iNAYlLDbW9
Tip 19
Use this helpful online tool to convert any SVG into valid JSX that can be copied and pasted as the icon for your custom block https://buff.ly/2pVPD6Fย
Gutenberg Development ~ Beginner's Tip of the Day #19 ๐ค:
— Zac Gordon (@zgordon) January 1, 2018
Use this helpful online tool to convert any SVG into valid JSX that can be copied and pasted as the icon for your custom block https://t.co/rj689I6Zq2#WordPress #Gutenberg #Deeply pic.twitter.com/czlXV4fVqx
Tip 20
Yes. You do actually need to know some React to work with Gutenberg. Or at least you will learn some React in learning Gutenberg ๐ #thisisagoodthing
Gutenberg Development ~ Beginner's Tip of the Day #20 ๐ค:
— Zac Gordon (@zgordon) January 2, 2018
Yes. You do actually need to know some React to work with Gutenberg. Or at least you will learn some React in learning Gutenberg ๐ #thisisagoodthing#WordPress #Gutenberg #Deeply
Tip 21
Want to customize the color palette for blocks and make them match the color scheme for your theme? It&x27;s just a few lines of PHP ๐ Here&x27;s how – https://buff.ly/2Cq6Pnjย
Gutenberg Development ~ Beginner's Tip of the Day #21 ๐ค:
— Zac Gordon (@zgordon) January 3, 2018
Want to customize the color palette for blocks and make them match the color scheme for your theme? It's just a few lines of PHP ๐ Here's how – https://t.co/f2jupdNYOF#WordPress #Gutenberg #Deeply pic.twitter.com/M5DmIdufde
Tip 22
The component in Gutenberg is an easy way to add accessibility and slickness to your custom block controls. ? ? Learn how to use it in your blocks – https://buff.ly/2CALuYu
Gutenberg Development ~ Beginner's Tip of the Day #22 ๐ค:
— Zac Gordon (@zgordon) January 4, 2018
The <Tooltip> component in Gutenberg is an easy way to add accessibility and slickness to your custom block controls. ๐ ๐ Learn how to use it in your blocks – https://t.co/W8BwG7jv1W#WordPress #Gutenberg #Deeply pic.twitter.com/WFlDbXi0PX
Tip 23
Block Templates let you assign default blocks to posts, pages or custom post types. You can even lock them down. ? Here&x27;s how they work https://buff.ly/2F3G8Ga
Gutenberg Development ~ Beginner's Tip of the Day #23 ๐ค:
— Zac Gordon (@zgordon) January 5, 2018
Block Templates let you assign default blocks to posts, pages or custom post types. You can even lock them down. ๐ Here's how they work https://t.co/YIVMZVOQ6w#WordPress #Gutenberg #Deeply pic.twitter.com/ceGpqwfs2B
Tip 24
As it will roll out at first, Gutenberg is not a replacement for rich front end site or page builder plugins. It is a greatly enhanced editing experience, but not a replacement.. yet.
Gutenberg Development ~ Beginner's Tip of the Day #24 ๐ค:
— Zac Gordon (@zgordon) January 8, 2018
As it will roll out at first, Gutenberg is not a replacement for rich front end site or page builder plugins. It is a greatly enhanced editing experience, but not a replacement.. yet. #WordPress #Gutenberg #Deeply
Tip 25
You will likely use wp.i18n.__() all over the place in your block code to make your block UI text available for translation. ? ? It&x27;s simple, here&x27;s how! https://buff.ly/2CJ6Vpr
Gutenberg Development ~ Beginner's Tip of the Day #25 ๐ค:
— Zac Gordon (@zgordon) January 9, 2018
You will likely use wp.i18n.__() all over the place in your block code to make your block UI text available for translation. ๐ ๐ It's simple, here's how! https://t.co/LdmNb2fgp6#WordPress #Gutenberg #Deeply pic.twitter.com/cUBWl8Nlf2
Tip 26
Using JSX to create your block UIs can save you time and provide cleaner, more readable code. ? ? Read this Official Guide to Get Up and Running https://buff.ly/2CNSssr
Gutenberg Development ~ Beginner's Tip of the Day #26 ๐ค:
— Zac Gordon (@zgordon) January 10, 2018
Using JSX to create your block UIs can save you time and provide cleaner, more readable code. ๐ ๐ Read this Official Guide to Get Up and Running https://t.co/bdg3DSRfix #WordPress #Gutenberg #Deeply pic.twitter.com/6UWDtFat4K
Tip 27
Gutenberg has a few addthemesupport() options for Theme Developers.? ? Check out the reference for these in the Gutenberg Handbook here – https://buff.ly/2miv1Ay
Gutenberg Development ~ Beginner's Tip of the Day #27 ๐ค:
— Zac Gordon (@zgordon) January 11, 2018
Gutenberg has a few add_theme_support() options for Theme Developers.๐จ ๐ Check out the reference for these in the Gutenberg Handbook here – https://t.co/FNQEUUBok6#WordPress #Gutenberg #Deeply pic.twitter.com/WCsbmJ6xYA
Tip 28
For API requests w/out React inside Gutenberg, try wp.apiRequest() – https://buff.ly/2Dq0fhc
OR, if you&x27;re using React, try withAPIData() in your component ? – https://buff.ly/2DqSAPQ
Gutenberg Development ~ Beginner's Tip of the Day #28 ๐ค:
— Zac Gordon (@zgordon) January 12, 2018
For API requests w/out React inside Gutenberg, try wp.apiRequest() – https://t.co/a8uoSjHMDE
OR, if you're using React, try withAPIData() in your component ๐ – https://t.co/3BR5ziqHfS#WordPress #Gutenberg #Deeply pic.twitter.com/3m31Aad9Q7
Tip 29
The optional "description" setting for registerBlockType will let you set a translatable description for your block. https://buff.ly/2DGAjhpย
Gutenberg Development ~ Beginner's Tip of the Day #29 ๐ค:
— Zac Gordon (@zgordon) January 17, 2018
The optional "description" setting for registerBlockType will let you set a translatable description for your block. https://t.co/LZEZU8RpYC#WordPress #Gutenberg #Deeply pic.twitter.com/RK3tCOkZ0k
Tip 30
Whoot whoot! Documentation for Block Templates is up on the GB Handbook! Theme devs ~ you&x27;re gonna love these ๐ https://buff.ly/2mDDtdNย
Gutenberg Development ~ Beginner's Tip of the Day #30 ๐ค:
— Zac Gordon (@zgordon) January 17, 2018
Whoot whoot! Documentation for Block Templates is up on the GB Handbook! Theme devs ~ you're gonna love these ๐ https://t.co/WYWriXX8a2#WordPress #Gutenberg #Deeply pic.twitter.com/l5eQAVaTQn
Tip 31
If you want to interact with meta boxes, plugin options or other database data, a good convention is custom API end points and JS api calls from your blocks. ?
Gutenberg Development ~ Beginner's Tip of the Day #31 ๐ค:
— Zac Gordon (@zgordon) January 18, 2018
If you want to interact with meta boxes, plugin options or other database data, a good convention is custom API end points and JS api calls from your blocks. ๐#WordPress #Gutenberg #Deeply
If you like these tips, make sure to checkout his Gutenberg Course.
