Custom previews for ACF Gutenberg Blocks

There are a few different strategies for using an image file for the ‘preview’ in an ACF-created custom Gutenberg block but this one (so far) seems to be the most effective for me.

I added the following to where I register my ACF block:

'example'  => array(
     'attributes' => array(
	 'mode' => 'preview',
	 'data' => array(
	     '_is_preview'   => 'true'
	    )
	)
),

And utilize it by creating a conditional in the block markup template with:

<?php // Block preview
if( !empty( $block['data']['_is_preview'] ) ) { ?>
    <figure>
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/screencap-accordion.png" alt="Preview of what the Accordion custom block appears minimized">
    </figure>
<?php } else { ?>
    // Actual block content would go here.
<?php } ?>

Leave a Reply

Your email address will not be published. Required fields are marked *