Add column settings to search widget (#2409)

This PR introduces column settings functionality for the Search Widget,
allowing users to configure individual columns and areas within the
search interface. It also addresses #2374, by adding (back) a horizontal
option for columns.

## Todo: 

- [x] Update readme
- [x] Set default to horizontal for backwards compatibility
- [x] Fix keyboard compatibility (make icons visible while tabbing
through
- [x] Add E2E tests

## Changes

✨ **New Features**

- Column Settings: Added ability to configure individual columns in the
search widget with a settings icon
- Column Layout: Added a setting to set how to arrange the fields
(horizontally, vertically) per column

🔧 **Improvements**

- Refactored area actions to use an action hook for better extensibility
- Added horizontal layout support for areas inside columns
- Removed text alignment classes (left, right) from search widget
columns for cleaner styling

🏗️ **Technical Changes**

- Updated **class-search-field-collection.php** with position
configuration support
- Refactored search widget template rendering to respect area and column
settings
- Fixed **gk/gravityview/admin-views/row/after** hook to trigger once
(was running for every column in a row, instead of after all rows were
generated)
- Updated admin JavaScript to handle column settings display
interactions

**Testing**

- Verify column settings icon appears and displays settings on click
- Test area configuration within columns
- Confirm horizontal layout works for areas inside columns
- Ensure search functionality remains intact with new settings


💾 [Build
file](https://www.dropbox.com/scl/fi/v8jxxd51duj40uufk0bcr/gravityview-2.43.3-13e5f74f1.zip?rlkey=db2y4woawz19bv1ej8txhkc8y&dl=1)
(13e5f74).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Per-area layout settings for the Search Bar widget with a Configure
Area Settings button.

* **Improvements**
* Cleaner droppable area headers and actions with smoother show/hide and
RTL support.
* Flexbox-based search widget layouts for reliable column/row behavior
and icon hover animation.
* "Clear all fields" now rendered via an extensible action; visibility
uses CSS classes.

* **Bug Fixes**
* Fixed admin hook parameter ordering and minor JS/form handling issues.

* **Tests**
  * Added E2E and unit tests for search area/column settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: mrcasual

assets/css/admin-views.css

@@ -100,9 +100,27 @@ $gv-overlay-index: 10000;
 		}
 
 		&.is-sortable {
-			.gv-droppable-area-title {
+			.gv-droppable-area-header-title {
 				display: none;
 			}
+			.gv-droppable-area-header {
+				opacity: 0;
+				transition: opacity 200ms ease-out;
+			}
+
+			.gv-droppable-area:hover,
+			.gv-droppable-area:focus-within
+			{
+				> .gv-droppable-area-header {
+					opacity: 1;
+				}
+			}
+
+			.gv-droppable-area:focus-within {
+				> .gv-droppable-area-header {
+					transition: none; // Instant visibility on tab-focus.
+				}
+			}
 		}
 	}
 
@@ -148,7 +166,7 @@ $gv-overlay-index: 10000;
 		}
 
 		&:hover {
-			color: #2271B1;
+			color: $color-blue-50;
 		}
 	}
 
@@ -764,6 +782,11 @@ $gv-overlay-index: 10000;
 		border-radius: 3px;
 		text-decoration: underline;
 	}
+
+	&.gv-hide {
+		opacity: 0;
+		pointer-events: none;
+	}
 }
 
 /** Show spinner cursor while the View is being AJAX updated. **/
@@ -1219,11 +1242,25 @@ hr {
 		clear: both;
 	}
 
-	.gv-droppable-area-title {
-		padding: .5em 0;
-		text-align: left;
+	.gv-droppable-area-header-title {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.gv-droppable-area-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		margin-left: auto;
+	}
 
-		margin: 6px 8px 0 8px;
+	.gv-droppable-area-header {
+		text-align: left;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 8px;
 
 		html[dir=rtl] & {
 			margin: 0 0 6px 12px;
@@ -1239,10 +1276,18 @@ hr {
 			text-transform: none;
 			font-weight: normal;
 		}
+
+		> .clear-all-fields {
+			margin-left: auto; // align the first item to the right.
+		}
+
+		> * + .clear-all-fields {
+			margin-left: 0;
+		}
 	}
 
 	.gv-droppable-area-subtitle {
-		margin: 0.25em 0 0 0;
+		margin: 0;
 		padding: 0;
 		color: #636D77;
 	}
@@ -2528,6 +2573,24 @@ hr {
 /**
  * Search Bar
  */
+a.gv-search-area-settings {
+	display: flex;
+	text-decoration: none;
+	color: inherit;
+	padding: 4px;
+
+	i.dashicons {
+		transition: transform 200ms;
+	}
+
+	&:hover {
+		color: #2271b1;
+		i.dashicons {
+			transform: rotate(30deg);
+		}
+	}
+}
+
 #search-view {
 	display: none;
 

assets/css/scss/admin-views.scss

@@ -3051,14 +3051,13 @@
 		   viewConfiguration.toggleDropMessage();
 	   },
 
-	   toggleRemoveAllFields: function ( e, item ) {
+	   toggleRemoveAllFields: function ( ) {
+		   let has_fields = false;
 
-		   has_fields = false;
-
-		   $( ".active-drop:visible" ).each( function ( index, item ) {
+		   $( ".active-drop:visible" ).each( function ( _index, item ) {
 			   has_fields = ( $( this ).find( '.gv-fields' ).length > 1 );
-			   $( '.clear-all-fields', $( item ).parents('.gv-droppable-area') ).toggle( has_fields );
-		   });
+			   $( '.clear-all-fields', $( item ).parents( '.gv-droppable-area' ) ).toggleClass( 'gv-hide', ! has_fields );
+		   } );
 	   },
 
 	   /**

assets/js/admin-views.js

@@ -178,7 +178,7 @@ function getOutput() {
 
 		// $settings_html will just be hidden inputs if empty. Otherwise, it'll have an <ul>. Ugly hack, I know.
 		// TODO: Un-hack this
-		$hide_settings_link_class = ( empty( $this->item['settings_html'] ) || strpos( $this->item['settings_html'], '<!-- No Options -->' ) > 0 ) ? 'hide-if-js' : '';
+		$hide_settings_link_class = ( empty( $this->item['settings_html'] ) || strpos( $this->item['settings_html'], GravityView_Render_Settings::NO_OPTIONS ) > 0 ) ? 'hide-if-js' : '';
 		$settings_link            = sprintf( '<button class="gv-field-settings %2$s" title="%1$s" aria-label="%1$s"><span class="dashicons-admin-generic dashicons"></span></button>', esc_attr( $settings_title ), $hide_settings_link_class );
 
 		// When a field label is empty, use the Field ID

assets/js/admin-views.min.js

@@ -16,6 +16,13 @@
  */
 
 class GravityView_Render_Settings {
+	/**
+	 * A placeholder when no options are available.
+	 *
+	 * @since $ver$
+	 */
+	public const NO_OPTIONS = '<!-- No Options -->';
+
 	/**
 	 * Registers required filter hooks.
 	 *
@@ -444,7 +451,7 @@ public static function render_field_options( $form_id, $field_type, $template_id
 
 		// If there are no options, return what we got.
 		if ( empty( $option_groups ) ) {
-			return $hidden_fields . '<!-- No Options -->'; // The HTML comment is here for checking if the output is empty in render_label()
+			return $hidden_fields . self::NO_OPTIONS; // The NO OPTIONS marker is here for checking if the output is empty in render_label().
 		}
 
 		$settings_title = esc_attr( sprintf( __( '%s Settings', 'gk-gravityview' ), wp_strip_all_tags( html_entity_decode( $field_label ) ) ) );
@@ -580,6 +587,12 @@ public static function render_field_options( $form_id, $field_type, $template_id
 			);
 
 			$field_settings = sprintf( '<div class="gv-dialog-options--content">%s</div>', $field_settings );
+		} elseif ( 'area' === $field_type ) {
+			$field_settings = sprintf( '<div class="gv-dialog-options--content">%s</div>', $field_settings );
+			$item_details   = sprintf(
+				'<div class="gv-field-details--container"><h3 class="search-field-title"><span>%s</span></h3></div>',
+				$item['label'] ?? ''
+			);
 		} else {
 			$subtitle               = ! empty( $item['subtitle'] ) ? '<div class="subtitle">' . $item['subtitle'] . '</div>' : '';
 			$widget_details_content = Utils::get( $item, 'description', '' );

includes/admin/class-gravityview-admin-view-item.php

@@ -14,14 +14,9 @@
 /** If this file is called directly, abort. */
 
 use GV\Field_Collection;
-use GV\GF_Form;
 use GV\Grid;
 use GV\Plugin;
 use GV\Search\Fields\Search_Field;
-use GV\Search\Fields\Search_Field_All;
-use GV\Search\Fields\Search_Field_Search_Mode;
-use GV\Search\Fields\Search_Field_Submit;
-use GV\Search\Search_Field_Collection;
 use GV\View;
 use GV\Widget_Collection;
 
@@ -101,6 +96,8 @@ function __construct() {
 		add_action( 'gk/gravityview/admin-views/row/before', [ $this, 'render_actions' ], 5, 4 );
 		add_action( 'gk/gravityview/admin-views/view/after-zone', [ $this, 'render_add_row' ], 5, 4 );
 		add_filter( 'gk/gravityview/admin-views/view/is-dynamic', [ $this, 'set_dynamic_areas' ], 0, 4 );
+
+		add_action( 'gk/gravityview/admin-views/area/actions', [ $this, 'add_clear_all_fields_action' ], 0, 6 );
 	}
 
 	/**
@@ -1248,32 +1245,40 @@ function render_active_areas( $template_id, $type, $zone, $rows, $values ) {
                              data-areaid="<?php echo esc_attr( $zone . '_' . $area['areaid'] ); ?>"
                              data-context="<?php echo esc_attr( $zone ); ?>"
                              data-templateid="<?php echo esc_attr( $template_id ); ?>">
-                            <p class="gv-droppable-area-title"
-								<?php
-								if ( 'widget' === $type && empty( $area['subtitle'] ) ) {
-									echo ' style="margin: 0; padding: 0;"';
-								}
-								?>
-                            >
-                                <strong
+                            <div class="gv-droppable-area-header">
+								<div class="gv-droppable-area-header-title">
 									<?php
-									if ( 'widget' === $type ) {
-										echo 'class="screen-reader-text"';
-									}
+									printf(
+										'<strong%s>%s</strong>',
+										'widget' === $type ? ' class="screen-reader-text"' : '',
+										esc_html( $area['title'] )
+									);
 									?>
-                                ><?php echo esc_html( $area['title'] ); ?></strong>
-
-								<?php if ( 'widget' !== $type ) { ?>
-                                    <a class="clear-all-fields alignright" role="button" href="#"
-                                       data-areaid="<?php echo esc_attr( $zone . '_' . $area['areaid'] ); ?>"><?php esc_html_e( 'Clear all fields',
-											'gk-gravityview' ); ?></a>
-								<?php } ?>
-
-								<?php if ( ! empty( $area['subtitle'] ) ) { ?>
-                                    <span class="gv-droppable-area-subtitle"><span class="gf_tooltip gv_tooltip tooltip"
-                                                                                   title="<?php echo esc_attr( $area['subtitle'] ); ?>"></span></span>
-								<?php } ?>
-                            </p>
+
+									<?php if ( ! empty( $area['subtitle'] ) ) { ?>
+										<span class="gv-droppable-area-subtitle">
+											<span class="gf_tooltip gv_tooltip tooltip" title="<?php echo esc_attr( $area['subtitle'] ); ?>"></span>
+										</span>
+									<?php } ?>
+								</div>
+								<div class="gv-droppable-area-header-actions">
+									<?php
+									/**
+									 * @action Modifies the area actions in the admin View editor.
+									 *
+									 * @since  $ver$
+									 *
+									 * @param array  $area        The current area configuration.
+									 * @param string $type        The type of area (e.g., 'widget', 'field').
+									 * @param array  $values      The values in the area.
+									 * @param bool   $is_dynamic  Whether the area is dynamic.
+									 * @param string $template_id The ID of the template being used.
+									 * @param string $zone        The zone where the area is located.
+									 */
+									do_action( 'gk/gravityview/admin-views/area/actions', $area, $type, $values, $is_dynamic, $template_id, $zone );
+									?>
+								</div>
+                            </div>
                             <div class="active-drop-container active-drop-container-<?php echo esc_attr( $type ); ?>">
                                 <div class="active-drop active-drop-<?php echo esc_attr( $type ); ?>"
                                      data-areaid="<?php echo esc_attr( $zone . '_' . $area['areaid'] ); ?>">
@@ -1381,22 +1386,22 @@ function render_active_areas( $template_id, $type, $zone, $rows, $values ) {
 					<?php endforeach; ?>
                 </div>
 				<?php
-				/**
-				 * Triggers after a row is rendered in the View editor.
-				 *
-				 * @since  2.31.0
-				 *
-				 * @action `gk/gravityview/admin-views/row/before`
-				 *
-				 * @param bool   $is_dynamic  Whether the area is dynamic.
-				 * @param View   $view        The View.
-				 * @param string $template_id The template ID.
-				 * @param string $type        The object type (widget or field).
-				 * @param string $zone        The render zone.
-				 */
-				do_action( 'gk/gravityview/admin-views/row/after', $is_dynamic, $view, $template_id, $type, $zone );
-
 			endforeach;
+			/**
+			 * Triggers after a row is rendered in the View editor.
+			 *
+			 * @since  2.31.0
+			 *
+			 * @action `gk/gravityview/admin-views/row/before`
+			 *
+			 * @param bool   $is_dynamic  Whether the area is dynamic.
+			 * @param View   $view        The View.
+			 * @param string $template_id The template ID.
+			 * @param string $type        The object type (widget or field).
+			 * @param string $zone        The render zone.
+			 */
+			do_action( 'gk/gravityview/admin-views/row/after', $is_dynamic, $view, $template_id, $type, $zone );
+
 			echo '</div>';
 		endforeach;
 	}
@@ -2160,6 +2165,30 @@ private function is_dynamic( string $template_id, string $type, string $zone ):
 		 */
 		return (bool) apply_filters( 'gk/gravityview/admin-views/view/is-dynamic', false, $template_id, $type, $zone );
 	}
+
+	/**
+	 * Renders a "Clear all fields" button in the View configuration.
+	 *
+	 * @since $ver$
+	 *
+	 * @param array  $area        The area.
+	 * @param string $type        The type.
+	 *
+	 * @param bool   $is_dynamic  Whether the zone is dynamic.
+	 * @param string $template_id The template ID.
+	 * @param string $zone        The zone.
+	 */
+	public function add_clear_all_fields_action( $area, $type, $values, $is_dynamic, $template_id, $zone ): void {
+		if ( 'widget' === $type ) {
+			return;
+		}
+
+		printf(
+			'<a class="clear-all-fields" role="button" href="#" data-areaid="%s">%s</a>',
+			esc_attr( $zone . '_' . $area['areaid'] ),
+			esc_html__( 'Clear all fields', 'gk-gravityview' )
+		);
+	}
 }
 
 GravityView_Admin_Views::get_instance();