Skip To Main Content

How-to Register Decoupled Blocks

Faust.js enables you to develop your custom WordPress blocks from within your Next.js application, eliminating the need for a custom WordPress plugin! 🎉

Image by ChatGPT’s DALL-E, December 21, 2023


Front-end App

  • @faustwp/cli
  • @wordpress/scripts

WordPress Plugins


Use the official @wordpress/create-block package to scaffold out a new block inside a directory named wp-blocks within your Next.js app.

├── block-a
│   ├── block.json
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
└── index.jsCode language: CSS (css)

Blockset Command

Faust.js’ blockset command deploys blocks to WordPress at build time, syncing your latest changes with the publisher.

$ faust blockset

This example is utilizing npm pre-hooks to automatically execute the blockset process whenever npm run dev or npm run build are ran.

// package.json
  "scripts": {
    "predev": "faust blockset",
    "dev": "faust dev",
    "prebuild": "faust blockset",
    "build": "faust build",
  "devDependencies": {
    "@faustwp/cli": "^1.2.1",
    "@wordpress/scripts": "26.18.0",
}Code language: JSON / JSON with Comments (json)


The blockset command can be demonstrated within the block-support example app in the Faust.js GitHub repository.

npx create-next-app \
-e \
--example-path examples/next/block-support \
--use-npmCode language: PHP (php)

Example project source

Happy building! 🚀