Inserter Help Panel

• Dominik Kucharski

• December 20, 2019 at 5:00 pm

Hi

After the latest update for Gutenberg, I observed a special panel, where you can see preview of each block:

It’s very useful for the editors to see such a preview. Is it possible to set up a preview image in the ACF Blocks (acf_register_block_type function)?

• andrek

• January 22, 2020 at 1:25 am

Hi Dominik,

I also would like to know if it is possible to get a preview on the panel.

Were you able to figure this out?

Thank you.

• jghazally

• February 3, 2020 at 6:32 am

I believe what you are looking for is the attribute “example” I haven’t tested this, but hopefully this gets you on the right track. Let me know how you go.

From this page: https://www.advancedcustomfields.com/resources/acf_register_block_type/
It mentions

$settings
(array) (Required) Array of arguments for registering a block type. Any argument from the JavaScript registerBlockType() function may also be used.

Looking at the Gutenberg Docs:
https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#example-optional

So for example if you have a block with a Title and Description fields you add them into an attributes array:

  acf_register_block(array(
    'name'				=> 'testBlock',
    'title'				=> 'Test Block',
    'description'		=> 'A Test block which should hopefully show an example in the help panel',
    'render_callback'	=> 'testBlockRender',
    'category'			=> 'formatting',
    'icon'				=> 'admin-comments',
    'keywords'			=> array( 'Test' ),
    'example' => array(
      'attributes' => array(
        'title' => 'Title',
        'descrpition' => 'A Description',
      ),
    ),

• anybodesign

• February 7, 2020 at 2:48 am

Hi 🙂
I’m also interested in providing block preview!
Thanks to @jghazally I tried to add this to acf_register_block :

'example' => array(
    'attributes' => array(
       'cover' => ADBLOCKS__PLUGIN_URL . '/assets/fallback.png',
     ),
),

but I have no preview in the editor, just a spinning loader and then a white space
screenshot attached

Capture-d’....png

• andrek

• February 7, 2020 at 8:25 pm

Thanks for the new input, I tried this for my self.

If I use default gutenberg blocks and look at the preview, it doesn’t shows an image. This is real html. So if I use your example @jghazally . I got only a preview, when my acf register mode is edit

acf_register_block(array(
        'name' => 'columntext',
        'title' => __('ColumnText'),
        'description' => __(''),
        'render_callback' => 'acfBlockRenderer',
        'category' => 'modules',
        'icon' => 'format-image',
        'keywords' => array('columntext'),
        'mode' => 'edit', // <<<<<
        'example' => array(
            'attributes' => array(
                'title' => 'Title',
                'description' => 'A Description',
            )
        )
    ));

but then I have a preview of my created custom fields.
When I am using the mode “preview” then the he creates an html preview. I can see my html structure. But it is empty because the fields are not filled in.

So the question is: Is it possible to fill this with placeholders (may be a little bit tricky) or why the block doesn’t use the cover image for the preview

example: {
    attributes: {
        cover: 'https://example.com/image.jpg',
        author: 'William Shakespeare',
        pages: 500
    },
},

see https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#example-optional

Screenshot-2....png

Screenshot-2....png

• blindmikey

• March 3, 2020 at 2:42 pm

for your block template, after you’ve registered the block with “editor”=>”attributes”=>”cover” = ‘…’

<?php if (is_admin() && @$block['example']['attributes']['cover']): ?>
<div style="background:url(<?= $block['example']['attributes']['cover'] ?>) no-repeat center #eee; background-size:contain;width:500px;height:600px;"></div>
<?php else: ?>
<!-- your block html -->
<?php endif; ?>

EDIT: eh – spoke too soon. This will change the block in the editor not just preview. Is there a conditional to determine if the block is being “previewed”?

• maildeseb

• May 12, 2020 at 10:11 pm

hello, have you resolved this problem ?

• maildeseb

• May 12, 2020 at 10:11 pm

hello, have you resolved this problem ?

• phildesigns

• May 20, 2020 at 7:36 am

This works for me…

'example' => array(
	'attributes' => array(
		'mode' => 'preview',
		'data' => array(
		'content' => __('<img src="https://via.placeholder.com/680x720">'),
	        ),
	)
)

• andrek

• May 20, 2020 at 4:43 pm

@phildesigns I tried this. Now I get a preview, but not the image, I got a preview from the acf fields.
In your preview you see the placeholder image?
Can you provide the full register block code? Thank you.

• anybodesign

• May 20, 2020 at 5:04 pm

Thanks @phildesigns but I’ve just tried and all I get is a white placeholder… I would be interested in your full code as well 🙂

editor-previ....mp4

• maildeseb

• May 20, 2020 at 9:50 pm

@anybodesign je vois que tu as créé une catégorie de blocks. Comment fais-tu pour qu’elle s’affiche en premier, et même avant la catégorie “les plus utilisés”, s’il te plait ?

I see that you have created a category of blocks. How do you make it appear first, and even before the “most used” category, please?

• anybodesign

• May 20, 2020 at 10:03 pm

It’s just a CSS trick 🙂
I call some CSS for the admin and then:

#editor {
	
	.block-editor-inserter__results {
		display: flex;
		flex-direction: column;
		
		.components-panel__body:last-child {
			order: -1;
			border-bottom: 0;
		}
	}
}

But I’m aware this will only work if my group is the last one 🙂

• maildeseb

• May 20, 2020 at 10:16 pm

oh, very ingenious!

• phildesigns

• May 21, 2020 at 1:20 am

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>

Screen-Shot-....png

Screen-Shot-....png

• anybodesign

• May 21, 2020 at 1:27 am

Oh, you are creating blocks with a UI?
Looks like an ACF repeater field

I use PHP only, in a plugin. So I do not have a specific field pour the preview

• maildeseb

• May 21, 2020 at 2:48 am

@phildesigns what this attribute “gutenberg_preview” ?
Have you define this attribute somewhere ?

• phildesigns

• May 21, 2020 at 3:05 am

@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.

• maildeseb

• May 21, 2020 at 3:10 am

and what is the code in your template that renders the block ?
The image is at the top of this template ?

• phildesigns

• May 21, 2020 at 3:18 am

@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

• May 21, 2020 at 4:27 am

the preview displays the content of the template that renders the block. In your template, the first element displayed is the image. So the preview shows the image but in realty that’s not the image which is in your attribute “gutenberg_preview”. It’s just the image in your template.

to verify my theory, could you remove the url from your image and see if it changes anything.
Like that :

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

I think that your preview will not change

But if your remove the image in your template, your preview will change

• phildesigns

• May 21, 2020 at 4:32 am

@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.

• sandajedward

• January 28, 2021 at 5:41 pm

Please update the link that is working

• jarvis

• February 5, 2021 at 10:47 pm

Hi All,

I could do with some help on the inserter help panel.

I have the following code:

	// register a one column block
	acf_register_block_type(
		array(
		'name'				=> 'one-column',
		'title'				=> __('One Column'),
		'description'		=> __('A one column block.'),
		'render_template' 	=> get_template_directory() . '/blocks/content-one-column.php',
		'icon'				=> 'menu',
		#'icon'				=> file_get_contents( get_template_directory() . '/images/blocks/one-column.svg' ),
		#'mode'              => 'auto', #Available settings are auto, preview and edit. 
		'supports' 			=> array( 'align' => false ),
		'keywords'			=> array( 'one column', 'layout' ),
		
		#'render_template'   => get_template_directory() . '/blocks/content-one-column.php',
		#'enqueue_script'    => get_template_directory_uri() . '/blocks/content-one-column.js',

		'example'  			=> array(
									'mode' => 'preview',
									'attributes' => array(
										'data' => array(
											#'title'		=> "One Column Block",
											'content'	=> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod sem eget tortor suscipit, et ultricies lectus ultrices.",
											#'content'	=> '<img src="'.get_template_directory_uri() . '/images/block-preview/one-column.jpg'.'">'
											#'gutenberg_preview' => __('<img src="'.get_template_directory_uri() . '/images/block-preview/one-column.jpg'.'">'),
										)
									)
								)				
		)
		
	);

My template (blocks/content-one-column.php) includes the fields:
– title
– content
So my understanding is you use those in the ‘data’ field and when you hover over the block you want to add, it would then show this content.

I replaced this with an image (thought it would be easier to style). Oddly, this was working but has now stopped. I can’t even get the previous one to work.

Am I right in thinking you just need the above? You don’t need to enqueue_script a js file?

Be great to get this working, so any pointers are very much appreciated!

Thanks

• jarvis

• February 6, 2021 at 2:49 am

Sorry to add to this. The preview (on hover) just seems to show a blue line: https://pasteboard.co/JMXWfHU.png

Anyone else had this? Its almost as if the preview div is collapsed.

I’ve disabled everything and tried the 2021 theme but still no luck – think I’m going a little insane on this one lol