Block Preview - Meta Box

This topic has 4 replies, 2 voices, and was last updated 3 years ago by Long Nguyen.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 2, 2021 at 2:09 AM #32339
[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"}]}}});
```
Add New Note to this Reply
December 2, 2021 at 12:42 PM #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

Add New Note to this Reply
December 3, 2021 at 12:06 AM #32372
[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

Add New Note to this Reply
December 3, 2021 at 12:29 AM #32374

[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.

Add New Note to this Reply

December 4, 2021 at 8:20 AM #32416

Long Nguyen
Moderator

Hi,

Thanks for the feedback.

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

Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.