Meta Box

Block Preview

Support › MB Blocks › Block PreviewResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 2, 2021 at 2:09 AM #32339
    mark@olypress.com[email protected]
    Participant

    https://docs.metabox.io/extensions/mb-blocks/#preview
    Wordpress 5.8.2
    Meta Box Version 5.4.8
    Meta Box AIO Version 1.15.2

    I have read through all of the MB Block documentation and even some of the posts on the support forum, but I can not get the hover preview to work with Metabox Blocks. I have tried it in Builder with Custom Settings and also generated code, but neither will render an image to the preview. Please let me know if I am missing something.

    https://ibb.co/FbN1tBv

    https://ibb.co/8b0SvYS

    Output from inspector

    window.rwmb = window.rwmb || {}; rwmb.blocks = [];
rwmb.blocks.push({"description":"","icon":{"background":"","foreground":"#dd9933","src":"star-filled"},"category":"oly-blocks","keywords":["latest news","news block","latest block"],"supports":{"align":[""]},"title":"Important News Single 2","id":"important-news-single-2","context":"content","class":"","render_callback":"nb_single2","enqueue_assets":"olytheme_scripts","text_domain":"your-text-domain","function_name":"your_prefix_function_name","example":{"attributes":{"data":[{"image":"https:\/\/******.com\/wp-content\/themes\/olytheme\/img\/block_images\/block1.png","description":"Something here"}]}}});
    December 2, 2021 at 12:42 PM #32350
    Long NguyenLong Nguyen
    Moderator

    Hi,

    Please try to use this code to register the fields and preview area for a custom block

    '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'
    ],
],

    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.

    Screenshot https://imgur.com/RXAihQ4

    December 3, 2021 at 12:06 AM #32372
    mark@olypress.com[email protected]
    Participant

    Thanks Long,
    I see how it works now as a live preview.
    Do you think in a future release you could add an option for a static image preview?

    'preview'         => [
    'static_image'   => [img_url], 

],

    To generate something like Publisherpress Blocks example preview. This would be very helpful.

    https://ibb.co/DY8SPtP

    https://ibb.co/k036LWh

    December 3, 2021 at 12:29 AM #32374
    mark@olypress.com[email protected]
    Participant

    Do you think in a future release you could add an option for a static image preview? *Without using a field name/id match. Say for instance I do not have an image field, but would like to add a static image that shows the layout of the block. As in the example images attached.

    December 4, 2021 at 8:20 AM #32416
    Long NguyenLong Nguyen
    Moderator

    Hi,

    Thanks for the feedback.

    I will inform the development team to consider supporting this feature in future updates.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.