From 2cfc391d40a6b1c2ecd073e691c9ecd44309865b Mon Sep 17 00:00:00 2001
From: Alex S <17275120+AlexGStapleton@users.noreply.github.com>
Date: Thu, 23 Nov 2023 00:52:03 +1300
Subject: [PATCH] Beaver Builder: Switch Color Fields to a Color Input

---
 base/js/admin.js                  | 11 ++++++++++-
 compat/beaver-builder/styles.less | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/base/js/admin.js b/base/js/admin.js
index 3bbb10109..7681cb40e 100644
--- a/base/js/admin.js
+++ b/base/js/admin.js
@@ -264,9 +264,18 @@ var sowbForms = window.sowbForms || {};
 			// For any repeater items currently in existence
 			$el.find('.siteorigin-widget-field-repeater-item').sowSetupRepeaterItems();
 
-			// Set up any color fields
+			var canSetupColorPicker = typeof jQuery.fn.wpColorPicker !== 'undefined';
+			// Set up any color fields.
 			$fields.find( '> .siteorigin-widget-input-color' ).each( function() {
 				var $colorField = $( this );
+
+				if ( ! canSetupColorPicker ) {
+					// We can't load the color picker, so let's convert the field to a color input.
+					$colorField.attr( 'type' , 'color' );
+
+					return;
+				}
+
 				var colorResult = ''
 				var alphaImage = '';
 
diff --git a/compat/beaver-builder/styles.less b/compat/beaver-builder/styles.less
index 60afc1369..86aad1fcd 100644
--- a/compat/beaver-builder/styles.less
+++ b/compat/beaver-builder/styles.less
@@ -41,7 +41,20 @@
 		}
 
 		input.siteorigin-widget-input-color {
-			height: inherit !important;
+			border: none;
+			height: 20px;
+			padding: 0;
+			width: 40px;
+
+			&::-moz-color-swatch-wrapper,
+			&::-webkit-color-swatch-wrapper {
+			    padding: 0;
+			}
+
+			&::-moz-color-swatch,
+			&::-webkit-color-swatch {
+			    border: none;
+			}
 		}
 
 		input.siteorigin-widget-input-measurement {