Reply To: ACF add preview image for custom blocks

• Garet

• August 27, 2024 at 12:47 pm

This is brilliant, it works like a charm with the backticks as RichCuer mentionned.

I edited a bit of the imageUrl const if you want to put the image in the same block folder:

const preimageUrl = wp.data.select('core/blocks').getBlockType("acf/" + blockName)?.attributes?.previewImage?.default;
//Not ideal to make two const, but you get the idea, the next line write the absolute URL with the theme folder as template
const imageUrl = passed_data.templateUrl+'/blocks/'+blockName+'/'+preimageUrl;

And in the functions.php:

function enqueue_admin_scripts_and_styles() {
	wp_enqueue_script('admin-scripts', get_template_directory_uri() . '/js/admin_custom.js', array('wp-blocks', 'wp-element', 'wp-hooks'), '', true);
//We use wp_localize_script to pass data
wp_localize_script( 'admin-scripts', 'passed_data', array( 'templateUrl' => get_stylesheet_directory_uri() ) );
}
add_action('admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles');

Then, you can add it to the block.json:

"previewImage": {
            "type": "string",
            "default": "preview.jpg"
        }