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.js
Code 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-npm
Code language: PHP (php)
Happy building! 🚀