Support Forum
Hi
I have created a block and have an issue where the block does not load any input field styles inside Gutenberg.
My block
add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
$meta_boxes[] = [
'title' => 'Carousel Block',
'id' => 'dc-carousel-block',
'description' => 'Carousel with product support',
'type' => 'block',
'icon' => 'screenoptions',
'category' => 'dc-blocks',
'context' => 'side',
'render_template' => __DIR__ . '/template/dc-carousel-block-template.php',
'enqueue_style' => plugin_dir_url( __FILE__ ) . 'css/splide.min.css', //loads per instance of a block
'enqueue_script' => plugin_dir_url( __FILE__ ) . 'js/splide.min.js', //loads per instance of a block
'supports' => [
'align' => ['wide', 'full'], //Gutenberg align class
],
'keywords' => ['carousel', 'product', 'listing', 'ecommerce'],
'multiple' => true,
'reusable' => false,
'preview' => [
'image' => '', // Image ID
'title' => 'Carousel',
'description' => 'Carousel with product support',
],
'fields' => [
'type' => 'group',
'id' => 'slider',
'name' => 'Slider',
'group_title' => 'Test123',
'clone' => true,
'sort_clone' => true,
'collapsible' => true,
'fields' => [
[
'id' => 'image',
'name' => 'Image',
'type' => 'file_advanced',
'force_delete' => false,
'max_file_uploads' => 1,
'max_status' => false,
],
],
],
];
return $meta_boxes;
} );
When I go to the admin editor for the block it displays like this...
I am including the Metabox addons via composer and have checked if the class exists for the MB Groups and it does exist.
if ( class_exists( 'RWMB_Group' ) ) { echo "yes" }
I checked the browser to see if any JS/CSS was being loaded. I found that there was no MB Groups related scripts being called e.g. group.js, clone.js and group.css. So not sure what is going on?
my composer.json file
{
"repositories":[
{
"type": "composer",
"url": "https://wpackagist.org"
},
{
"type": "composer",
"url": "https://packages.metabox.io/mykeyhere"
}
],
"require": {
"wpackagist-plugin/meta-box": "dev-trunk",
"wpackagist-plugin/mb-comment-meta": "dev-trunk",
"wpackagist-plugin/mb-rest-api": "dev-trunk",
"wpackagist-plugin/meta-box-text-limiter": "dev-trunk",
"meta-box/mb-admin-columns": "dev-master",
"meta-box/mb-blocks": "dev-master",
"meta-box/mb-custom-table": "dev-master",
"meta-box/mb-frontend-submission": "dev-master",
"meta-box/mb-revision": "dev-master",
"meta-box/mb-settings-page": "dev-master",
"meta-box/mb-term-meta": "dev-master",
"meta-box/mb-user-meta": "dev-master",
"meta-box/mb-user-profile": "dev-master",
"meta-box/meta-box-conditional-logic": "dev-master",
"meta-box/meta-box-geolocation": "dev-master",
"meta-box/meta-box-group": "dev-master",
"meta-box/meta-box-include-exclude": "dev-master",
"meta-box/meta-box-tabs": "dev-master",
"divengine/div": "^5.1"
},
"extra": {
"installer-paths": {
"vendor/meta-box/meta-box/": ["wpackagist-plugin/meta-box"],
"vendor/meta-box/mb-comment-meta/": ["wpackagist-plugin/mb-comment-meta"],
"vendor/meta-box/mb-rest-api/": ["wpackagist-plugin/mb-rest-api"],
"vendor/meta-box/meta-box-text-limiter": ["wpackagist-plugin/meta-box-text-limiter"],
"vendor/meta-box/{$name}/": ["type:wordpress-plugin"]
}
},
"autoload": {
"files": [
"vendor/meta-box/meta-box/meta-box.php",
"vendor/meta-box/mb-comment-meta/mb-comment-meta.php",
"vendor/meta-box/mb-rest-api/mb-rest-api.php",
"vendor/meta-box/meta-box-text-limiter/text-limiter.php",
"vendor/meta-box/mb-admin-columns/mb-admin-columns.php",
"vendor/meta-box/mb-blocks/mb-blocks.php",
"vendor/meta-box/mb-custom-table/mb-custom-table.php",
"vendor/meta-box/mb-frontend-submission/mb-frontend-submission.php",
"vendor/meta-box/mb-revision/mb-revision.php",
"vendor/meta-box/mb-settings-page/mb-settings-page.php",
"vendor/meta-box/mb-term-meta/mb-term-meta.php",
"vendor/meta-box/mb-user-meta/mb-user-meta.php",
"vendor/meta-box/mb-user-profile/mb-user-profile.php",
"vendor/meta-box/meta-box-conditional-logic/meta-box-conditional-logic.php",
"vendor/meta-box/meta-box-geolocation/meta-box-geolocation.php",
"vendor/meta-box/meta-box-group/meta-box-group.php",
"vendor/meta-box/meta-box-include-exclude/meta-box-include-exclude.php",
"vendor/meta-box/meta-box-tabs/meta-box-tabs.php"
]
},
"config": {
"allow-plugins": {
"composer/installers": true
}
}
}
Hi,
You should wrap a field in an array, the setting fields
is an array of field arrays. Check this code
'fields' => [
[ //here
'type' => 'group',
'id' => 'slider',
'name' => 'Slider',
'group_title' => 'Test123',
'clone' => true,
'sort_clone' => true,
'collapsible' => true,
'fields' => [
[
'id' => 'image',
'name' => 'Image',
'type' => 'file_advanced',
'force_delete' => false,
'max_file_uploads' => 1,
'max_status' => false,
],
],
]
],
Read more on the documentation https://docs.metabox.io/creating-meta-boxes/#using-code
Hi Long,
Ah ok, that works now, thanks!!!
Nick