Support Forum
Hi Team,
I am getting the following console error when using 'image_advanced' and or 'file_advanced' in MB Blocks.
Uncaught (in promise) SyntaxError: Unexpected token '<', "<div id="e"... is not valid JSON
I generate this console error if I leave these fields empty when adding content to other fields within the same block and will not save the content.
However, it will save the content only if the 'image_advanced' and or 'file_advanced' fields are not empty.
[
'name' => 'Image',
'id' => "{$prefix}image",
'type' => 'image_advanced',
'force_delete' => false,
'max_file_uploads' => 1,
'max_status' => false,
'image_size' => 'thumbnail',
'column' => 'column-a'
],
[
'id' => "{$prefix}mp4",
'desc' => 'Please keep the file size under 2Mb',
'name' => 'The background MP4 Video, this will override the cover image',
'type' => 'file_advanced',
'max_file_uploads' => 1,
'mime_type' => 'video/mp4',
'column' => 'column-1',
'visible' => [ "{$prefix}background_options", 'in', ['video' ] ],
],
Cheers,
Anthony
Hello,
The problem happens when the line below is added to the field file_advanced settings
'column' => 'column-1',
Refer to the documentation https://docs.metabox.io/extensions/meta-box-columns/
Did you register the columns under the meta box settings?
Yes, the columns are registered. I tried removing them and still got the same response. Below is the complete code for creating the block. Also, note there is a function for a button that passes the vars to another meta box function and I still get the JSON error with or without this button function, however, I have commented it out for testing.
Thanks.
add_filter( 'rwmb_meta_boxes', 'gutenberg_meta_boxes_blocks' );
function gutenberg_meta_boxes_blocks( $meta_boxes ) {
$g_block_path = get_stylesheet_directory() . '/inc/meta-boxes/g-blocks/';
require_once $g_block_path . 'g_block__fullwidth_w_bg__meta-box.php';
return $meta_boxes;
}
$prefix = "g-block_";
$meta_boxes[] = [
'title' => 'Fullwidth with background content block',
'id' => "fullwidth-w-bg-content-block",
'description' => 'Fullwidth with background content block',
'type' => 'block',
'icon' => 'cover-image',
'category' => 'layout',
'keywords' => ['call', 'action', 'cta', 'block'],
'context' => 'normal',
'supports' => [
'multiple' => true,
'anchor' => true,
],
'columns' => [
'column-1' => 4,
'column-2' => 8,
],
'render_callback' => 'fullwidth_w_bg__g_block',
'fields' => [
[
'type' => 'heading',
'name' => 'Fullwidth with background content block',
],
[
'name' => 'Content options',
'id' => "{$prefix}content_options",
'type' => 'radio',
'inline' => true,
'options' => array(
'text' => 'Text Blcok',
'quote' => 'Quote',
),
'column' => 'column-2',
],
[
'type' => 'heading',
'name' => 'Text',
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['text' ] ],
],
[
'name' => 'Header',
'desc' => 'Use <br> tags for text line breaks on larger screen sizes, they will be removed on smaller screen sizes.',
'id' => "{$prefix}header",
'type' => 'textarea',
'rows' => 2,
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['text' ] ],
],
[
'name' => 'Blurb',
'id' => "{$prefix}blurb",
'type' => 'textarea',
'rows' => 4,
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['text' ] ],
],
[
'type' => 'heading',
'name' => 'Quote',
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['quote' ] ],
],
[
'name' => 'Quote',
'id' => "{$prefix}quote",
'type' => 'textarea',
'rows' => 2,
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['quote' ] ],
],
[
'name' => 'Cite',
'id' => "{$prefix}cite",
'type' => 'textarea',
'rows' => 1,
'column' => 'column-2',
'visible' => [ "{$prefix}content_options", 'in', ['quote' ] ],
],
/*
add_cta_button_group__g_block_meta_box(
$prefix,
$id ='btn_groups',
$textdomain,
$visibility = '',
$vis_args = array(),
$columns = 'column-2'
),
**/
[
'type' => 'heading',
'name' => 'Background Options',
'column' => 'column-1',
],
[
'name' => 'Background options',
'id' => "{$prefix}background_options",
'type' => 'radio',
'inline' => true,
'options' => array(
'video' => 'Video',
'image' => 'Image',
),
'column' => 'column-1',
],
[
'name' => 'Background Image',
'id' => "{$prefix}bg_image",
'type' => 'image_advanced',
'max_file_uploads' => 1,
'image_size' => 'thumbnail',
'column' => 'column-1',
'visible' => [ "{$prefix}background_options", 'in', ['image' ] ],
],
[
'id' => "{$prefix}mp4",
'desc' => 'Please keep the file size under 2Mb',
'name' => 'The background MP4 Video, this will override the cover image',
'type' => 'file_advanced',
'max_file_uploads' => 1,
'mime_type' => 'video/mp4',
'column' => 'column-1',
'visible' => [ "{$prefix}background_options", 'in', ['video' ] ],
],
[
'name' => 'Add Overlay (Percentage)',
'desc' => 'This adds a black overlay on top of the image/video to darken it making the header text more readable.',
'id' => "{$prefix}overlay_percentage",
'type' => 'number',
'min' => 0,
'max' => 100,
'step' => 1,
'column' => 'column-1',
],
],
];
Hi Team,
I had a whitespace issue that was causing the JSON error.
Thanks again for your assistance.