AlxMedia/magaziner
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/AlxMedia/magaziner.git synced 2025-08-28 07:31:08 +08:00
Code Issues Projects Packages Wiki Activity Actions

Kirki 4.0.24

Browse source
This commit is contained in:
AlxMedia 2022-05-30 10:01:01 +02:00
parent ad73f534bf
commit 0c3f94312c
39 changed files with 1664 additions and 1315 deletions
Download patch file Download diff file Expand all files Collapse all files

2
functions/kirki/packages/kirki-framework/compatibility/src/Kirki.php
View file

@ -271,7 +271,7 @@ class Kirki extends Init {
// Convert css_vars to output args.
if ( isset( $args['css_vars'] ) ) {
if ( 'postMessage' === $args['transport'] ) {
if ( isset( $args['transport'] ) && 'postMessage' === $args['transport'] ) {
$args['transport'] = 'auto';
}

2
functions/kirki/packages/kirki-framework/compatibility/src/Scripts.php
View file

@ -12,6 +12,8 @@
namespace Kirki\Compatibility;
use Kirki\URL;
/**
* Adds scripts for backwards-compatibility
*

125
functions/kirki/packages/kirki-framework/control-code/src/Control/Code.php Normal file
View file

@ -0,0 +1,125 @@
<?php
/**
* The code editor control.
*
* Creates a code editor control.
*
* @package kirki-framework/control-code
* @license MIT (https://oss.ninja/mit?organization=Kirki%20Framework)
* @since 1.0.2
*/
namespace Kirki\Control;
use Kirki\Control\Base;
/**
* Slider control.
*
* @since 1.0.2
*/
class Code extends Base {
/**
* The control version.
*
* @since 1.0.2
* @access public
* @var string
*/
public static $control_ver = '1.0.2';
/**
* Customize control type.
*
* @since 1.0.2
* @var string
*/
public $type = 'code_editor';
/**
* Type of code that is being edited.
*
* @since 1.0.2
* @var string
*/
public $code_type = '';
/**
* Code editor settings.
*
* @see wp_enqueue_code_editor()
* @since 1.0.2
* @var array|false
*/
public $editor_settings = array();
/**
* Enqueue control related scripts/styles.
*
* @since 1.0.2
*/
public function enqueue() {
$this->editor_settings = wp_enqueue_code_editor(
array_merge(
array(
'type' => $this->code_type,
'codemirror' => array(
'indentUnit' => 2,
'tabSize' => 2,
),
),
$this->editor_settings
)
);
}
/**
* Refresh the parameters passed to the JavaScript via JSON.
*
* @since 1.0.2
*
* @see WP_Customize_Control::json()
*
* @return array Array of parameters passed to the JavaScript.
*/
public function json() {
$json = parent::json();
$json['editor_settings'] = $this->editor_settings;
$json['input_attrs'] = $this->input_attrs;
return $json;
}
/**
* Don't render the control content from PHP, as it's rendered via JS on load.
*
* @since 1.0.2
*/
public function render_content() {}
/**
* Render a JS template for control display.
*
* @since 1.0.2
*/
public function content_template() {
?>
<# var elementIdPrefix = 'el' + String( Math.random() ); #>
<# if ( data.label ) { #>
<label for="{{ elementIdPrefix }}_editor" class="customize-control-title">
{{ data.label }}
</label>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="customize-control-notifications-container"></div>
<textarea id="{{ elementIdPrefix }}_editor"
<# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# }); #>
></textarea>
<?php
}
}

4
functions/kirki/packages/kirki-framework/control-code/src/Field/Code.php
View file

@ -33,7 +33,7 @@ class Code extends Field {
* @since 0.1
* @var string
*/
protected $control_class = '\WP_Customize_Code_Editor_Control';
protected $control_class = '\Kirki\Control\Code';
/**
* Filter arguments before creating the setting.
@ -123,7 +123,7 @@ class Code extends Field {
if ( ! isset( $args['editor_settings']['codemirror']['mode'] ) ) {
$args['editor_settings']['codemirror']['mode'] = $language;
}
if ( 'text/x-scss' === $args['editor_settings']['codemirror']['mode'] ) {
$args['editor_settings']['codemirror'] = array_merge(
$args['editor_settings']['codemirror'],

5
functions/kirki/packages/kirki-framework/control-react-colorful/dist/control.css vendored
View file

File diff suppressed because one or more lines are too long

4
functions/kirki/packages/kirki-framework/control-react-colorful/dist/control.js vendored
View file

File diff suppressed because one or more lines are too long

4
functions/kirki/packages/kirki-framework/control-react-colorful/dist/preview.js vendored
View file

@ -1,2 +1,2 @@
(()=>{const o=o=>"number"==typeof o||"string"==typeof o&&!isNaN(o)&&!isNaN(parseFloat(o));wp.hooks.addFilter("kirkiPostMessageStylesOutput","kirki",((a,e,l,r)=>{if("kirki-react-colorful"!==r)return a;if("string"==typeof e||"number"==typeof e)return a;const s=l.prefix?l.prefix:"",p=l.suffix?l.suffix:"";return a+=l.element+"{"+l.property+": "+s+(a=>(alphaEnabled=!1,a.r||a.g||a.b?(colorMode=void 0!==a.a?"rgba":"rgb",alphaEnabled="rgba"===colorMode||alphaEnabled,pos1=a.r,pos2=a.g,pos3=a.b,pos4="rgba"===colorMode?a.a:1):(a.h||a.s)&&(pos1=a.h,a.l?(colorMode=void 0!==a.a?"hsla":"hsl",pos2=o(a.l)?a.l+"%":a.l):a.v&&(colorMode=void 0!==a.a?"hvla":"hvl",pos2=o(a.v)?a.v+"%":a.v),alphaEnabled="hsla"===colorMode||"hsva"===colorMode||alphaEnabled,pos3=o(a)?a.s+"%":a.s,pos4=alphaEnabled?a.a:1),alphaEnabled?formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+", "+pos4+")":formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+")",formattedValue))(e)+p+";\t\t}",a}))})();
//# sourceMappingURL=preview.js.map
!function(){var o;o=function(o){return"number"==typeof o||"string"==typeof o&&!isNaN(o)&&!isNaN(parseFloat(o))},wp.hooks.addFilter("kirkiPostMessageStylesOutput","kirki",(function(a,e,r,l){if("kirki-react-colorful"!==l)return a;if("string"==typeof e||"number"==typeof e)return a;var s=r.prefix?r.prefix:"",p=r.suffix?r.suffix:"";return a+=r.element+"{"+r.property+": "+s+function(a){return alphaEnabled=!1,a.r||a.g||a.b?(colorMode=void 0!==a.a?"rgba":"rgb",alphaEnabled="rgba"===colorMode||alphaEnabled,pos1=a.r,pos2=a.g,pos3=a.b,pos4="rgba"===colorMode?a.a:1):(a.h||a.s)&&(pos1=a.h,a.l?(colorMode=void 0!==a.a?"hsla":"hsl",pos2=o(a.l)?a.l+"%":a.l):a.v&&(colorMode=void 0!==a.a?"hvla":"hvl",pos2=o(a.v)?a.v+"%":a.v),alphaEnabled="hsla"===colorMode||"hsva"===colorMode||alphaEnabled,pos3=o(a)?a.s+"%":a.s,pos4=alphaEnabled?a.a:1),alphaEnabled?formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+", "+pos4+")":formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+")",formattedValue}(e)+p+";\t\t}",a}))}();
//# sourceMappingURL=preview.js.map

6
functions/kirki/packages/kirki-framework/control-react-colorful/src/Control/ReactColorful.php
View file

@ -42,7 +42,7 @@ class ReactColorful extends Base {
* @since 1.0
* @var string
*/
public static $control_ver = '1.0.14';
public static $control_ver = '1.0.15';
/**
* The color mode.
@ -97,6 +97,10 @@ class ReactColorful extends Base {
// Value.
$this->json['value'] = empty( $this->value() ) ? '' : ( 'hue' === $this->mode ? absint( $this->value() ) : $this->value() );
if ( is_string( $this->json['value'] ) ) {
$this->json['value'] = strtolower( $this->json['value'] );
}
// Mode.
$this->json['mode'] = $this->mode;

2
functions/kirki/packages/kirki-framework/control-react-colorful/src/Field/ReactColorful.php
View file

@ -217,6 +217,8 @@ class ReactColorful extends Field {
*/
public static function sanitize_color_string( $value ) {
$value = strtolower( $value );
/**
* This pattern will check and match 3/6/8-character hex, rgb, rgba, hsl, hsla, hsv, and hsva colors.
*

77
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulCircle.js
View file

@ -2,49 +2,48 @@ import { useState, useEffect } from "react";
import reactCSS from "reactcss";
const KirkiReactColorfulCircle = (props) => {
const { color = "" } = props;
const [value, setValue] = useState(() => color);
const { color = "" } = props;
const [value, setValue] = useState(() => color);
// Update the local state when `color` property value is changed.
useEffect(() => {
// We don't need to convert the color since it's using the customizer value.
setValue(color);
}, [color]);
// Update the local state when `color` property value is changed.
useEffect(() => {
// We don't need to convert the color since it's using the customizer value.
setValue(color);
}, [color]);
const pickersWithAlpha = [
"RgbaColorPicker",
"RgbaStringColorPicker",
"HslaColorPicker",
"HslaStringColorPicker",
"HsvaColorPicker",
"HsvaStringColorPicker",
];
const pickersWithAlpha = [
"RgbaColorPicker",
"RgbaStringColorPicker",
"HslaColorPicker",
"HslaStringColorPicker",
"HsvaColorPicker",
"HsvaStringColorPicker",
];
const styles = reactCSS({
default: {
triggerButton: {
backgroundImage: pickersWithAlpha.includes(props.pickerComponent)
? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'
: "none",
},
colorPreview: {
backgroundColor: value ? value : "transparent",
},
},
});
const styles = reactCSS({
default: {
triggerButton: {
backgroundImage:
'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")',
},
colorPreview: {
backgroundColor: value ? value : "transparent",
},
},
});
return (
<div className="kirki-trigger-circle-wrapper">
<button
type="button"
className="kirki-trigger-circle"
onClick={props.togglePickerHandler}
style={styles.triggerButton}
>
<div className="kirki-color-preview" style={styles.colorPreview}></div>
</button>
</div>
);
return (
<div className="kirki-trigger-circle-wrapper">
<button
type="button"
className="kirki-trigger-circle"
onClick={props.togglePickerHandler}
style={styles.triggerButton}
>
<div className="kirki-color-preview" style={styles.colorPreview}></div>
</button>
</div>
);
};
export default KirkiReactColorfulCircle;

152
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js
View file

@ -2,92 +2,92 @@ import { useState, useEffect, useCallback } from "react";
import reactCSS from "reactcss";
const KirkiReactColorfulInput = (props) => {
const { onChange, color = "" } = props;
const [value, setValue] = useState(() => color);
const { onChange, color = "" } = props;
const [value, setValue] = useState(() => color);
const handleChange = useCallback(
(e) => {
let val = e.target.value;
const handleChange = useCallback(
(e) => {
let val = e.target.value;
if (2 === val.length) {
if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
val = "#" + val;
}
} else if (3 === val.length || 6 === val.length) {
if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
val = "#" + val;
}
}
if (2 === val.length) {
if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
val = "#" + val;
}
} else if (3 === val.length || 6 === val.length) {
if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
val = "#" + val;
}
}
val = val.toLowerCase();
val = val.toLowerCase();
// Thank you: https://regexr.com/39cgj
const pattern = new RegExp(
/(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/
);
// Thank you: https://regexr.com/39cgj
const pattern = new RegExp(
/(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/
);
if (pattern.test(val)) {
onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component.
}
if ("" === val || pattern.test(val)) {
onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component.
}
setValue(val);
},
[onChange]
);
setValue(val);
},
[onChange]
);
// Update the local state when `color` property value is changed.
useEffect(() => {
// We don't need to convert the color since it's already handled in parent component.
setValue(color);
}, [color]);
// Update the local state when `color` property value is changed.
useEffect(() => {
// We don't need to convert the color since it's already handled in parent component.
setValue(color);
}, [color]);
const pickersWithAlpha = [
"RgbaColorPicker",
"RgbaStringColorPicker",
"HslaColorPicker",
"HslaStringColorPicker",
"HsvaColorPicker",
"HsvaStringColorPicker",
];
const pickersWithAlpha = [
"RgbaColorPicker",
"RgbaStringColorPicker",
"HslaColorPicker",
"HslaStringColorPicker",
"HsvaColorPicker",
"HsvaStringColorPicker",
];
const styles = reactCSS({
default: {
colorPreviewWrapper: {
backgroundImage: pickersWithAlpha.includes(props.pickerComponent)
? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'
: "none",
},
colorPreview: {
backgroundColor: value,
},
},
});
const styles = reactCSS({
default: {
colorPreviewWrapper: {
backgroundImage: pickersWithAlpha.includes(props.pickerComponent)
? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'
: "none",
},
colorPreview: {
backgroundColor: value,
},
},
});
return (
<div className="kirki-color-input-wrapper">
<div className="kirki-color-input-control">
{!props.useHueMode && (
<div
className="kirki-color-preview-wrapper"
style={styles.colorPreviewWrapper}
>
<button
type="button"
className="kirki-color-preview"
style={styles.colorPreview}
></button>
</div>
)}
<input
type="text"
value={value}
className="kirki-color-input"
spellCheck="false"
onChange={handleChange}
/>
</div>
</div>
);
return (
<div className="kirki-color-input-wrapper">
<div className="kirki-color-input-control">
{!props.useHueMode && (
<div
className="kirki-color-preview-wrapper"
style={styles.colorPreviewWrapper}
>
<button
type="button"
className="kirki-color-preview"
style={styles.colorPreview}
></button>
</div>
)}
<input
type="text"
value={value}
className="kirki-color-input"
spellCheck="false"
onChange={handleChange}
/>
</div>
</div>
);
};
export default KirkiReactColorfulInput;

32
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js
View file

@ -1,22 +1,22 @@
const KirkiReactColorfulSwatches = ({ colors, onClick }) => {
return (
<div className="kirki-color-swatches">
{colors.map((clr, index) => {
return (
<div className="kirki-color-swatches">
{colors.map((clr, index) => {
const color = clr && clr.color ? clr.color : clr;
return (
<button
key={index.toString()}
type="button"
className="kirki-color-swatch"
data-kirki-color={color}
style={{ backgroundColor: color }}
onClick={() => onClick(color)}
></button>
);
})}
</div>
);
return (
<button
key={index.toString()}
type="button"
className="kirki-color-swatch"
data-kirki-color={color}
style={{ backgroundColor: color }}
onClick={() => onClick(color)}
></button>
);
})}
</div>
);
};
export default KirkiReactColorfulSwatches;

56
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js
View file

@ -5,41 +5,41 @@ import { useEffect } from "react";
* It was improved version of https://usehooks.com/useOnClickOutside/
*/
const useClickOutside = (pickerRef, resetRef, handler) => {
useEffect(() => {
let startedWhenMounted = false;
let startedInside = false;
useEffect(() => {
let startedWhenMounted = false;
let startedInside = false;
const listener = (event) => {
// Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element
if (!startedWhenMounted || startedInside) return;
const listener = (event) => {
// Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element
if (!startedWhenMounted || startedInside) return;
// Do nothing if clicking resetRef's element or descendent elements
if (!resetRef.current || resetRef.current.contains(event.target)) return;
// Do nothing if clicking resetRef's element or descendent elements
if (!resetRef.current || resetRef.current.contains(event.target)) return;
// Do nothing if clicking pickerRef's element or descendent elements
if (!pickerRef.current || pickerRef.current.contains(event.target))
return;
// Do nothing if clicking pickerRef's element or descendent elements
if (!pickerRef.current || pickerRef.current.contains(event.target))
return;
handler();
};
handler();
};
const validateEventStart = (event) => {
startedWhenMounted = resetRef.current && pickerRef.current;
startedInside =
(resetRef.current && resetRef.current.contains(event.target)) ||
(pickerRef.current && pickerRef.current.contains(event.target));
};
const validateEventStart = (event) => {
startedWhenMounted = resetRef.current && pickerRef.current;
startedInside =
(resetRef.current && resetRef.current.contains(event.target)) ||
(pickerRef.current && pickerRef.current.contains(event.target));
};
document.addEventListener("mousedown", validateEventStart);
document.addEventListener("touchstart", validateEventStart);
document.addEventListener("click", listener);
document.addEventListener("mousedown", validateEventStart);
document.addEventListener("touchstart", validateEventStart);
document.addEventListener("click", listener);
return () => {
document.removeEventListener("mousedown", validateEventStart);
document.removeEventListener("touchstart", validateEventStart);
document.removeEventListener("click", listener);
};
}, [resetRef, pickerRef, handler]);
return () => {
document.removeEventListener("mousedown", validateEventStart);
document.removeEventListener("touchstart", validateEventStart);
document.removeEventListener("click", listener);
};
}, [resetRef, pickerRef, handler]);
};
export default useClickOutside;

18
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js
View file

@ -1,17 +1,17 @@
import { useEffect } from "react";
const useWindowResize = (handler) => {
useEffect(() => {
const listener = (e) => {
handler();
};
useEffect(() => {
const listener = (e) => {
handler();
};
window.addEventListener("resize", listener, true);
window.addEventListener("resize", listener, true);
return () => {
window.removeEventListener("resize", listener, true);
};
}, [handler]);
return () => {
window.removeEventListener("resize", listener, true);
};
}, [handler]);
};
export default useWindowResize;

89
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js
View file

@ -20,23 +20,26 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* 1. When formComponent is defined with HexColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
*/
case 'HexColorPicker':
convertedValue = 'string' === typeof value && value.includes('#') ? value : colord(value).toHex();
case "HexColorPicker":
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
break;
case 'RgbColorPicker':
case "RgbColorPicker":
convertedValue = colord(value).toRgb();
delete convertedValue.a;
break;
case 'RgbStringColorPicker':
case "RgbStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("rgb(")
? value
: colord(value).toRgbString();
"string" === typeof value && value.includes("rgb(")
? value
: colord(value).toRgbString();
break;
case 'RgbaColorPicker':
case "RgbaColorPicker":
rgba = colord(value).toRgb();
convertedValue = rgba;
break;
@ -46,62 +49,65 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* 1. When formComponent is defined with RgbaColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is set to true.
*/
case 'RgbaStringColorPicker':
case "RgbaStringColorPicker":
rgba = colord(value).toRgb();
if (rgba.a < 1) {
convertedValue =
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
} else {
// When it uses the 2nd condition above, then the expected value is "hex".
if (!formComponent) {
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
} else {
convertedValue = colord(value).toRgbString();
// Force to set the alpha channel value.
if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) {
convertedValue = convertedValue.replace('rgb', 'rgba');
convertedValue = convertedValue.replace(')', ', 1)');
if (
convertedValue.includes("rgb") &&
!convertedValue.includes("rgba")
) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
}
}
break;
case 'HslColorPicker':
case "HslColorPicker":
convertedValue = colord(value).toHsl();
delete convertedValue.a;
break;
case 'HslStringColorPicker':
case "HslStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
break;
case 'HslaColorPicker':
case "HslaColorPicker":
convertedValue = colord(value).toHsl();
break;
case 'HslaStringColorPicker':
case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha channel value.
if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) {
convertedValue = convertedValue.replace('hsl', 'hsla');
convertedValue = convertedValue.replace(')', ', 1)');
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
break;
case 'HsvColorPicker':
case "HsvColorPicker":
convertedValue = colord(value).toHsv();
delete convertedValue.a;
break;
@ -110,25 +116,34 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* The colord library doesn't provide .toHsvString() method yet.
* This manual value-building will apply to "HsvStringColorPicker" and "HsvaStringColorPicker" stuff below.
*/
case 'HsvStringColorPicker':
case "HsvStringColorPicker":
hsv = colord(value).toHsv();
convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)';
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
case 'HsvaColorPicker':
case "HsvaColorPicker":
convertedValue = colord(value).toHsv();
break;
case 'HsvaStringColorPicker':
case "HsvaStringColorPicker":
hsva = colord(value).toHsv();
convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')';
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;
default:
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
break;
}

286
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js
View file

@ -9,174 +9,174 @@ import { colord } from "colord";
* @returns {string} The converted value.
*/
const convertColorForInput = (value, pickerComponent, formComponent) => {
let rgba;
let hsv;
let hsva;
let convertedValue;
let rgba;
let hsv;
let hsva;
let convertedValue;
switch (pickerComponent) {
/**
* The HexColorPicker is used by these condition:
* 1. When formComponent is defined with HexColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
*/
case "HexColorPicker":
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
break;
switch (pickerComponent) {
/**
* The HexColorPicker is used by these condition:
* 1. When formComponent is defined with HexColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
*/
case "HexColorPicker":
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
break;
case "RgbColorPicker":
convertedValue =
"string" === typeof value && value.includes("rgb(")
? value
: colord(value).toRgbString();
break;
case "RgbColorPicker":
convertedValue =
"string" === typeof value && value.includes("rgb(")
? value
: colord(value).toRgbString();
break;
case "RgbStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
break;
case "RgbStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
break;
case "RgbaColorPicker":
rgba = colord(value).toRgb();
case "RgbaColorPicker":
rgba = colord(value).toRgb();
if (rgba.a < 1) {
convertedValue =
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
} else {
convertedValue = colord(value).toRgbString();
if (rgba.a < 1) {
convertedValue =
"string" === typeof value && value.includes("rgba")
? value
: colord(value).toRgbString();
} else {
convertedValue = colord(value).toRgbString();
// Force to set the alpha value.
if (
convertedValue.includes("rgb") &&
!convertedValue.includes("rgba")
) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
}
// Force to set the alpha value.
if (
convertedValue.includes("rgb") &&
!convertedValue.includes("rgba")
) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
}
break;
break;
/**
* The RgbaStringColorPicker is used by these condition:
* 1. When formComponent is defined with RgbaColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is set to true.
*/
case "RgbaStringColorPicker":
rgba = colord(value).toRgb();
/**
* The RgbaStringColorPicker is used by these condition:
* 1. When formComponent is defined with RgbaColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is set to true.
*/
case "RgbaStringColorPicker":
rgba = colord(value).toRgb();
// When it uses the 2nd condition above, then the expected value is "hex".
if (rgba.a == 1 && !formComponent) {
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
} else {
convertedValue = colord(value).toRgbString();
// When it uses the 2nd condition above, then the expected value is "hex".
if (rgba.a == 1 && !formComponent) {
convertedValue =
"string" === typeof value && value.includes("#")
? value
: colord(value).toHex();
} else {
convertedValue = colord(value).toRgbString();
// Force to set the alpha value.
if (
convertedValue.includes("rgb") &&
!convertedValue.includes("rgba")
) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
}
// Force to set the alpha value.
if (
convertedValue.includes("rgb") &&
!convertedValue.includes("rgba")
) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
}
break;
break;
case "HslColorPicker":
convertedValue =
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
break;
case "HslColorPicker":
convertedValue =
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
break;
case "HslStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
break;
case "HslStringColorPicker":
convertedValue =
"string" === typeof value && value.includes("hsl(")
? value
: colord(value).toHslString();
break;
case "HslaColorPicker":
convertedValue = colord(value).toHslString();
case "HslaColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha value.
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
// Force to set the alpha value.
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
break;
break;
case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha value.
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
// Force to set the alpha value.
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
break;
break;
/**
* The colord library doesn't provide .toHsvString() method yet.
* This manual value-building will apply to "hsv" and "hsva" stuff below.
*/
case "HsvColorPicker":
hsv = colord(value).toHsv();
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
/**
* The colord library doesn't provide .toHsvString() method yet.
* This manual value-building will apply to "hsv" and "hsva" stuff below.
*/
case "HsvColorPicker":
hsv = colord(value).toHsv();
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
case "HsvStringColorPicker":
hsv = colord(value).toHsv();
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
case "HsvStringColorPicker":
hsv = colord(value).toHsv();
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
case "HsvaColorPicker":
hsva = colord(value).toHsv();
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;
case "HsvaColorPicker":
hsva = colord(value).toHsv();
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;
case "HsvaStringColorPicker":
hsva = colord(value).toHsv();
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;
case "HsvaStringColorPicker":
hsva = colord(value).toHsv();
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;
default:
convertedValue = colord(value).toHex();
break;
}
default:
convertedValue = colord(value).toHex();
break;
}
return convertedValue;
return convertedValue;
};
export default convertColorForInput;

51
functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js
View file

@ -12,77 +12,86 @@ const convertColorForPicker = (value, pickerComponent) => {
let convertedValue;
switch (pickerComponent) {
case 'HexColorPicker':
case "HexColorPicker":
convertedValue = colord(value).toHex();
break;
case 'RgbColorPicker':
case "RgbColorPicker":
convertedValue = colord(value).toRgb();
delete convertedValue.a;
break;
case 'RgbStringColorPicker':
case "RgbStringColorPicker":
convertedValue = colord(value).toRgbString();
break;
case 'RgbaColorPicker':
case "RgbaColorPicker":
convertedValue = colord(value).toRgb();
break;
case 'RgbaStringColorPicker':
case "RgbaStringColorPicker":
convertedValue = colord(value).toRgbString();
// Force to set the alpha channel value.
if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) {
convertedValue = convertedValue.replace('rgb', 'rgba');
convertedValue = convertedValue.replace(')', ', 1)');
if (convertedValue.includes("rgb") && !convertedValue.includes("rgba")) {
convertedValue = convertedValue.replace("rgb", "rgba");
convertedValue = convertedValue.replace(")", ", 1)");
}
break;
case 'HslColorPicker':
case "HslColorPicker":
convertedValue = colord(value).toHsl();
delete convertedValue.a;
break;
case 'HslStringColorPicker':
case "HslStringColorPicker":
convertedValue = colord(value).toHslString();
break;
case 'HslaColorPicker':
case "HslaColorPicker":
convertedValue = colord(value).toHsl();
break;
case 'HslaStringColorPicker':
case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha channel value.
if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) {
convertedValue = convertedValue.replace('hsl', 'hsla');
convertedValue = convertedValue.replace(')', ', 1)');
if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
convertedValue = convertedValue.replace("hsl", "hsla");
convertedValue = convertedValue.replace(")", ", 1)");
}
break;
case 'HsvColorPicker':
case "HsvColorPicker":
convertedValue = colord(value).toHsv();
delete convertedValue.a;
break;
case 'HsvStringColorPicker':
case "HsvStringColorPicker":
const hsv = colord(value).toHsv();
convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)';
convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
case 'HsvaColorPicker':
case "HsvaColorPicker":
convertedValue = colord(value).toHsv();
break;
case 'HsvaStringColorPicker':
case "HsvaStringColorPicker":
// colord library doesn't provide .toHsvString() method yet.
const hsva = colord(value).toHsv();
convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')';
convertedValue =
"hsva(" +
hsva.h +
", " +
hsva.s +
"%, " +
hsva.v +
"%, " +
hsva.a +
")";
break;

2
functions/kirki/packages/kirki-framework/control-repeater/dist/control.js vendored
View file

File diff suppressed because one or more lines are too long

11
functions/kirki/packages/kirki-framework/control-repeater/dist/wp-color-picker-alpha.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

40
functions/kirki/packages/kirki-framework/control-repeater/src/Control/Repeater.php
View file

@ -72,7 +72,7 @@ class Repeater extends Base {
* @since 1.0
* @var string
*/
public static $control_ver = '1.0';
public static $control_ver = '1.0.5';
/**
* Constructor.
@ -212,13 +212,14 @@ class Repeater extends Base {
parent::enqueue();
// Enqueue the script.
wp_enqueue_script( 'kirki-control-repeater', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'wp-color-picker' ], self::$control_ver, false );
// Enqueue the style.
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_style( 'kirki-control-repeater-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
// Enqueue the script.
wp_enqueue_script( 'wp-color-picker-alpha', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/wp-color-picker-alpha.min.js' ), array( 'jquery', 'customize-base', 'wp-color-picker' ), self::$control_ver, false );
wp_enqueue_script( 'kirki-control-repeater', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'wp-color-picker-alpha' ], self::$control_ver, false );
}
/**
@ -398,16 +399,33 @@ class Repeater extends Base {
<# if ( field.label ) { #><span class="customize-control-title">{{{ field.label }}}</span><# } #>
<# if ( field.description ) { #><span class="description customize-control-description">{{{ field.description }}}</span><# } #>
</label>
<# var defaultValue = '';
<#
var defaultValue = '';
if ( field.default ) {
if ( -1 === field.default.indexOf( 'rgba' ) ) {
defaultValue = ( '#' !== field.default.substring( 0, 1 ) ) ? '#' + field.default : field.default;
defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
if ( -1 !== field.default.indexOf( 'rgb' ) || -1 !== field.default.indexOf( '#' ) ) {
defaultValue = field.default;
if (-1 !== field.default.indexOf('rgba')) {
if (!field.choices) field.choices = {};
field.choices.alpha = true;
}
} else {
defaultValue = ' data-default-color="' + defaultValue + '" data-alpha="true"';
if (field.default.length >= 3) {
defaultValue = '#' + field.default;
}
}
} #>
<input class="color-picker-hex" type="text" maxlength="7" value="{{{ field.default }}}" data-field="{{{ field.id }}}" {{ defaultValue }} />
}
#>
<#
var alphaEnabledAttr = '';
if ( field.choices && field.choices.alpha ) {
alphaEnabledAttr = ' data-alpha-enabled=true';
}
#>
<input class="kirki-classic-color-picker" type="text" maxlength="7" value="{{{ field.default }}}" data-field="{{{ field.id }}}" data-default-color="{{{ defaultValue }}}" {{alphaEnabledAttr}} />
<# } else if ( 'textarea' === field.type ) { #>

1723
functions/kirki/packages/kirki-framework/control-repeater/src/control.js
View file

File diff suppressed because it is too large Load diff

41
functions/kirki/packages/kirki-framework/module-css/src/CSS.php
View file

@ -61,6 +61,17 @@ class CSS {
*/
private static $css_handle = 'kirki-styles';
/**
* The default id for kirki's inline style tag.
*
* @since 4.0.23
* @access private
* @static
*
* @var string
*/
private static $inline_styles_id = 'kirki-inline-styles';
/**
* Constructor
*
@ -181,8 +192,32 @@ class CSS {
*/
public function print_styles_inline() {
echo '<style id="kirki-inline-styles">';
$should_print = true;
if ( defined( 'KIRKI_NO_OUTPUT' ) && true === KIRKI_NO_OUTPUT ) {
$should_print = false;
}
ob_start();
$this->print_styles();
$inline_styles = ob_get_clean();
/**
* If KIRKI_NO_OUTPUT constant is defined (and is true), but typography field is defined, then print it.
* Otherwise, the typography field might be broken (missing font-family) if the font-face is not outputted.
*/
if ( ! $should_print && false !== stripos($inline_styles, '@font-face') ) {
$should_print = true;
}
if ( ! $should_print ) {
return;
}
$inline_styles_id = apply_filters( 'kirki_inline_styles_id', self::$inline_styles_id );
echo '<style id="' . esc_attr( $inline_styles_id ) . '">';
echo $inline_styles;
echo '</style>';
}
@ -270,6 +305,10 @@ class CSS {
$configs = Kirki::$config;
foreach ( $configs as $config_id => $args ) {
if ( defined( 'KIRKI_NO_OUTPUT' ) && true === KIRKI_NO_OUTPUT ) {
continue;
}
if ( isset( $args['disable_output'] ) && true === $args['disable_output'] ) {
continue;
}

14
functions/kirki/packages/kirki-framework/module-editor-styles/src/Editor_Styles.php
View file

@ -141,14 +141,12 @@ class Editor_Styles {
return true;
}
if ( ! empty( $args ) ) {
if ( isset( $args['disable_output'] ) && true === $args['disable_output'] ) {
return true;
}
if ( ! isset( $args['gutenberg_support'] ) || true !== $args['gutenberg_support'] ) {
return true;
}
/**
* We would prefer to use "KIRKI_GUTENBERG_OUTPUT" instead.
* For consistency however, we will use "KIRKI_NO_GUTENBERG_OUTPUT".
*/
if ( defined( 'KIRKI_NO_GUTENBERG_OUTPUT' ) && true === KIRKI_NO_GUTENBERG_OUTPUT ) {
return true;
}
return false;

5
functions/kirki/packages/kirki-framework/module-postmessage/src/postMessage.js
View file

@ -166,6 +166,7 @@ var kirkiPostMessage = {
if ( output.choice && key !== output.choice ) {
return;
}
processedValue = kirkiPostMessage.util.processValue( output, val );
if ( '' === processedValue ) {
@ -176,8 +177,10 @@ var kirkiPostMessage = {
}
}
var customProperty = controlType === 'kirki-sortable' ? output.property + '-' + key : output.property;
if ( false !== processedValue ) {
styles += output.property ? output.property + '-' + key + ':' + processedValue + ';' : key + ':' + processedValue + ';';
styles += output.property ? customProperty + ":" + processedValue + ";" : key + ":" + processedValue + ";";
}
} );
styles += '}';

2
functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Async.php
View file

@ -86,7 +86,7 @@ final class Async {
add_action( 'admin_enqueue_scripts', [ $this, 'webfont_loader' ] );
add_action( 'admin_enqueue_scripts', [ $this, 'webfont_loader_script' ], 30 );
add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 );
// add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 );
}
/**

3
functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Embed.php
View file

@ -70,7 +70,7 @@ final class Embed {
$this->googlefonts = $googlefonts;
add_action( 'wp', [ $this, 'init' ], 9 );
add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 );
// add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 );
}
/**
@ -102,6 +102,7 @@ final class Embed {
'crossorigin',
];
}
return $urls;
}