🧱 Gutenberg Blocks

Defining a block

How to create a new block type

Create a new block file, for example blocks/layout/section.tsx

Copy and paste the code below, making sure to:

  • Replace the TITLE and DESCRIPTION
  • Replace NAME with the filename of your block (eg. layouts/section)
  • Run yarn generate, so that TypeScript knows what prop types to expect for your new block, and will also validate the name.
/blocks/layouts/section.tsx
/**
 * Title: TITLE
 * Description: DESCRIPTION
 * Category: common
 * Icon: book-alt
 * Keywords: post
 * Types: page, post
 * Mode: preview
 * Supports multiple: true
 * Tags: root
 * Child tags: none
 */
import { defineBlock } from "eddev/blocks"

export default defineBlock("NAME", (props) => {
  return <div>Hello!</div>
})
💡

Make sure yarn dev is running! It'll auto-generate TypeScript types for block when you create it, and it'll continue to update those types if you're using a GraphQL for your block (which you probably are).

⚠️

If you get a red squiggly next to the block name in the defineBlock, it means you're either not running yarn dev, or you may be using the wrong name for the current file.