Tet banner

Custom Fields
Re-Envisioned
Support MB Blocks How to use an image as Gutenberg block preview?

  • Creator
    Topic
  • #18971
    Resolved Mauro
    Participant

    Hello, in the tutorial it's stated that a block preview (the one that appears in the blocks selection popover, not in the main editor area) -- is a rendered version of the block with sample data.

    However it looks like it is possible to use a static image instead, which would be my preference since the small preview area won't allow most of my custom blocks to render correctly.

    I found a tutorial to use an image as the block preview (see link below), how can I do the same for blocks created with MB Blocks?

    https://mediaron.com/how-to-enable-gutenberg-block-previews/

    Thank you!
    Mauro.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #18991
    Long Nguyen
    Moderator

    Hi Mauro,

    The extension MB Blocks supports to show the image on the preview block area, please follow the documentation and see my screenshot.

    Remember to create the property name as the same as the field ID and the preview area will render the template of the block with the preview value.

    #30840
    matija
    Participant

    Hello Long,

    your screenshot is not there anymore. Could you please re-upload it?

    Thank you

    #30849
    Long Nguyen
    Moderator

    Hi,

    Yes, here is the link https://imgur.com/RXAihQ4
    and sample code:

    'preview'         => [
        'image'   => 2140, //image ID
        'name'    => 'William Shakespeare',
        'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
    ],
    'fields'          => [
        [
            'type' => 'text',
            'id'   => 'name',
            'name' => 'Name',
        ],
        [
            'type' => 'textarea',
            'id'   => 'content',
            'name' => 'Intro',
        ],
        [
            'type' => 'single_image',
            'id'   => 'image',
            'name' => 'Image'
        ],
    ],
    #30867
    matija
    Participant

    Thank you Long.

    Can I use part of the code just for the preview in Block Render > Code settings, since everything else for the block is set via your MB builder UI?

    Thank you so much!

    block render

    #31069
    matija
    Participant

    Never got a response to this??

    #31072
    Long Nguyen
    Moderator
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.