Support

Account

Home Forums Gutenberg Inserter Help Panel

Solving

Inserter Help Panel

  • Hi

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

    Block Preview

    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.

  • 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',
          ),
        ),
  • 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

    • 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

  • 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”?

Viewing 6 posts - 1 through 6 (of 6 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.