Create ACF Block JSON (create-acf-block-json) is a quick utility to scaffold an ACF block for WordPress Gutenberg using the new block.json format
Quickly create a new WordPress Block that uses Advanced Custom Fields (ACF) and utilises block.json and block-specific CSS and PHP files.
If you use ACF and make Gutenberg blocks, this simple utility should save you time scaffolding custom blocks.
Install globally via npm:
npm install --global create-acf-block-json
then navigate to where you want your block to be (i.e. /theme/blocks/), and run:
$ create-acf-block-json
Create ACF Block JSON is an npm package command line program that will create a new folder in your current directory containing scaffolding for a new WordPress block using Advanced Custom Fields.
It will generate:
The script handles generating a unique class (.wp-block-namespace-name) for your block which is then referenced in each file.
This script doesn't handle registration of the block - we recommend directory scanning methods to auto load blocks without registering each one. This method is outlined by Bill Erickson, but there are other examples online. This blog post by ACF also talks about how to register an ACF block, follow this guide. FYI, many guides are out of date, make sure you use guides released after 28th September 2022 (when ACF 6.0 was released) which will properly use block.json. If you want a very quick bit of PHP to register your new block, you can use this:
/**
* Load My Create ACF Block JSON Blocks
*/
function thetwopct_load_acf_blocks() {
register_block_type( get_template_directory() . '/blocks/my-acf-block/block.json' );
// register_block_type( get_template_directory() . '/blocks/another-block/block.json' );
}
add_action( 'init', 'thetwopct_load_acf_blocks' );
When you run create-acf-block-json
you are asked a few questions before your block is created:
acf
)star-filled
). Note, when copying the name of the Dashicon you must remove the prefix dashicons-
, for example: dashicons-smiley
should be written as smiley
.The script will then generate all required files. From there, you can edit, delete, remove the files as you wish.
npm install -g create-acf-block-json
create-acf-block-json
and follow prompts.To update to the latest version you can just run the install command again - npm install -g create-acf-block-json
Please open an issue in the GitHub repo. Thanks.