All Access Club

31 Tips for Gutenberg Development by Zac Gordon

Table of Content

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

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 &x27;wp-i18n&x27; – 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 &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 

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&x27;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 # 10

Did you know there is a @wpcli command for scaffolding blocks? https://buff.ly/2Cy19Xm 

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 

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 

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 

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&x27;s possibly time to switch to a template or reusable blocks approach.

Tip 17

registerBlockType() is at the heart of building custom blocks.

?

Here&x27;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&x27;s just a few lines of PHP 🙂 Here&x27;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&x27;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&x27;s simple, here&x27;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&x27;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&x27;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.

Gutenberg Development Course
Gutenberg Development Course by Zac

💌

Unlock Exclusive Perks: Join Our VIP Subscriber Club Today!

Subscribe for special promotions, offers, freebies, and the latest updates and news – all exclusively for our VIPs. Don’t miss out, join now! 🌟💌🎁

We won’t send you spam, we promise.

Join the All Access Club

Your All-Inclusive Pass to Premium WordPress Products.

Join Now – $39 only

Latest Blocks

Query Taxonomy Filters Block


Off Canvas


Show More Content


Custom Cursor

Browse All Products