Update to Kirki 4.2.0

functions/kirki/kirki-packages/control-color-palette/dist/control.css

@@ -0,0 +1,2 @@
+.customize-control-kirki-color-palette,.customize-control-kirki-color-palette *{box-sizing:border-box}.customize-control-kirki-color-palette .kirki-control-label{display:block;position:relative}.customize-control-kirki-color-palette .kirki-control-form{margin-bottom:6px;position:relative}.customize-control-kirki-color-palette .kirki-control-form:hover .kirki-control-reset{opacity:1}.customize-control-kirki-color-palette .kirki-control-reset{align-items:center;background-color:transparent;border-radius:50%;border-width:0;color:#50575e;cursor:pointer;display:flex;height:20px;justify-content:center;opacity:0;padding:0;position:absolute;right:0;top:0;transition:all .3s;width:20px;z-index:3}.customize-control-kirki-color-palette .kirki-control-reset:focus{opacity:1}.customize-control-kirki-color-palette .kirki-control-reset:hover i{color:red;transform:rotate(-45deg)}.customize-control-kirki-color-palette .kirki-control-reset i{font-size:12px;height:auto;transform:rotate(45deg);transition:transform .3s;width:auto}.customize-control-kirki-color-palette .kirki-colors{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;width:100%}.customize-control-kirki-color-palette .kirki-colors.kirki-round-colors .kirki-color div{border-radius:50%}.customize-control-kirki-color-palette .kirki-color{display:block;margin:0 11px 11px 0;padding:0;position:relative}.customize-control-kirki-color-palette .kirki-color:last-child{padding-right:0}.customize-control-kirki-color-palette .kirki-color>div{align-items:center;border:1px solid #dedede;border-radius:4px;cursor:pointer;display:flex;height:100%;justify-content:center;position:absolute;transform:scale(1);transition:transform .2s;width:100%}.customize-control-kirki-color-palette .kirki-color>div:hover{transform:scale(1.2)}.customize-control-kirki-color-palette .kirki-color.is-selected>div{border-color:#2271b1;border-width:4px}
+/*# sourceMappingURL=control.css.map */

functions/kirki/kirki-packages/control-color-palette/dist/control.js

@@ -0,0 +1,2 @@
+(()=>{var t={};t=React;var e=e=>{const{control:o,customizerSetting:n,choices:i}=e,[a,c]=t.useState(e.value);o.updateComponentState=t=>{c(t)};const r=t=>{n.set(t.target.title)},s=i.size+2;return React.createElement("div",{className:"kirki-control-form",tabIndex:"1"},React.createElement("label",{className:"kirki-control-label"},React.createElement("span",{className:"customize-control-title"},e.label),React.createElement("span",{className:"customize-control-description description",dangerouslySetInnerHTML:{__html:e.description}})),React.createElement("div",{className:"customize-control-notifications-container",ref:e.setNotificationContainer}),React.createElement("button",{type:"button",className:"kirki-control-reset",onClick:()=>{""!==e.default&&void 0!==e.default?n.set(e.default):n.set(e.value)}},React.createElement("i",{className:"dashicons dashicons-image-rotate"})),React.createElement("ul",{className:"kirki-colors kirki-"+i.shape+"-colors"},i.colors.map(((t,e)=>{const o=t===a?"kirki-color is-selected":"kirki-color";return React.createElement("li",{key:e.toString(),className:o,style:{width:s+"px",height:s+"px"}},React.createElement("div",{title:t,style:{backgroundColor:t},onClick:r}))}))))};function o(){return o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},o.apply(this,arguments)}var n=wp.customize.Control.extend({initialize:function(t,e){const o=this;o.setNotificationContainer=o.setNotificationContainer.bind(o),wp.customize.Control.prototype.initialize.call(o,t,e),wp.customize.control.bind("removed",(function t(e){o===e&&(o.destroy(),o.container.remove(),wp.customize.control.unbind("removed",t))}))},setNotificationContainer:function(t){this.notifications.container=jQuery(t),this.notifications.render()},renderContent:function(){const t=this;ReactDOM.render(React.createElement(e,o({},t.params,{control:t,customizerSetting:t.setting,setNotificationContainer:t.setNotificationCotainer,value:t.params.value})),t.container[0]),!1!==t.params.choices.allowCollapse&&t.container.addClass("allowCollapse")},ready:function(){const t=this;t.setting.bind((e=>{t.updateComponentState(e)}))},updateComponentState:t=>{},destroy:function(){ReactDOM.unmountComponentAtNode(this.container[0]),wp.customize.Control.prototype.destroy&&wp.customize.Control.prototype.destroy.call(this)}});wp.customize.controlConstructor["kirki-color-palette"]=n})();
+//# sourceMappingURL=control.js.map

functions/kirki/kirki-packages/control-color-palette/src/Control/Color_Palette.php

@@ -0,0 +1,123 @@
+<?php
+/**
+ * The slider control.
+ *
+ * Creates a slider control.
+ *
+ * @package kirki-framework/control-slider
+ * @license MIT (https://oss.ninja/mit?organization=Kirki%20Framework)
+ * @since   1.0
+ */
+
+namespace Kirki\Control;
+
+use Kirki\Control\Base;
+use Kirki\URL;
+
+/**
+ * Color Palette control.
+ *
+ * @since 1.0
+ */
+class Color_Palette extends Base {
+
+	/**
+	 * The control type.
+	 *
+	 * @since 1.0
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'kirki-color-palette';
+
+	/**
+	 * The control version.
+	 *
+	 * @since 1.0
+	 * @access public
+	 * @var string
+	 */
+	public static $control_ver = '1.0';
+
+	/**
+	 * Enqueue control related styles/scripts.
+	 *
+	 * @since 1.0
+	 * @access public
+	 */
+	public function enqueue() {
+
+		parent::enqueue();
+
+		// Enqueue the style.
+		wp_enqueue_style( 'kirki-color-palette-control', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
+
+		// Enqueue the script.
+		wp_enqueue_script( 'kirki-color-palette-control', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-controls', 'customize-base', 'react-dom' ], self::$control_ver, false );
+
+	}
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @see WP_Customize_Control::to_json()
+	 *
+	 * @since 1.0
+	 * @access public
+	 */
+	public function to_json() {
+
+		parent::to_json();
+
+		if ( isset( $this->json['label'] ) ) {
+			$this->json['label'] = html_entity_decode( $this->json['label'] );
+		}
+
+		if ( isset( $this->json['description'] ) ) {
+			$this->json['description'] = html_entity_decode( $this->json['description'] );
+		}
+
+		$this->json['value'] = strtolower( $this->json['value'] );
+
+		$choices = $this->json['choices'];
+
+		$this->json['choices'] = wp_parse_args(
+			$choices,
+			[
+				'shape'  => 'square',
+				'size'   => 28,
+				'colors' => [],
+			]
+		);
+
+		$this->json['choices']['colors'] = array_map( 'strtolower', $this->json['choices']['colors'] );
+
+		if ( isset( $choices['style'] ) && ! empty( $choices['style'] ) ) {
+			if ( ! isset( $choices['shape'] ) || empty( $choices['shape'] ) ) {
+				$this->json['choices']['shape'] = $choices['style'];
+			}
+
+			unset( $this->json['choices']['style'] );
+		}
+
+		if ( ! is_numeric( $this->json['choices']['size'] ) ) {
+			$this->json['choices']['size'] = 28;
+		}
+
+		$this->json['choices']['shape'] = 'circle' === $this->json['choices']['shape'] ? 'round' : $this->json['choices']['shape'];
+
+	}
+
+	/**
+	 * An Underscore (JS) template for this control's content (but not its container).
+	 *
+	 * Class variables for this control class are available in the `data` JS object;
+	 * export custom variables by overriding WP_Customize_Control::to_json().
+	 *
+	 * @see WP_Customize_Control::print_template()
+	 *
+	 * @since 1.0
+	 */
+	protected function content_template() {}
+
+}

functions/kirki/kirki-packages/control-color-palette/src/Field/Color_Palette.php

@@ -0,0 +1,147 @@
+<?php
+/**
+ * Override field methods.
+ *
+ * @package kirki-framework/control-slider
+ * @license MIT (https://oss.ninja/mit?organization=Kirki%20Framework)
+ * @since   1.0
+ */
+
+namespace Kirki\Field;
+
+use Kirki\Field;
+
+/**
+ * Field overrides.
+ *
+ * @since 1.0
+ */
+class Color_Palette extends Field {
+
+	/**
+	 * The field type.
+	 *
+	 * @since 1.0
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'kirki-color-palette';
+
+	/**
+	 * The control class-name.
+	 *
+	 * @since 1.0
+	 * @access protected
+	 * @var string
+	 */
+	protected $control_class = '\Kirki\Control\Color_Palette';
+
+	/**
+	 * Whether we should register the control class for JS-templating or not.
+	 *
+	 * @since 1.0
+	 * @access protected
+	 * @var bool
+	 */
+	protected $control_has_js_template = true;
+
+	/**
+	 * Filter arguments before creating the setting.
+	 *
+	 * @param array                 $args The field arguments.
+	 * @param \WP_Customize_Manager $wp_customize The customizer instance.
+	 *
+	 * @return array $args The maybe-filtered arguments.
+	 */
+	public function filter_setting_args( $args, $wp_customize ) {
+
+		if ( $args['settings'] === $this->args['settings'] ) {
+			$args = parent::filter_setting_args( $args, $wp_customize );
+
+			// Set the sanitize_callback if none is defined.
+			if ( ! isset( $args['sanitize_callback'] ) || ! $args['sanitize_callback'] ) {
+				$args['sanitize_callback'] = [ __CLASS__, 'sanitize' ];
+			}
+		}
+
+		return $args;
+
+	}
+
+	/**
+	 * Filter arguments before creating the control.
+	 *
+	 * @param array                 $args The field arguments.
+	 * @param \WP_Customize_Manager $wp_customize The customizer instance.
+	 *
+	 * @return array $args The maybe-filtered arguments.
+	 */
+	public function filter_control_args( $args, $wp_customize ) {
+
+		if ( $args['settings'] === $this->args['settings'] ) {
+			$args         = parent::filter_control_args( $args, $wp_customize );
+			$args['type'] = 'kirki-color-palette';
+		}
+
+		return $args;
+
+	}
+
+	/**
+	 * Sanitize colors.
+	 *
+	 * @static
+	 * @access public
+	 * @since 1.0.2
+	 * @param string $value The color.
+	 * @return string
+	 */
+	public static function sanitize( $value ) {
+
+		/**
+		 * This pattern will check and match 3/6/8-character hex, rgb, rgba, hsl, hsla, hsv, and hsva colors.
+		 *
+		 * RGB regex:
+		 * @link https://stackoverflow.com/questions/9585973/javascript-regular-expression-for-rgb-values#answer-9586045
+		 *
+		 * For testing it, you can use these links:
+		 *
+		 * @link https://regex101.com/
+		 * @link https://regexr.com/
+		 * @link https://www.regextester.com/
+		 *
+		 * How to test it?
+		 *
+		 * Paste the following code to the test field (of course without the asterisks and spaces in front of them):
+		 * rgba(255, 255, 0, 0.9)
+		 * rgb(255, 255, 0)
+		 * #ff0
+		 * #ffff00
+		 * hsl(150, 25%, 25%)
+		 * hsla(250, 25%, 25%, 0.7)
+		 * hsv(125, 15%, 30%)
+		 * hsva(125, 15%, 30%, 0.5)
+		 *
+		 * And then paste the regex `$pattern` below (without the single quote's start and end) to the regular expression box.
+		 * Set the flag to use "global" and "multiline".
+		 */
+		$pattern = '/^(\#[\da-f]{3}|\#[\da-f]{6}|\#[\da-f]{8}|rgba\(((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*,\s*){2}((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*)(,\s*(0\.\d+|1))\)|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)|hsla\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)(,\s*(0\.\d+|1))\)|hsl\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)\)|hsva\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)(,\s*(0\.\d+|1))\)|hsv\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)\))$/';
+
+		\preg_match( $pattern, $value, $matches );
+
+		// Return the 1st match found.
+		if ( isset( $matches[0] ) ) {
+			if ( is_string( $matches[0] ) ) {
+				return $matches[0];
+			}
+
+			if ( is_array( $matches[0] ) && isset( $matches[0][0] ) ) {
+				return $matches[0][0];
+			}
+		}
+
+		// If no match was found, return an empty string.
+		return '';
+	}
+
+}

functions/kirki/kirki-packages/control-color-palette/src/KirkiColorPaletteControl.js

@@ -0,0 +1,128 @@
+import KirkiColorPaletteForm from './KirkiColorPaletteForm';
+
+/**
+ * KirkiColorPaletteControl.
+ *
+ * Global objects brought:
+ * - wp
+ * - jQuery
+ * - React
+ * - ReactDOM
+ *
+ * @class
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
+const KirkiColorPaletteControl = wp.customize.Control.extend({
+
+	/**
+	 * Initialize.
+	 *
+	 * @param {string} id - Control ID.
+	 * @param {object} params - Control params.
+	 */
+	initialize: function (id, params) {
+		const control = this;
+
+		// Bind functions to this control context for passing as React props.
+		control.setNotificationContainer = control.setNotificationContainer.bind(control);
+
+		wp.customize.Control.prototype.initialize.call(control, id, params);
+
+		// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.
+		function onRemoved(removedControl) {
+			if (control === removedControl) {
+				control.destroy();
+				control.container.remove();
+				wp.customize.control.unbind('removed', onRemoved);
+			}
+		}
+		wp.customize.control.bind('removed', onRemoved);
+	},
+
+	/**
+	 * Set notification container and render.
+	 *
+	 * This is called when the React component is mounted.
+	 *
+	 * @param {Element} element - Notification container.
+	 * @returns {void}
+	 */
+	setNotificationContainer: function setNotificationContainer(element) {
+		const control = this;
+
+		control.notifications.container = jQuery(element);
+		control.notifications.render();
+	},
+
+	/**
+	 * Render the control into the DOM.
+	 *
+	 * This is called from the Control#embed() method in the parent class.
+	 *
+	 * @returns {void}
+	 */
+	renderContent: function renderContent() {
+		const control = this;
+
+		ReactDOM.render(
+			<KirkiColorPaletteForm
+				{...control.params}
+				control={control}
+				customizerSetting={control.setting}
+				setNotificationContainer={control.setNotificationCotainer}
+				value={control.params.value}
+			/>,
+			control.container[0]
+		);
+
+		if (false !== control.params.choices.allowCollapse) {
+			control.container.addClass('allowCollapse');
+		}
+	},
+
+	/**
+	 * After control has been first rendered, start re-rendering when setting changes.
+	 *
+	 * React is able to be used here instead of the wp.customize.Element abstraction.
+	 *
+	 * @returns {void}
+	 */
+	ready: function ready() {
+		const control = this;
+
+		/**
+		 * Update component value's state when customizer setting's value is changed.
+		 */
+		control.setting.bind((val) => {
+			control.updateComponentState(val);
+		});
+	},
+
+	/**
+	 * This method will be overriden by the rendered component.
+	 */
+	updateComponentState: (val) => { },
+
+	/**
+	 * Handle removal/de-registration of the control.
+	 *
+	 * This is essentially the inverse of the Control#embed() method.
+	 *
+	 * @link https://core.trac.wordpress.org/ticket/31334
+	 * @returns {void}
+	 */
+	destroy: function destroy() {
+		const control = this;
+
+		// Garbage collection: undo mounting that was done in the embed/renderContent method.
+		ReactDOM.unmountComponentAtNode(control.container[0]);
+
+		// Call destroy method in parent if it exists (as of #31334).
+		if (wp.customize.Control.prototype.destroy) {
+			wp.customize.Control.prototype.destroy.call(control);
+		}
+	}
+});
+
+export default KirkiColorPaletteControl;

functions/kirki/kirki-packages/control-color-palette/src/KirkiColorPaletteForm.js

@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+const KirkiColorPaletteForm = (props) => {
+	const { control, customizerSetting, choices } = props;
+
+	const [selectedItem, setSelectedItem] = useState(props.value);
+
+	control.updateComponentState = (val) => {
+		setSelectedItem(val);
+	};
+
+	const handleSelect = (e) => {
+		customizerSetting.set(e.target.title);
+	};
+
+	const handleReset = () => {
+		if ("" !== props.default && "undefined" !== typeof props.default) {
+			customizerSetting.set(props.default);
+		} else {
+			customizerSetting.set(props.value);
+		}
+	};
+
+	const size = choices.size + 2; // 2 here is 1px border on each side.
+
+	return (
+		<div className="kirki-control-form" tabIndex="1">
+			<label className="kirki-control-label">
+				<span className="customize-control-title">{props.label}</span>
+				<span
+					className="customize-control-description description"
+					dangerouslySetInnerHTML={{ __html: props.description }}
+				/>
+			</label>
+
+			<div
+				className="customize-control-notifications-container"
+				ref={props.setNotificationContainer}
+			></div>
+
+			<button
+				type="button"
+				className="kirki-control-reset"
+				onClick={handleReset}
+			>
+				<i className="dashicons dashicons-image-rotate"></i>
+			</button>
+
+			<ul className={"kirki-colors kirki-" + choices.shape + "-colors"}>
+				{choices.colors.map((color, index) => {
+					const itemClassName =
+						color === selectedItem ? "kirki-color is-selected" : "kirki-color";
+
+					return (
+						<li
+							key={index.toString()}
+							className={itemClassName}
+							style={{
+								width: size + "px",
+								height: size + "px",
+							}}
+						>
+							<div
+								title={color}
+								style={{
+									backgroundColor: color,
+								}}
+								onClick={handleSelect}
+							></div>
+						</li>
+					);
+				})}
+			</ul>
+		</div>
+	);
+};
+
+export default KirkiColorPaletteForm;

functions/kirki/kirki-packages/control-color-palette/src/control.js

@@ -0,0 +1,6 @@
+import "./control.scss";
+import KirkiColorPaletteControl from './KirkiColorPaletteControl';
+
+
+// Register control type with Customizer.
+wp.customize.controlConstructor['kirki-color-palette'] = KirkiColorPaletteControl;

functions/kirki/kirki-packages/control-color-palette/src/control.scss

@@ -0,0 +1,115 @@
+// Color palette control.
+.customize-control-kirki-color-palette,
+.customize-control-kirki-color-palette * {
+  box-sizing: border-box;
+}
+
+.customize-control-kirki-color-palette {
+  .kirki-control-label {
+    position: relative;
+    display: block;
+  }
+
+  .kirki-control-form {
+    position: relative;
+    margin-bottom: 6px;
+
+    &:hover {
+      .kirki-control-reset {
+        opacity: 1;
+      }
+    }
+  }
+
+  .kirki-control-reset {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 0;
+    top: 0;
+    position: absolute;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    color: #50575e;
+    background-color: transparent;
+    border-radius: 50%;
+    border-width: 0;
+    opacity: 0;
+    cursor: pointer;
+    transition: all 0.3s;
+    z-index: 3;
+
+    // a11y: support tab focus.
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  .kirki-control-reset:hover i {
+    color: #f00;
+    transform: rotate(-45deg);
+  }
+
+  .kirki-control-reset i {
+    font-size: 12px;
+    width: auto;
+    height: auto;
+    transform: rotate(45deg);
+    transition: transform 0.3s;
+  }
+
+  .kirki-colors {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &.kirki-round-colors {
+      .kirki-color {
+        div {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .kirki-color {
+    position: relative;
+    display: block;
+    margin: 0 11px 11px 0;
+    padding: 0;
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      border: 1px solid #dedede;
+      transform: scale(1);
+      cursor: pointer;
+      transition: transform 0.2s;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    &.is-selected {
+      > div {
+        border-color: #2271b1;
+        border-width: 4px;
+      }
+    }
+  }
+}