@maildeseb when I remove the link the preview image goes away. There is no image within the template.I created a UI interface using an ACF repeater to register the blocks.
@maildeseb doesn’t have to be at the top no. So hypothetically…
<?php
/**
* Block Name: Columns
*
* This is the template that displays the ACF general content block.
*/
?>
<section id="colums-section">
<div data="gutenberg-preview-img"><?php the_field('gutenberg_preview'); ?></div>
<div class="container">
<div class="content">
<div class="col-1"><?php the_field('column_one'); ?></div>
<div class="col-2"><?php the_field('column_two'); ?></div>
</div>
</div>
</section>
@maildeseb Just within the template that renders the block.
<div data="gutenberg-preview-img"><?php the_field('gutenberg_preview'); ?></div>
and the weird thing is you don’t even need to create that field just have the code in the template.
I actually just revised my code a little. The field to receive the preview data needs to be in the template. I built a repeater with ACF to register the blocks. The acf field doesn’t even need to exist within the block fields, weird but it works.
so…
'example' => array(
'attributes' => array(
'mode' => 'preview',
'data' => array(
'gutenberg_preview' => __('<img src="https://via.placeholder.com/680x720">'),
),
)
)
Then in the template…
<div data="gutenberg-preview-img"><?php the_field('gutenberg_preview'); ?></div>
This works for me…
'example' => array(
'attributes' => array(
'mode' => 'preview',
'data' => array(
'content' => __('<img src="https://via.placeholder.com/680x720">'),
),
)
)
Seems to be a new issue with the overlay and the latest version of ACF Pro. The overlay appears over the crop stage making the buttons inaccessible. Screen shot of issue here.
Screen-Shot-....png
Screen-Shot-....png