Auto-register ACF field groups as blocks in the block editor.
ACF Auto Blocks includes a wp-cli command for creating new blocks:
wp autoblocks make_block foo-bar --name="Foo Bar" --icon="editor-code"
This will create a new directory in your theme named /acf-blocks/foo containing a block.json, group_block_foo.json, and template.php file. You can generate additional files using the CLI Hooks.
Once the block has been created, head to your admin and import the new field group to start adding fields to your block. You can edit the block.json based on the WordPress block metadata and ACF Block API v2. Once your fields are setup, start editing the template.php to output the field data.
<?php
// $foo = $data['foo']
extract( $data );
?>
<div class="block_foo">
<?php echo $foo; ?>
</div>Filters block directory. Must return path relative to site install. Defaults to {path-to-theme}/acf-blocks.
function my_autoblocks_directory( $dir ) {
// ...
return $dir;
}
add_filter( 'acf/auto_blocks/directory', 'my_autoblocks_directory', 10, 2 );Filters block options used for register_block_type.
function my_autoblocks_parse_block_options_v2( $options ) {
// ...
return $options;
}
add_filter( 'acf/auto_blocks/v2/parse_block_options', 'my_autoblocks_parse_block_options_v2', 10, 1 );Filters block options used for acf_register_block. (Deprecated)
function my_autoblocks_parse_block_options_v1( $options ) {
// ...
return $options;
}
add_filter( 'acf/auto_blocks/v2/parse_block_options', 'my_autoblocks_parse_block_options_v1', 10, 1 );Filters block field data.
function my_autoblocks_block_data( $data, $block ) {
// ...
return $data;
}
add_filter( 'acf/auto_blocks/block_data', 'my_autoblocks_block_data', 10, 2 );Filters block settings.
function my_autoblocks_block_settings( $settings ) {
// ...
return $settings;
}
add_filter( 'acf/auto_blocks/block_settings', 'my_autoblocks_block_settings', 10, 2 );Filters admin block preview.
function my_autoblocks_block_preview( $html, $block ) {
// ...
return $html;
}
add_filter( 'acf/auto_blocks/block_preview', 'my_autoblocks_block_preview', 10, 2 );Filters front-end block ouput.
function my_autoblocks_render_block( $html, $block ) {
// ...
return $html;
}
add_filter( 'acf/auto_blocks/render_block', 'my_autoblocks_render_block', 10, 2 );Filters block json file.
function my_autoblocks_cli_build_json( $json, $values = [] ) {
// ...
return $json;
}
add_filter( 'acf/auto_blocks/cli/build_json', 'my_autoblocks_cli_build_json', 10, 2 );Filters ACF field group json file.
function my_autoblocks_cli_build_field_group( $json, $values = [] ) {
// ...
return $json;
}
add_filter( 'acf/auto_blocks/cli/build_field_group', 'my_autoblocks_cli_build_field_group', 10, 2 );Filters template php file.
function my_autoblocks_cli_build_template( $php, $values = [] ) {
// ...
return $php;
}
add_filter( 'acf/auto_blocks/cli/build_template', 'my_autoblocks_cli_build_template', 10, 2 );Run after base block files have been created.
function my_autoblocks_cli_make_block( $args = [], $assoc_args = [], $values = [] ) {
// ...
}
add_action( 'acf/auto_blocks/cli/build_template', 'my_autoblocks_cli_make_block', 10, 3 );Note: $values will contain an associative array that can be used to find replace block specific values.
$values = [
'{key}' => $key_kebab,
'{key_kebab}' => $key_kebab,
'{key_snake}' => $key_snake,
'{dir}' => $dir,
'{name}' => $name,
'{icon}' => $icon,
];
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent