Custom Fields
Re-Envisioned
Support MB Blocks Block Preview

  • Creator
    Topic
  • #32339
    Resolved mark@olypress.com
    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"}]}}});
Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #32350
    Long 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

    #32372
    mark@olypress.com
    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

    #32374
    mark@olypress.com
    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.

    #32416
    Long Nguyen
    Moderator

    Hi,

    Thanks for the feedback.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.