Fixed action to refresh layout_title hook

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.2
+ * Version: 1.2.1
  * Author: Edir Pedro
  * Author URI: http://edirpedro.com.br
  * License: GPL2

readme.txt

@@ -3,7 +3,7 @@ Contributors: edir
 Tags: acf, advanced-custom-field, flexible-content
 Requires at least: 4.5.2
 Tested up to: 4.9.7
-Stable tag: 1.2
+Stable tag: 1.2.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -33,9 +33,13 @@ If you want to name each of the flexible content layout, you can use the ACF hoo
 
 == Changelog ==
 
+= 1.2.1 =
+* Fixed action to refresh layout_title hook.
+* CSS improves
+
 = 1.2 =
 * Rebuild to support ACF 5.7 and organize the code
-* Adding a new layout now pops up the modal from that layout (ACF 5.7+)
+* Adding a new layout now pops up the modal from that layout (1.2+ only)
 
 = 1.1.5 =
 * Added a feature to indicate which FC layout field have error messages.

script.js

@@ -10,6 +10,7 @@
 			}
 
 			// Add modal to current layouts
+
 			acf.addAction('load_field/type=flexible_content', function(field) {
 				field.$el.find('.layout:not(.acf-clone):not(.fc-modal)').each(function() {
 					var $layout = $(this);
@@ -19,30 +20,35 @@
 			});
 
 			// Add modal to new layouts
+
 			acf.addAction('after_duplicate', function($clone, $el) {
 				if($el.is('.layout') && !ACFFCM.isNested($clone))
 					ACFFCM.addModal($el);
 			});
 
 			// Automatically open the new layout after append it, to improve usability
+
 			acf.addAction('append', function($el) {
 				if($el.is('.layout'))
 					$el.find('> .acf-fc-layout-controls a.-pencil').trigger('click');
 			});
 
 			// Point error messages inside FC
+
 			acf.addAction('invalid_field', function(field) {
 				ACFFCM.invalidField(field.$el);
 			});
 
 			// Remove error messages
+
 			acf.addAction('valid_field', function(field) {
 				ACFFCM.validField(field.$el);
 			});
 
 		},
 
 		// Check for nested FC fields to do not include a modal in it
+
 		isNested: function($layout) {
 
 			return $layout.parents('.acf-fields').length > 1;
@@ -55,15 +61,18 @@
 			$layout.removeClass('-collapsed');
 
 			// Remove collapse button and click event
+
 			$layout.find('> .acf-fc-layout-handle').off('click');
 			$layout.find('> .acf-fc-layout-controls > a.-collapse').remove();
 
 			// Edit button
+
 			var edit = $('<a class="acf-icon -pencil small light" href="#" data-event="edit-layout" title="Edit layout" />');
 			edit.on('click', ACFFCM.open);
 			$layout.find('> .acf-fc-layout-controls').append(edit);
 
 			// Add modal elements
+
 			$layout.prepend('<div class="acf-fc-modal-title" />');			
 			$layout.find('> .acf-fields, > .acf-table').wrapAll('<div class="acf-fc-modal-content" />');
 
@@ -74,7 +83,7 @@
 			var $layout = $(this).parents('.layout');
 
 			var caption = $layout.find('> .acf-fc-layout-handle').html();
-			var a = $('<a class="acf-icon -cancel" />').on('click', ACFFCM.close);
+			var a = $('<a class="dashicons dashicons-no -cancel" />').on('click', ACFFCM.close);
 
 			$layout.find('.acf-fc-modal-title').html(caption).append(a);
 			$layout.addClass('-modal');
@@ -88,7 +97,13 @@
 		close: function() {
 
 			// Refresh layout title
-			$('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click();
+
+			var modal = $('.acf-flexible-content .layout.-modal');
+			var fc = modal.parents('.acf-field-flexible-content');
+			fc = acf.getField(fc.attr('data-key'));
+			fc.closeLayout(fc.$layout(modal.index()));
+
+			// Close
 
 			$('body').removeClass('acf-modal-open');
 			$('.acf-flexible-content .layout').removeClass('-modal');

style.css

@@ -34,9 +34,6 @@
 
 /* Modal
 ------------------------------------------------------------*/
-body.acf-modal-open {
-	overflow: hidden;	
-}
 
 #acf-flexible-content-modal-overlay {
 	background: #000;
@@ -74,19 +71,34 @@ body.acf-modal-open {
 }
 
 .acf-flexible-content .layout .acf-fc-modal-title {
+	position: relative;
 	display: none;
 	box-sizing: border-box;
 	height: 37px;
 	line-height: 37px;
-	padding: 0 10px;
+	padding: 0 40px 0 10px;
 	background: #eee;
 	border-bottom: 1px solid #dfdfdf;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.acf-flexible-content .layout .acf-fc-modal-title > .acf-icon {
+.acf-flexible-content .layout .acf-fc-modal-title > .-cancel {
 	cursor: pointer;
-	float: right;
-	top: 4px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: block;
+	width: 37px;
+	height: 37px;
+	color: #666;
+	line-height: 37px;
+	text-align: center;
+}
+
+.acf-flexible-content .layout .acf-fc-modal-title > .-cancel:hover {
+	color: #F55E4F;
 }
 
 .acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order {
@@ -106,7 +118,7 @@ body.acf-modal-open {
 	border: none !important;
 }
 
-.acf-icon.-pencil:before {
+.acf-icon.-pencil::before {
 	font-size: 12px;	
 }