Published in


31 Tips for Gutenberg Development by Zac Gordon

This is a curated post with all the 31 awesome tips for #Gutenberg by Zac Gordon.


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

Tip #4

You can use default WordPress Dashicons as Block Icons. You can also use custom SVG Icons :) Here is a tutorial how =>

Tip #5

/blocks/library is where all of the default Gutenberg Blocks live. Check out how they are built —

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

Tip #7

Read this article from Core Gutenberg Developer @riadbenguella — “One thousand and one way to extend Gutenberg today” —

Tip #8

In case you haven’t explored it yet, the Gutenberg Developer Handbook is pretty helpful —

Tip #9

Did you know there is a “Gutenberg Theme” in development you can checkout? twentyeighteen?

Tip # 10

Did you know there is a @wpcli command for scaffolding blocks?

Tip #11

To use JSX in your blocks, simply add the ‘transform-react-jsx’ plugin like done in the Gutenberg Core .babelrc file —

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 —

Tip #13

There are 5 categories of blocks you can choose from when creating a custom blocks: common, formatting, layout, widgets & embed

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.

Tip #15

How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes

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

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

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 —

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 —

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

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!

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

Tip #27

Gutenberg has a few addthemesupport() options for Theme Developers.🎨 📖 Check out the reference for these in the Gutenberg Handbook here —

Tip #28

For API requests w/out React inside Gutenberg, try wp.apiRequest() —

OR, if you’re using React, try withAPIData() in your component 👍 —

Tip #29

The optional “description” setting for registerBlockType will let you set a translatable description for your block.

Tip #30

Whoot whoot! Documentation for Block Templates is up on the GB Handbook! Theme devs ~ you’re gonna love these :)

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

Originally published at Gutenberg Hub.




Best Gutenberg resources curated in one place just for you.

Recommended from Medium

Javascript & the DOM: Part 2

Diaries of a Coding Kid. Day 11

Functions in Javascript

Time Travel Debugging in Svelte with DeLorean

Switch between project build variants (staging, production, etc) in React Native — part 1

A New Way to Write Vuex Module

Loops Loops Loops

How to use Redux on highly scalable javascript applications?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Munir Kamal

Munir Kamal

Web Developer & Business Strategist. Some things i’m working on @Ingeniouswebs @cakewp @GutenbergHub. Also a happy father 😎

More from Medium

Grammarly vs ProwritingAid: Which One is Superior in 2022? — Sem Seo Blog

How To Start An Online Business Free

Quest Started: Build a Landing Page

One way to make money from music artists around you is Lyrics Distribution.