Reply To: Create a generic "group" layout field type

• JakeSiemer

• December 10, 2015 at 3:07 am

I was able to solve this by not re-inventing the wheel.

What I did was simply use the Repeater field, but I added some JavaScript to auto-add the first row if the field’s minimum is set to a negative number and there are no rows added…

/*! FLEXIBLE/REPEATER: AUTO-ADD ITEM IF EMPTY **/
acf.add_action('ready append', function($body){
  var $fields = $body.find('.acf-field-flexible-content, .acf-field-repeater');
  var $target = $fields.find('.acf-flexible-content, .acf-repeater').filter('.empty, .-empty').filter(function(){
    if ($(this).data('min') !== 0 && $(this).parents('.clones, .acf-clone').length === 0) {
      return true;
    }
  });
  if ($target.length > 0) {
    var $button = $target.find('> ul').find('> li').find('> .acf-button').filter('[data-event="add-layout"], [data-event="add-row"]');
    $button.click();
  }
});

Then I added some CSS to hide all the functionality on the Repeater field itself (so I hide the add, remove, collapse buttons).

/*! ACF: FAUX FLEXIBLE/REPEATER */
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > ul > li > .acf-button,
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > .layout > .acf-fc-layout-handle,
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > .layout > .acf-fc-layout-controlls,
.acf-field-repeater .acf-repeater[data-min^="-"] > ul > li > .acf-button,
.acf-field-repeater .acf-repeater[data-min^="-"] > table > tbody > tr > .acf-row-handle {
  display: none;
}

.acf-field-repeater .acf-repeater[data-min^="-"] > table > tbody > tr > .acf-fields {
  border-left-width: 0;
}

Now I have the ability to group my content by leveraging the Repeater field! I’m not going to lie, the CSS may not be 100% complete — it works for my scenario, but there may be other scenarios I haven’t tested yet.