Sortable 2013

[mattheu]

After thinking about this (#54) - I do think sortable fields would be useful, and a basic implementation is actually pretty simple... so I thought i'd knock something together as a bit of an experiment.

Issues:

• Are results always returned in the correct order? They do appear to do so - but this might need testing more.
• Touch. Sortable on the web never seems very good on touch devices - I think WP core did something in this area. I do think some sort of solution is very important.

to setup pass sortable => true as an arg when creating the field.

[jonathanbardo]

Way better implementation than what I did! I will give the code a try very soon ! Good job !

[lumberman]

Looks like 'type' => 'group' inside of repeatable sets doesn't work. It shows fine in back end but never saves data, so after you click "update" you loose all the data typed.

Get this error next to field group:
Warning: Invalid argument supplied for foreach() in /var/www/sites/tfingi/public_html/wp-content/themes/tfingi/functions/custom_meta_boxes/classes.fields.php on line 1432

[mattheu]

Do you mean repeatable group inside repeatable group? Can you post the code used to set up the fields and I can take a look.

[lumberman]

No I mead columns inside of repeatable groups.

$prj_graphical_fields = array(
        array( 'id' => 'project-slide-column-1', 'name' => 'test1', 'type' => 'group', 'cols' => 3,
            'fields' => array(
                array( 'id' => 'gfield-2',  'name' => 'Text input field', 'type' => 'text' ),
            )
        ),
        array( 'id' => 'gfield-1',  'name' => 'Text input field', 'type' => 'text' ),
);

$meta_boxes[] = array(
    'title' => $prj_graphicalgroup_title,
    'pages' => 'portfolio',
    'priority' => 'high',
    'fields' => array(
        array(
            'id' => 'project_graphical',
            'name' => '',
            'type' => 'group',
            'repeatable' => true,
            'sortable' => true,
            'fields' => $prj_graphical_fields
        )
    )
);

in this case "gfield-1" saves fine, but "gfield-2" will be reset to empty on update.

[mattheu]

Thanks for the report. Groups inside groups is not currently supported. There was already a similar issue #36, however I have created a new issue for this #64. This is not related to the current pull request.

[lumberman]

If you have sortable groups with some fields inside it's position flips on every second save. Very first card become last and very last become first.

[lumberman]

I found that this problem happens only on our web server with PHP Version 5.2.9
On local server with PHP Version 5.4.11 everything works fine.

Can you please point me to the line where you save the order of theme groups to the database?

[mattheu]

Thanks for reporting the issue...

The code that saves the fields is here

I would like to get to the bottom of this issue. I thought there was some reports of a similar issue before, but nothing was documented and I could not replicate this.I have also tested on a PHP 5.2 server and did not experience any issues.

Can you post the code you used to register the meta boxes here and I can investigate further.

[lumberman]

Hello and thank you for decision to fix it.

Here is the code I used to define the custom meta box

    /**
     * Metabox group - Graphical project presentation sections
     */

    $prj_graphical_fields = array(

        array( 'id' => 'project-slide-image', 'name' => 'Section image', 'type' => 'file', 'file_type' => 'image', 'repeatable' => 0, 'sortable' => 0, 'cols' => 3 ),
        array( 'id' => 'project-slide-title',  'name' => 'Section title', 'type' => 'text', 'cols' => 5 ),
        array( 'id' => 'project-slide-description',  'name' => 'Section description', 'type' => 'textarea', 'cols' => 5  ),
        array( 'id' => 'project-oembed', 'name' => 'Section video', 'type' => 'oembed', 'desc' => $prj_oembed_decription , 'cols' => 3 ),

        array( 'id' => 'project-settings-bgimage', 'name' => 'Background image', 'type' => 'file', 'file_type' => 'image', 'repeatable' => 0, 'sortable' => 0, 'cols' => 3 ),
        array( 'id' => 'project-slide-layout',  'name' => 'Section layout', 'type' => 'radio', 'cols' => 5,
            'options' => array(
                'right' => 'Description to the left of the image',
                'left'  => 'Description to the right of the image',
            )
        ),

        array( 'id' => 'project-settings-bgcolor', 'name' => 'Background color', 'type' => 'colorpicker' , 'cols' => 3  ),
        array( 'id' => 'project-settings-titlecolor', 'name' => 'Title text color', 'type' => 'colorpicker' , 'cols' => 3 ),
        array( 'id' => 'project-settings-desccolor', 'name' => 'Description text color', 'type' => 'colorpicker' , 'cols' => 3 ),


    );

    $meta_boxes[] = array(
        'title' => $prj_graphicalgroup_title,
        'pages' => 'portfolio',
        'priority' => 'high',
        'fields' => array(
            array(
                'id' => 'project_graphical',
                'name' => '',
                'type' => 'group',
                'repeatable' => true,
                'sortable' => true,
                'fields' => $prj_graphical_fields
            )
        )
    );

[joehoyle]

Ping @mattheu is there something to fix / add / close this here?

[mattheu]

I have brought this up to date - I think that with #98 it is pretty solid and is good to go.

Its actually pretty simple. The complexity is largely with the UI.

The UI is adequate - but perhaps it is something to revisit when I bring everything up to date for MP6.

Would love someone to test it out and let me know what you think.

[pdubb-sauce]

I've been using your latest Sortable 2013 branch for a week now across a number of sites and have found it to be reliable for both repeatable groups and repeatable individual fields, top work!

Many thanks to you (and all other contributors) for the dev of this CMB platform, it is making custom Wordpress development so much better.

[banago]

Hi @mattheu,

What's the status of this. I need this for a project and I wanted to ask if this is good to use as it is? Also, wanted to ask where do you need a hand with this as I would love to contribute to this branch?

Thanks.

[mattheu]

Its actually ready and works well. I'm not aware of any issues. It would be great if you could try it out.

My only concerns were about the interface. I was holding out on merging until I had completed the new styles for MP6 - #116, as once thats done I will have to rewrite the CSS for this.

I'm actually using this on a project already.

[banago]

Wow, this looks really good. Great job @mattheu

I have one remark about the "X Remove Group" button unrelated to sortable. It does not feel right to me. Does not look neat and takes a lot of real estate.

[banago]

Updating several times seems to shuffle the results. I don't want to mess to much because this is a live site.

[mattheu]

I have one remark about the "X Remove Group" button unrelated to sortable. It does not feel right to me. Does not look neat and takes a lot of real estate.

Is this a repeatable group that isn't sortable? Agreed - its a tricky one. I have refined it a little in the stuff I did for MP6

Updating several times seems to shuffle the results. I don't want to mess to much because this is a live site.

I am a little concerned by this... it shouldn't be happening. The results of the sortable field were shuffled? Could you post your code and I can look into it.

[banago]

It was shuffled in both backend and front-end. I just kept hitting update, until it got the the desired initial view I saved. Here is the code:

$groups_and_cols = array(
    array( 'id' => 'image', 'name' => 'Image', 'type' => 'image', 'size' => 'folio', 'cols' => 3 ),
    array( 'id' => 'shooter', 'name' => 'Photographer', 'type' => 'text', 'cols' => 3 ),
    array( 'id' => 'client', 'name' => 'Client', 'type' => 'text', 'cols' => 3 ),
    array( 'id' => 'role', 'name' => 'Role', 'type' => 'text', 'cols' => 3 ),
);

$meta_boxes[] = array(
    'title' => 'Slider Media',
    'pages' => 'page',
    'fields' => array(
        array( 
            'id' => '_jb_slider', 
            'name' => 'Slider details', 
            'type' => 'group', 
            'repeatable' => true,
            'sortable' => true,
            'fields' => $groups_and_cols,
        )
    )
);

[pdubb-sauce]

I encountered the same issues, as the crucial function cmb_fix_meta_query_order() was missing from the zip file I downloaded here from github.

Admittedly I am very new to how github works, with forks & pull requests and such, but I'm trying to put it together as best as I can.

I'm such a novice here on github that I can't actually remember where I found the function cmb_fix_meta_query_order(), but once I included that function in my custom-meta-boxes.php file, repeatable & sortable ordering became 100% consistent. Hope that helps.

[mattheu]

Thanks @pdubb-sauce. Looks like the fix for this bug was lost in a merge conflict - #92

@banago - your issue should be fixed now.

[banago]

Tested - works perfect. Thanks @mattheu - great job!

[banago]

I think it's now safe to merge this branch into the master branch.

[bearded-avenger]

sup fellas! excited to see this come about. i'm unable to get this to work though. any thoughts? I'm expecting the iterated option fields to be sortable with drag/drop. Just want to make sure I'm expecting the results of what was intended here lol.

https://gist.github.com/bearded-avenger/7828033

[bearded-avenger]

disregard had the wrong branch ;)

[bearded-avenger]

I am however getting a small css glitch with that setup above:
http://screencast.com/t/RgFRJdv0jv7

Using image upload together with WYSIWYG.

Adding a left clear to .cmb-row fixes it.

edit

also, unless I'm missing it, there appears to be no option to delete a group?

[willmot]

Sweeeeeeet!