Support

Account

Home Forums Gutenberg Register block preview image with acf_register_block_type?

Solving

Register block preview image with acf_register_block_type?

    • rps

    • November 20, 2019 at 6:48 pm

    In WordPress 5.3 you can now see a preview image for the core Gutenberg blocks when you hover over their icons in the top left add block popup. It would be great to be able to set a static image for custom blocks registered with acf_register_block_type. If I add ‘example’ => [] to the block attributes, it will try to generate a preview from my block output via an ajax call, but it’s not super pretty since we have heavy use of animations, SVG’s and other funky layouts on the front-end. Has anyone figured out a way to use static images for these previews?

  • +

    • sschat

    • January 30, 2020 at 9:30 pm

    Yes, i would like to “+1” this too.
    It would be a great addition to the ACF blocks.

    Now all blocks EXCEPT the ACF blocks have examples.

    • zkmark

    • February 2, 2020 at 7:17 am

    +1

  • Also looking forward to this πŸ™‚

  • + 1

  • +1 for this. Yes the β€˜example’ => [] works but just doesn’t render well with the html that doesn’t even try to make it responsive.

    Yes please for an image preview!

  • +1 – This would be awesome. We really need this for our projects.

  • +1

    • phip

    • July 17, 2020 at 7:27 am

    The easiest way I think to do this is to pass the example array to the acf_register_block_type function and include “an additional non-custom-field value” as mentioned in the “Adding block previews πŸŒ„” section of the [function’s docs](https://www.advancedcustomfields.com/resources/acf_register_block_type/).

    In the rendering template, include a conditional to check for the is_example flag and render a screenshot instead of the HTML, if it’s set. The screenshot could be an image, GIF, or even video (probably). See my conclusion after the code examples.

    // init.php
    acf_register_block_type([
    ...
    	'example' => [
    		'attributes' => [
    			'mode' => 'preview',
    			'data' => ['is_example' => true],
    		]
    	]
    ...
    ]);
    // block.php
    if (get_field('is_example')) :
    	/* Render screenshot for example */
    else :
    	/* Render HTML for block */
    endif;

    That’s how I *think* it should work, but I have an issue with get_field not returning data from the example array. Am I missing something? The docs are pretty clear on how to include data for the example render, but it’s not working at all for me. I’m also not seeing any of the data that I’m passing in the example array show up in the $block['data'] array as mentioned in the docs πŸ˜•

    • wggl

    • July 21, 2020 at 11:36 pm

    +1

  • Just like @phip said, I don’t see any data from the example array passed to my block rendering. Are we missing something?

  • Just a quick update, I’ll link to a comment I found by Eliot on github. https://github.com/AdvancedCustomFields/acf/issues/264#issuecomment-629558291

    Basically says that if you use “get_fields” instead of single “get_field” functions, it won’t pass the data because the name of the fields aren’t declared at that moment in the code execution. You can still pass examples without refactoring your code to use “get_field”, but you have to use the field IDs like so and it will work with “get_fields” :

    
    'example'  => [
        'attributes' => [
            'mode' => 'preview',
            'data' => [
                "field_5efb9b4a86e4d" => "Titre gauche",
                "field_5f29ba5f8e2f1" => "h2",
                "field_5efb9b4a86e4f" => "Sous-titre gauche",
                "field_5efb9b4a86e51" => "<p>Mauris turpis risus scelerisque mollis interdum tincidunt lectus parturient nibh</p>",
                "field_5f08b1ab13927" => ["url" => "http://google.com", "target" => "_blank", "title" => "Lien gauche"],
                "field_5f0c252bdce4e" => 0,
                "field_5f29c57dad9dc" => "text-white",
                "field_5f29c59dad9dd" => "opacity-15",
                "field_5f3a04b753a8d" => "Titre droite",
                "field_5f3a04a953a8c" => "h2",
                "field_5f3a04bd53a8e" => "Sous-titre droite",
                "field_5efb9b4a86e52" => "<p>Mauris turpis risus scelerisque mollis interdum tincidunt lectus parturient nibh</p>",
                "field_5f08b24c905b3" => ["url" => "http://google.com", "target" => "_blank", "title" => "Lien gauche"],
                "field_5f0c2543dce4f" => 0,
                "field_5f29c5dbad9de" => "text-white",
                "field_5f29c5ebad9df" => "opacity-15",
                "is_preview" => 1
            ]
        ]
    ]
    
  • (apologies if this is posted twice, got a bug and not sure if it went through)

    Just a quick update, I’ll link to a comment I found by Eliot on github. https://github.com/AdvancedCustomFields/acf/issues/264#issuecomment-629558291

    Basically says that if you use “get_fields” instead of single “get_field” functions, it won’t pass the data because the name of the fields aren’t declared at that moment in the code execution. You can still pass examples without refactoring your code to use “get_field”, but you have to use the field IDs like so and it will work with “get_fields” :

    
    'example'  => [
        'attributes' => [
            'mode' => 'preview',
            'data' => [
                "field_5efb9b4a86e4d" => "Titre gauche",
                "field_5f29ba5f8e2f1" => "h2",
                "field_5efb9b4a86e4f" => "Sous-titre gauche",
                "field_5efb9b4a86e51" => "<p>Mauris turpis risus scelerisque mollis interdum tincidunt lectus parturient nibh</p>",
                "field_5f08b1ab13927" => ["url" => "http://google.com", "target" => "_blank", "title" => "Lien gauche"],
                "field_5f0c252bdce4e" => 0,
                "field_5f29c57dad9dc" => "text-white",
                "field_5f29c59dad9dd" => "opacity-15",
                "field_5f3a04b753a8d" => "Titre droite",
                "field_5f3a04a953a8c" => "h2",
                "field_5f3a04bd53a8e" => "Sous-titre droite",
                "field_5efb9b4a86e52" => "<p>Mauris turpis risus scelerisque mollis interdum tincidunt lectus parturient nibh</p>",
                "field_5f08b24c905b3" => ["url" => "http://google.com", "target" => "_blank", "title" => "Lien gauche"],
                "field_5f0c2543dce4f" => 0,
                "field_5f29c5dbad9de" => "text-white",
                "field_5f29c5ebad9df" => "opacity-15",
                "is_preview" => 1
            ]
        ]
    ]
    
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.