CMB2 additional fields working and live!

CMB2 additional fields updated.

I’ve pushed the latest update to cmb2-tad-fields and finally got the nestable lists working as intended.
I’m not doing the same work twice and will blatantly copy and paste the readme here.
Some refactoring of the code and a review of the CSS is in order but the big part is done.

  • select2 - a select2 based select control.
  • nestable_list - a jquery-nestable based sortable and nestable list.
  • dual_nestable_list - a jquery-nestable based sortable and nestable combination of two lists that allows dragging elements from a “source” list to the “destination” list.

Field Types

A code example of the usage and set up of each additional field type can be found in the examples.php file. Uncomment its inclusion in the main plugin file to see a demo of the fields in the page post type edit screen.


This is just a select field powered by the Select2 plugin and requires no special set up for it to work but the specification of the select2 field type.

$cmb->add_field( array(
    'name'    => __( 'Select2', 'tad_cmb2' ),
    'desc'    => __( 'Type some letters to have select2 autocomplete kick in!', 'tad_cmb2' ),
    'id'      => $prefix . 'select2',
    'type'    => 'select2',
    'options' => array(
        'Tony Penrod',
        'Columbus Stiffler',
        'Kelsi Bucklin',
        'Leticia Beecher',
        'Devora Gearing'
) );

Nestable List

A jquery-nestable powered nestable list that will allow any feature allowed by the jQuery plugin, will save the state of order and nesting created by the user.
To allow for the nestable list to properly work some options must be provided:

  • list_group - specifying this value allows for elements to be moved from different lists. Defaults to 0.
  • primary_key - an attribute of each element in the list that must be set and unique.

To set the list options must be provided in a specific format: each element in the list is an array, each array contains a different value for the primary_key; if a text value is set the list element will sport that text as label. Each additional field will be stored as a data-* attribute on the list element and saved along with it.

$cmb->add_field( array(
    'name'        => __( 'Nestable list', 'tad_cmb2' ),
    'desc'        => __( 'Click and drag the elements to sort and nest them!', 'tad_cmb2' ),
    'id'          => $prefix . 'nestable_list',
    'type'        => 'nestable_list',
    'list_group'  => 1,
    'primary_key' => 'id',
    'options'     => array(
        // any attribute below will be translated in a `data-*` attribute.
        // the `text` attribute will also be used as the element label
        array( 'id'   => 1, 'text' => 'One' ),
        array( 'id'   => 2, 'text' => 'Two' ),
        array( 'id'   => 3, 'text' => 'Three' ),
        array( 'id'   => 4, 'text' => 'Four' ),
        array( 'id'   => 5, 'text' => 'Five' ),
        array( 'id'   => 6, 'text' => 'Six' )
) );

Elements alignment

While the example above might be the case hardcoded lists will be a rare sight; to cope with the dynamic nature of lists elements will be “aligned” on each refresh. This means that if a list was provided 8 elements from a function that’s providing 6 now the no more existing two elements will be removed and the list will make the best effort to keep coherency:

  • elements will be removed
  • child elements of a removed element will be assigned to the parent of the removed element

The best way to understand this is to “play” with the examples.php file.

Dual Nestable List

A jquery-nestable powered dual nestable list replicating the functions of the single nestable list above with a twist. The idea behind the list is to have a “source” list of elements, the one set using the options and a “destination” list, initially empty, the user will “fill” with chosen elements from the “source” one.
The saved value will be the one of the “destination” list; play with the examples.php file for better understanding.