Update latest version

Author: cbravobernal

assets/src/js/pro/_acf-field-flexible-content.js

@@ -332,9 +332,16 @@
 
 			// within layout
 			var $layout = null;
-			if ( $el.hasClass( 'acf-icon' ) ) {
+			// Check the context data attribute to determine how to handle the add
+			if ( $el.data( 'context' ) === 'layout' ) {
 				$layout = $el.closest( '.layout' );
 				$layout.addClass( '-hover' );
+			} else if ( $el.data( 'context' ) === 'top-actions' ) {
+				$layout = $el
+					.closest( '.acf-flexible-content' )
+					.find( '.values .layout' )
+					.first();
+				$layout.addClass( '-hover' );
 			}
 
 			// new popup

assets/src/sass/pro/acf-pro-input.scss

@@ -362,7 +362,8 @@ html[dir=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-
   display: flex
 }
 
-.acf-flexible-content .layout>.acf-fields {
+.acf-flexible-content .layout>.acf-fields,
+.acf-flexible-content .layout>.acf-table {
   border: 1px solid rgba(0, 0, 0, 0);
   border-top: none
 }
@@ -422,7 +423,8 @@ html[dir=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-
   box-shadow: 0 0 0 1px #fff
 }
 
-.acf-flexible-content .layout.active-layout>.acf-fields {
+.acf-flexible-content .layout.active-layout>.acf-fields,
+.acf-flexible-content .layout.active-layout>.acf-table {
   background: rgba(56, 88, 233, .04);
   border: 1px solid rgba(56, 88, 233, .2)
 }
@@ -449,8 +451,8 @@ html[dir=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-
   display: none;
 }
 .acf-flexible-content .layout > .acf-table {
-  border: 0 none;
   box-shadow: none;
+  box-sizing: border-box;
 }
 .acf-flexible-content .layout > .acf-table > tbody > tr {
   background: #fff;
@@ -565,8 +567,9 @@ body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fc
   background: #2271b1
 }
 
-body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fields {
-  background: rgba(34, 113, 177, .04)
+body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fields,
+body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-table {
+    background: rgba(34, 113, 177, .04)
 }
 
 .rtl .acf-flexible-content .layout .acf-fc-layout-actions-wrap {
@@ -637,6 +640,9 @@ body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fi
   display: block;
   text-decoration: none;
   position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .acf-fc-popup a:hover {
   color: #2271b1;

includes/fields/FlexibleContent/Layout.php

@@ -201,7 +201,7 @@ private function render_as_table() {
 				</tr>
 			</thead>
 			<tbody>
-				<tr></tr>
+				<tr><?php $this->sub_fields(); ?></tr>
 			</tbody>
 		</table>
 		<?php
@@ -250,7 +250,7 @@ private function action_buttons() {
 				<span class="acf-layout-disabled"><?php esc_html_e( 'Disabled', 'secure-custom-fields' ); ?></span>
 			</div>
 			<div class="acf-fc-layout-controls">
-				<a class="acf-js-tooltip" href="#" data-name="add-layout" title="<?php esc_attr_e( 'Add layout', 'secure-custom-fields' ); ?>"><span class="acf-icon -plus-alt "></span></a>
+				<a class="acf-js-tooltip" href="#" data-name="add-layout" data-context="layout" title="<?php esc_attr_e( 'Add layout', 'secure-custom-fields' ); ?>"><span class="acf-icon -plus-alt "></span></a>
 				<a class="acf-js-tooltip" href="#" data-name="duplicate-layout" title="<?php esc_attr_e( 'Duplicate layout', 'secure-custom-fields' ); ?>"><span class="acf-icon -duplicate-alt"></span></a>
 				<a class="acf-js-tooltip" aria-haspopup="menu" href="#" data-name="more-layout-actions" title="<?php esc_attr_e( 'More layout actions...', 'secure-custom-fields' ); ?>"><span class="acf-icon -more-actions"></span></a>
 				<div class="acf-layout-collapse">

includes/fields/FlexibleContent/Render.php

@@ -199,7 +199,7 @@ private function actions( string $which = '' ) {
 					<?php esc_html_e( 'Collapse All', 'secure-custom-fields' ); ?>
 				</button>
 				<span class="acf-separator"></span>
-				<a class="acf-button button button-primary" href="#" data-name="add-layout">
+				<a class="acf-button button button-primary" href="#" data-name="add-layout" data-context="top-actions">
 					<i class="acf-icon -plus small"></i>
 					<?php echo acf_esc_html( $this->field['button_label'] ); ?>
 				</a>
@@ -208,7 +208,7 @@ private function actions( string $which = '' ) {
 		} else {
 			?>
 			<div class="acf-actions">
-				<a class="acf-button button button-primary" href="#" data-name="add-layout">
+				<a class="acf-button button button-primary" href="#" data-name="add-layout" data-context="bottom-actions">
 					<i class="acf-icon -plus small"></i>
 					<?php echo acf_esc_html( $this->field['button_label'] ); ?>
 				</a>
@@ -227,13 +227,15 @@ private function actions( string $which = '' ) {
 	private function add_layout_menu() {
 		echo '<script type="text-html" class="tmpl-popup"><ul>';
 		foreach ( $this->layouts as $layout ) {
-			$atts = array(
+			$safe_label = acf_esc_html( $layout['label'] );
+			$atts       = array(
 				'href'        => '#',
 				'data-layout' => $layout['name'],
 				'data-min'    => $layout['min'],
 				'data-max'    => $layout['max'],
+				'title'       => $safe_label,
 			);
-			printf( '<li><a %s>%s</a></li>', acf_esc_attrs( $atts ), acf_esc_html( $layout['label'] ) );
+			printf( '<li><a %s>%s</a></li>', acf_esc_attrs( $atts ), $safe_label ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped above.
 		}
 		echo '</ul></script>';
 	}