GutenbergHub
Published in

GutenbergHub

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 # 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 ‘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.

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.