How-to Register Decoupled Blocks

Faust.js™

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

Requirements

Front-end App

@faustwp/cli
@wordpress/scripts

WordPress Plugins

Usage

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

wp-blocks
├── 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)

Example

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

npx create-next-app \
-e https://github.com/wpengine/faustjs/tree/canary \
--example-path examples/next/block-support \
--use-npmCode language: PHP (php)

Example project source

Happy building! 🚀