Created
June 21, 2022 11:55
-
-
Save CreativeDive/6c2ca643cd852d89bedf2cbc9828d2da to your computer and use it in GitHub Desktop.
Possible solution to use the block.json way with ACF
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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