Support Forum
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.
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"}]}}});
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
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.
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.
Hi,
Thanks for the feedback.
I will inform the development team to consider supporting this feature in future updates.