This tutorial will introduce you to Faust’s block support example project. It contains a fundamental demonstration of the blockset command, as well as the minimum requirements to use blocks with Faust. You can use this project for basing your future projects and as a good reference site.

This guide assumes you are comfortable with the command line, have a foundational knowledge of Faust and WordPress blocks, and understand the basics of JavaScript, WordPress and Bash. If you have not already explored creating a custom block in Faust, please see this guide for more information before moving on.

How to Get the Example Working Locally

.env.local File Set Up

Copy the example’s .env.local.sample file, ensuring you rename the file .env.local.

You’ll see an example NEXT_PUBLIC_WORDPRESS_URL in this file. Set this to your WordPress site’s URL.

Set your FAUST_SECRET_KEY. For more information on where to find this secret key, refer back to this example.

Install and Build

After running install and build from the project’s folder, faustjs/examples/next/block-support, enter the following into your command line:

npm run dev -w @faustwp/block-support-example

The Example Project File Structure

This example contains two sample blocks, block-a and block-b. The user can put their own block in the wp-blocks folder alongside these examples. This would result in the block being rendered in the editor and on the site.

Let’s first examine the folder containing Block A.

If you have followed the Faust “create a custom block” tutorial, you will notice that this block contains the same elements. For a refresher on block anatomy in general, see the developer resources page here, describing the anatomy of a block.

Building Blocks with the Blockset Command

The package.json file in block-support has a script that will facilitate building the blocks using WordPress build scripts and sending them to WordPress. This script is called blockset.

NOTE: you need the wordpress scripts dependency in order to run the blockset command.

Run this script, npm run blockset -w @faustwp/block-support-example. All blocks contained in the wp-blocks folder (for this example, block-a and block-b), will be generated in the wp-content folder of the project. They will contain a manifest with timestamps of when the blocks are created. The image below shows our example blocks as objects in a blocks array in the manifest.json file.

After running this command, these blocks will now be available in the editor: