title: Show preview image for custom Gutenberg blocks
body: <p>I've created a batch of custom <code>ACF gutenberg</code> blocks and now trying to assign a preview image.</p>
  <p><strong>Issue: Getting the preview image to show</strong></p>
  <p>The below image here shows a <code>paragraph</code> component which is a default block.</p>
  <p><a href="https://i.stack.imgur.com/klkMJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/klkMJ.png" alt="enter image description here" /></a></p>
  <p>You can see on the right hand side, that the paragraph block has an image and description alongside it. Below is how my component is currently appearing (full code will be at the end)</p>
  <p><a href="https://i.stack.imgur.com/HSWKS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HSWKS.png" alt="enter image description here" /></a></p>
  <p>As you can see, it says &quot;no preview available&quot; and no description is added, even though I've defined both in the code.</p>
  <p>Approach:</p>
  <p><strong>acf-blocks/blocks.php</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  $img_root = "../../src/components";
  
  $hero = array(
      'name' =&gt; 'hero',
      'title' =&gt; __('Hero') ,
      'description' =&gt; __('Hero section') ,
      'render_callback' =&gt; 'block_render',
      'category' =&gt; 'formatting',
      'icon' =&gt; 'admin-comments',
      'image' =&gt; $img_root . '/hero/hero.png',
      'mode' =&gt; 'edit',
      'keywords' =&gt; array(
          'hero'
      ) ,
  );
  
  $blocks = [$hero];
  
  return $blocks;
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>acf-blocks/functions.php</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  function block_acf_init(){
    $path = get_template_directory().'/inc/acf-blocks/blocks.php';
    $blocks = require($path);
    foreach($blocks as $block) {
      acf_register_block_type($block);
    }
  }
  
  if( function_exists('acf_register_block_type') ) {
    add_action('acf/init', 'block_acf_init');
  }
  
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My folder structure is as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>theme
    inc
      acf-blocks
        blocks.php
        functions.php
    src
      components
        hero
          hero.js
          hero.scss
          hero.png</code></pre>
  </div>
  </div>
  </p>
  <p>Unsure why my preview image doesn't show?</p>
  <p>Edit:</p>
  <p>I've added the <code>block_render</code> function but still no success. Here is my current <code>functions.php</code> file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  $component_path = "../../src/components" . strtolower($block['title']) . strtolower($block['title']).".js";
  
  function block_render( $block, $content = '', $is_preview = false ) {
    $context = get_context();
      $context['block'] = $block; // store block values
      $context['fields'] = get_fields(); // store field values
      $context['is_preview'] = $is_preview;
      render($component_path, $context ); // render the block
  }
  
  function block_acf_init(){
    $path = get_template_directory().'/inc/acf-blocks/blocks.php';
    $blocks = require($path);
    foreach($blocks as $block) {
      acf_register_block_type($block);
    }
  }
  
  if( function_exists('acf_register_block_type') ) {
    add_action('acf/init', 'block_acf_init');
  }
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Edit 2:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  $hero = array(
      'name' =&gt; 'hero',
      'title' =&gt; __('Hero'),
      'description' =&gt; __('Add hero section'),
      'render_callback' =&gt; 'block_render',
      'category' =&gt; 'formatting',
      'icon' =&gt; 'admin-comments',
      'mode' =&gt; 'edit',
      'category' =&gt; 'custom',
      'post_types' =&gt; array(
          'page'
      ),
      'keywords' =&gt; array(
          'hero'
      ),
      'example' =&gt; array(
          'mode' =&gt; 'preview',
          'data' =&gt; array(
              'field' =&gt; 'value' // sample data
          )
      )
  );
  
  
  function block_render($block, $content = '', $is_preview = false)
  {
      if ($is_preview &amp;&amp; !empty($block['data'])) {
          echo '&lt;img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2IrSELemo2mRl4zVXzhjFyxtj3GTVZ8xo"&gt;';
          return;
      } elseif ($is_preview) {
          echo 'A Hero block using ACF';
          return;
      }
      
      echo 'A Hero block using ACF.';
  }
  
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Have even tried:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  function block_render( $block, $content = '', $is_preview = false ) {
    if($is_preview):
      echo '&lt;img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2IrSELemo2mRl4zVXzhjFyxtj3GTVZ8xo"&gt;';
    else:
      echo '&lt;img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2IrSELemo2mRl4zVXzhjFyxtj3GTVZ8xo"&gt;';
    endif;
  }
  
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In both cases, when trying to show the image (not the block preview), I see the ACF fields for the block, not the dummy image defined:</p>
  <p><a href="https://i.stack.imgur.com/GkkDQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GkkDQ.png" alt="enter image description here" /></a></p>