MB Block and MB Group Cloning display Issue

Support MB Blocks MB Block and MB Group Cloning display IssueResolved

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #34345
    Nicholas CoxNicholas Cox
    Participant

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

    clone-group-fields-issue

    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
        }
      }
    }
    #34394
    Nicholas CoxNicholas Cox
    Participant

    just an update, I have tested the same group field on the front end submission and it displays correctly.

    front-end-form-group-block-working

    So the issue is only in the WordPress Admin Block Editor (seems no css or js is being loaded)

    front-end-form-group-block-working

    #34429
    Long NguyenLong Nguyen
    Moderator

    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

    #34439
    Nicholas CoxNicholas Cox
    Participant

    Hi Long,

    Ah ok, that works now, thanks!!!

    Nick

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