blockset

Faust’s blockset command deploys Faust.js blocks to your backend WordPress site so they may be used in the Block Editor. This reference page lists the prerequisites and usage instructions for the blockset command.

Prerequisites

In order to use the blockset command, you will need the following.

Packages and Plugins

These NPM packages installed:

• @faustwp/cli
• @wordpress/scripts

These WordPress plugins installed and activated:

• Faust.js WordPress Plugin
• WPGraphQL
• WPGraphQL Content Blocks

A Created Block

Before syncing a block to your WordPress backend site, you must of course have a block created.

If you don’t have a block already created, you can 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

blockset Command Usage

The blockset command can be run by adding faust blockset to one or more of your package.json scripts, then running those scripts from the command line.

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

{
	"scripts": {
		"predev": "faust blockset", 
		"dev": "faust dev",
		"prebuild": "faust blockset", 
		"build": "faust build"
	},
	"devDependencies": {
		"@faustwp/cli": "^1.2.1",
		"@wordpress/scripts": "26.18.0"
	}
}

With that code in place, each time a developer runs npm run dev or npm run build, the blockset command will be executed, syncing the blocks within the wp-blocks folder to your WordPress backend.

Example App

To see a working example of an app that has been configured to use the blockset command, see our block-support example app, here:

https://github.com/wpengine/faustjs/tree/canary/examples/next/block-support

If you’d like, you can clone this example app and run it locally with this command:

npx create-next-app \
-e https://github.com/wpengine/faustjs/tree/canary \
--example-path examples/next/block-support \
--use-npm