create-acf-block CLI
A command line tool for stubbing out new blocks with Advanced Custom Fields
<?php
/**
* Block Name: Hero
* Description: Displays a full width hero image with text overlay
*/
// $data is what we're going to expose to our render template
$data = array(
'example_field' => get_field( 'example_field' ),
'another_field' => get_field( 'another_field' )
);
// Dynamic block ID
$block_id = 'hero-' . $block['id'];
// Check if a custom ID is set in the block editor
if( !empty($block['anchor']) ) {
$block_id = $block['anchor'];
}
// Block classes
$class_name = 'hero-block';
if( !empty($block['class_name']) ) {
$class_name .= ' ' . $block['className'];
}
/**
* Pass the block data into the template part
*/
get_template_part(
'theme/blocks/hero/render',
null,
array(
'block' => $block,
'is_preview' => $is_preview,
'post_id' => $post_id,
'data' => $data,
'class_name' => $class_name,
'block_id' => $block_id,
)
);
{
"name": "hero",
"title": "Hero",
"description": "Displays a full width hero image with text overlay",
"category": "theme",
"apiVersion": 2,
"acf": {
"mode": "preview",
"renderTemplate": "theme/blocks/hero/block.php"
},
"supports": {
"anchor": true,
"jsx": true
}
}
<?php
/**
* Block Name: Hero
* Description: Displays a full width hero image with text overlay
*/
// The block attributes
$block = $args['block'];
// The block data
$data = $args['data'];
// The block ID
$block_id = $args['block_id'];
// The block class names
$class_name = $args['class_name'];
$template = array(
array('core/heading', array(
'level' => 2,
'content' => 'This is a default heading',
)),
array( 'core/paragraph', array(
'content' => 'This is placeholder paragraph text.',
) )
);
$allowed_blocks = array( 'core/heading', 'core/paragraph', 'core/image' );
?>
<div id="<?php echo $block_id; ?>" class="<?php echo $className; ?>">
<InnerBlocks
template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>"
allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowed_blocks ) ); ?>"/>
</div>
<?php
function create_acf_block_cli_register_blocks() {
// ACF Block Registration
$blocks=array();
foreach ($blocks as $block) {
register_block_type( get_template_directory() . '/blocks/' . $block );
}
}
add_action( 'init', 'create_acf_block_cli_register_blocks' );
The create-acf-block
CLI is a composer package.
composer global require joeyfarruggio/create-acf-block
If it’s your first time installing a global Composer package, ensure that the global Composer binaries directory is in your system’s PATH. This will allow you to run the create-acf-block
command globally.
To find out the path to your global composer binaries:
composer global config bin-dir --absolute
The command above will output a path. You need to add this path to your system’s PATH. Below are instructions based on your operating system:
For most folks, your global composer binaries are in ~/.composer/vendor/bin
. If that’s the case for you, add it to your .bashrc
, .bash_profile
, or .zshrc
file:
export PATH=~/.composer/vendor/bin:$PATH
(Disclaimer: I don’t use Windows, so I had GPT write this section)
After installation, you can utilize the CLI tool globally:
create-acf-block
Follow the on-screen prompts to create your ACF block.
The first tme you run the command you will be see a series of config prompts. If you ever need to reset these you can run create-acf-block set-config
.
Join over 130 other devs for free
I've been building with WordPress for almost 10 years. I create tools for developers serve clients as an contract web developer.