nested fc bugfix

acf-flexible-content-modal.php

@@ -4,7 +4,7 @@
  * Plugin Name: ACF Flexible Content Modal
  * Description: Make ACF Flexible Content editing the content of each layout using a Modal window.
  * Plugin URI: http://wordpress.org/plugins/acf-flexible-content-modal/
- * Version: 1.1
+ * Version: 1.1.2
  * Author: Edir Pedro
  * Author URI: http://edirpedro.com.br
  * License: GPL2

readme.txt

@@ -2,8 +2,8 @@
 Contributors: edir
 Tags: acf, advanced-custom-field, flexible-content
 Requires at least: 4.5.2
-Tested up to: 4.5.3
-Stable tag: 1.1
+Tested up to: 4.6.1
+Stable tag: 1.1.2
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -27,6 +27,10 @@ The button to collapse the layout's elements will be replaced to a Edit button,
 
 == Changelog ==
 
+= 1.1.2 =
+* Nested FC bugfix.
+* Edit button fix for ACF 5.5.
+
 = 1.1 =
 * Limit width of the modal window to do not create too large fields.
 * All layouts starts collapsed when open the page to edit.

script.js

@@ -20,19 +20,30 @@ jQuery(document).ready(function() {
 // Init Modal
 function acf_fc_modal_init() {
 
-	jQuery('.acf-flexible-content .layout').each(function() {
+	jQuery('.acf-flexible-content .layout:not(.acf-clone)').each(function() {
 		var layout = jQuery(this);
+
+		// Ignoring if it is a nested FC
+		if(layout.parents('.acf-fields').length > 1)
+			return true;
+		else
+			layout.addClass('fc-modal');
 
 		// Remove Toggle button and click event
-		layout.find('.acf-fc-layout-handle').off('click');
-		layout.find('.acf-fc-layout-controlls li:last-child').remove();
+		layout.find('> .acf-fc-layout-handle').off('click');
+		layout.find('> .acf-fc-layout-controlls > li:last-child').remove(); // ACF 5.4
+		layout.find('> .acf-fc-layout-controlls > a:last-child').remove(); // ACF 5.5
 
 		// Edit button
-		layout.find('.acf-fc-layout-controlls').append('<li><a class="acf-icon -pencil small" href="#" data-event="edit-layout" title="Edit layout"></a></li>');
-		layout.find('.acf-fc-layout-controlls a.-pencil').on('click', acf_fc_modal_open);
+		var controls = layout.find('> .acf-fc-layout-controlls');
+		if(controls.is('ul'))
+			controls.append('<li><a class="acf-icon -pencil small" href="#" data-event="edit-layout" title="Edit layout"></a></li>');
+		else
+			controls.append('<a class="acf-icon -pencil small" href="#" data-event="edit-layout" title="Edit layout"></a>');
+		layout.find('> .acf-fc-layout-controlls a.-pencil').on('click', acf_fc_modal_open);
 
 		// Add modal elements
-		if(layout.find('.acf-fc-modal-title').length == 0) {
+		if(layout.find('> .acf-fc-modal-title').length == 0) {
 			layout.prepend('<div class="acf-fc-modal-title"></div>');
 			layout.find('> .acf-fields, > .acf-table').wrapAll('<div class="acf-fc-modal-content"></div>');
 		}
@@ -45,7 +56,8 @@ function acf_fc_modal_init() {
 function acf_fc_modal_open() {
 	var layout = jQuery(this).parents('.layout');
 	if(!layout.hasClass('-modal')) {
-		var caption = layout.find('.acf-fc-layout-handle').html();
+		layout.removeClass('-collapsed');
+		var caption = layout.find('> .acf-fc-layout-handle').html();
 		layout.find('.acf-fc-modal-title').html(caption + '<a class="acf-icon -cancel" href="javascript:acf_fc_modal_remove()">');
 		layout.addClass('-modal');
 		jQuery("body").append("<div id='TB_overlay'></div>");
@@ -57,7 +69,7 @@ function acf_fc_modal_open() {
 // Close Modal
 function acf_fc_modal_remove() {
 	jQuery('body').removeClass('acf-modal-open');
-	jQuery('.acf-flexible-content .layout.-modal .acf-fc-layout-handle').click(); // To reload layout title
+	jQuery('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click(); // To reload layout title
 	jQuery('.acf-flexible-content .layout').removeClass('-modal');
 	jQuery("#TB_overlay").remove();
 }

style.css

@@ -19,11 +19,11 @@
 }
 
 /* All collapsed */
-.acf-flexible-content .layout .acf-fc-layout-handle {
+.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fc-layout-handle {
 	border-bottom-width: 0;
 }
-.acf-flexible-content .layout > .acf-fields,
-.acf-flexible-content .layout > .acf-table {
+.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fields,
+.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-table {
 	display: none;
 }
 
@@ -37,9 +37,9 @@ body.acf-modal-open {
 .acf-flexible-content .layout.-modal {
 	z-index: 100060;
 	position: fixed !important;
-	top: 5vh;
-	left: 0;
-	right: 0;
+	top: 5vh !important;
+	left: 0 !important;
+	right: 0 !important;
 	margin: auto;
 	width: 90vw;
 	max-width: 960px;
@@ -67,25 +67,25 @@ body.acf-modal-open {
 	border-bottom: 1px solid #dfdfdf;
 }
 
-.acf-flexible-content .layout .acf-fc-modal-title .acf-icon {
+.acf-flexible-content .layout .acf-fc-modal-title > .acf-icon {
 	float: right;
 	top: 4px;
 }
 
-.acf-flexible-content .layout .acf-fc-modal-title .acf-fc-layout-order {
+.acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order {
 	background: #ddd;
 }
 
 .acf-flexible-content .layout.-modal .acf-fc-modal-title {
 	display: block;
 }
 
-.acf-flexible-content .layout.-modal .acf-fc-layout-controlls,
-.acf-flexible-content .layout.-modal .acf-fc-layout-handle {
+.acf-flexible-content .layout.-modal > .acf-fc-layout-controlls,
+.acf-flexible-content .layout.-modal > .acf-fc-layout-handle {
 	display: none;
 }
 
-.acf-flexible-content .layout .acf-fc-layout-handle {
+.acf-flexible-content .layout.fc-modal > .acf-fc-layout-handle {
 	border: none !important;
 }