Blocks

First, indicate the directory to resolve block modules from:

roots.register.blocks('./')

Then, in your application you can create *.block.{js,ts} modules.

Each should export the required properties of the WordPress Block API. They should also export the block name (sometimes referred to as namespace in WordPress documentation).

Example

Using named exports:

export const name = `bud-project/example-block`
export const title = `Example block`
export const edit = () => <div><h1>Hello world!</h1></div>

Using a default export:

export default {
  name: `bud-project/example-block`,
  title: `Example block`,
  edit: () => <div><h1>Hello world!</h1></div>,
}

Example​

Example