Skip to content

Instantly share code, notes, and snippets.

@CreativeDive
Created June 21, 2022 11:55
Show Gist options
  • Save CreativeDive/6c2ca643cd852d89bedf2cbc9828d2da to your computer and use it in GitHub Desktop.
Save CreativeDive/6c2ca643cd852d89bedf2cbc9828d2da to your computer and use it in GitHub Desktop.
Possible solution to use the block.json way with ACF
<?php
/* DEFINE ACF BLOCKS */
if ( ! function_exists( 'my_acf_block_types' ) ) :
function my_acf_block_types() {
$color = '#2271b1';
$block_types = array(
/*
'block_name' => array(
'assets' => array(
'editorScript' => '',
'script' => '',
'viewScript' => '',
'editorStyle' => '',
'style' => ','
),
'icon' => '',
),
*/
/*
* MY ACF BLOCK
*/
'my-acf-block-name' => array(
'assets' => array(
'script' => 'my-acf-block-script.js',
'style' => 'my-acf-block-style.css',
'editorStyle' => 'my-acf-block-editor-style.css',
),
'icon' => svg_icon( 'my-icon', $color ),
),
);
return $block_types;
}
endif;
/* REGISTER ACF BLOCKS + ASSETS */
if ( ! function_exists( 'register_my_acf_block_types' ) ) :
function register_my_acf_block_types() {
$block_types = my_acf_block_types();
foreach( $block_types as $block_name => $meta ) {
/*
* Register ACF block via block.json
*/
register_block_type( 'path_to_block/' . $block_name . '/block.json' );
/*
* Add ACF block assets
*/
$script = isset( $meta['assets']['script'] ) && $meta['assets']['script'] ? $meta['assets']['script'] : '';
$style = isset( $meta['assets']['style'] ) && $meta['assets']['style'] ? $meta['assets']['style'] : '';
$editorStyle = isset( $meta['assets']['editorStyle'] ) && $meta['assets']['editorStyle'] ? $meta['assets']['editorStyle'] : '';
if( $script ) {
wp_register_script(
generate_block_asset_handle( 'acf/' . $block_name, 'script' ), 'path_to_block/' . $block_name . '/' . $script, array('jquery'), false, true
);
}
if( $style ) {
wp_register_style(
generate_block_asset_handle( 'acf/' . $block_name, 'style' ), 'path_to_block/' . $block_name . '/' . $style
);
}
if( $editorStyle ) {
wp_register_style(
generate_block_asset_handle( 'acf/' . $block_name, 'editorStyle' ), 'path_to_block/' . $block_name . '/' . $editorStyle
);
}
}
}
endif;
add_action('init', 'register_my_acf_block_types');
/* CHANGE ACF BLOCKS META DATA */
if ( ! function_exists( 'my_acf_block_type_metadata' ) ) :
function my_acf_block_type_metadata( $metadata ) {
$acf_block_meta = my_acf_block_types();
$block_name = isset( $metadata['name'] ) ? $metadata['name'] : '';
foreach( $acf_block_meta as $acf_block_name => $meta ) {
$icon = isset( $meta['icon'] ) && $meta['icon'] ? $meta['icon'] : '';
$script = isset( $meta['assets']['script'] ) && $meta['assets']['script'] ? $meta['assets']['script'] : '';
$style = isset( $meta['assets']['style'] ) && $meta['assets']['style'] ? $meta['assets']['style'] : '';
$editorStyle = isset( $meta['assets']['editorStyle'] ) && $meta['assets']['editorStyle'] ? $meta['assets']['editorStyle'] : '';
if( $block_name === 'acf/' . $acf_block_name ) {
if( $icon ) {
$metadata['icon'] = $meta['icon'];
}
if( $script ) {
$metadata['script'] = generate_block_asset_handle( $block_name, 'script' );
}
if( $style ) {
//$metadata['style'] = generate_block_asset_handle( $block_name, 'style' );
$metadata['style'] = 'file:./' . $style ;
}
if( $editorStyle ) {
$metadata['editorStyle'] = generate_block_asset_handle( $block_name, 'editorStyle' );
//$metadata['editorStyle'] = 'file:./' . $editorStyle ;
}
}
}
return $metadata;
}
endif;
add_filter( 'block_type_metadata', 'my_acf_block_type_metadata' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment