31 Tips for Gutenberg Development by Zac Gordon
This is a curated post with all the 31 awesome tips for #Gutenberg by Zac Gordon.
@zgordon
Tip #1
Use ‘enqueue_block_editor_assets’ to hook your custom block’s JavaScript into Gutenberg
Tip #2
wp.element is the WordPress abstraction layer on top of React and ReactDOM
Tip #3
wp.i18n is the client side library for localization in WordPress, make it a dependency in your block JS files as ‘wp-i18n’ — https://buff.ly/2zQBQ1v
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
Tip #5
/blocks/library is where all of the default Gutenberg Blocks live. Check out how they are built — https://buff.ly/2BSAVPz
Tip #6
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://buff.ly/2BdM4gP
Tip #7
Read this article from Core Gutenberg Developer @riadbenguella — “One thousand and one way to extend Gutenberg today” — https://buff.ly/2BiVEPE
Tip #8
In case you haven’t explored it yet, the Gutenberg Developer Handbook is pretty helpful — https://buff.ly/2BBK1Dz
Tip #9
Did you know there is a “Gutenberg Theme” in development you can checkout? twentyeighteen?
https://buff.ly/2nSbfQq
Tip #11
To use JSX in your blocks, simply add the ‘transform-react-jsx’ plugin like done in the Gutenberg Core .babelrc file — https://buff.ly/2CY76Og
Tip #12
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://buff.ly/2D4xUwh
Tip #13
There are 5 categories of blocks you can choose from when creating a custom blocks: common, formatting, layout, widgets & embed https://buff.ly/2p9AY7t
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
Tip #15
How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes https://buff.ly/2DMDlQS
Tip #16
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.
Tip #17
registerBlockType() is at the heart of building custom blocks.
Here’s how it works https://buff.ly/2lkIAic
Tip #18
In general, custom blocks belong in plugins, not themes. Themes can style and integrate to an extent with blocks though! IMHO
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
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
Tip #21
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://buff.ly/2Cq6Pnj
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
Tip #23
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://buff.ly/2F3G8Ga
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.
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’s simple, here’s how! https://buff.ly/2CJ6Vpr
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
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
Tip #28
For API requests w/out React inside Gutenberg, try wp.apiRequest() — https://buff.ly/2Dq0fhc
OR, if you’re using React, try withAPIData() in your component 👍 — https://buff.ly/2DqSAPQ
Tip #29
The optional “description” setting for registerBlockType will let you set a translatable description for your block. https://buff.ly/2DGAjhp
Tip #30
Whoot whoot! Documentation for Block Templates is up on the GB Handbook! Theme devs ~ you’re gonna love these :) https://buff.ly/2mDDtdN
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. 👍
If you like these tips, make sure to checkout his Gutenberg Course.
Originally published at Gutenberg Hub.
