AlxMedia/halftype
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/AlxMedia/halftype.git synced 2025-08-26 10:56:19 +08:00
Code Issues Projects Packages Wiki Activity Actions

Kirki 4.0.24

Browse source
This commit is contained in:
AlxMedia 2022-05-30 09:59:58 +02:00
parent 016e9dc43c
commit 86e5d65b59
39 changed files with 1664 additions and 1315 deletions
Download patch file Download diff file Expand all files Collapse all files

34
functions/kirki/CHANGELOG.md
View file

@ -1,3 +1,37 @@
### 4.0.24 - March 22, 2022 ###
#### control-react-colorful package
Bugfixes:
- Fix issue where uppercase color was failed to be saved
- Fix the layout issue of the swatches (removing `justify-content: space-between;`)
- Fix the swatches layout issue when it contains a lot of colors.
- Allow clearing picker's color by clearing the input field value.
#### compatibility package
Bugfixes:
- Fix notice error: Undefined index of 'transport' as reported in #2476
- Fix code that called URL class without it's namespace
- **control-repeater**: `"alpha" => true` choice didn't work as reported in issue #2469
- **module-css**: `KIRKI_NO_OUTPUT` didn't work in the front area
#### module-webfonts package
Finetuning:
- Stop preconnecting to https://fonts.gstatic.com/ . It was related to issue #2478.
#### module-postMessage package
Bugfix:
- Fix multicolor output issue on customizer preview where the CSS property was appended with its assigned choice.
### 4.0.23 - March 22, 2022 ###
Bugfixes:
- **control-repeater**: `"alpha" => true` choice didn't work as reported in issue #2469
- **module-css**: `KIRKI_NO_OUTPUT` didn't work in the front area
New Filter:
- New `kirki_inline_styles_id` filter to filter the ID of the inline style tag. The default id is `kirki-inline-styles` (**module-css**)
New Constant:
- New `KIRKI_NO_GUTENBERG_OUTPUT` constant. Since we get rid of Kirki config usage in Kirki 4, then new constant is necessary. Define `KIRKI_NO_GUTENBERG_OUTPUT` constant to `true` to disable Gutenberg support (**module-editor-styles**).
### 4.0.22 - February 17, 2022 ###
Bugfix:
- **module-css** & **module-postmessage**: Fix bug where CSS output didn't work when `'option_type' => 'option'` and `'option_name'` is provided. This fixed issue #2466 and issue #2465

4
functions/kirki/README.md
View file

@ -2,8 +2,8 @@
**Contributors:** [davidvongries](https://profiles.wordpress.org/davidvongries), [aristath](https://profiles.wordpress.org/aristath), [dannycooper](https://profiles.wordpress.org/dannycooper), [wplemon](https://profiles.wordpress.org/wplemon), [igmoweb](https://profiles.wordpress.org/igmoweb)
**Tags:** customizer, options framework, theme, mods, toolkit, gutenberg
**Requires at least:** 5.2
**Tested up to:** 5.9
**Stable tag:** 4.0.22
**Tested up to:** 6
**Stable tag:** 4.0.24
**License:** MIT
**License URI:** https://opensource.org/licenses/MIT

37
functions/kirki/example.php
View file

@ -899,25 +899,24 @@ new \Kirki\Field\Multicolor(
'priority' => 10,
'transport' => 'postMessage',
'choices' => [
'link' => esc_html__( 'Color', 'kirki' ),
'hover' => esc_html__( 'And this hover color just so that you have long label', 'kirki' ),
'active' => esc_html__( 'Active', 'kirki' ),
'active' => esc_html__( 'Active', 'kirki' ),
'active1' => esc_html__( 'Active', 'kirki' ),
'active2' => esc_html__( 'Active', 'kirki' ),
'active3' => esc_html__( 'Active', 'kirki' ),
'active4' => esc_html__( 'Active', 'kirki' ),
'active5' => esc_html__( 'Active', 'kirki' ),
'active6' => esc_html__( 'Active', 'kirki' ),
'active7' => esc_html__( 'Active', 'kirki' ),
'active8' => esc_html__( 'Active', 'kirki' ),
'active9' => esc_html__( 'Active', 'kirki' ),
'active10' => esc_html__( 'Active', 'kirki' ),
'active11' => esc_html__( 'Active', 'kirki' ),
'active12' => esc_html__( 'Active', 'kirki' ),
'active13' => esc_html__( 'Active', 'kirki' ),
'active14' => esc_html__( 'Active', 'kirki' ),
'active15' => esc_html__( 'Active', 'kirki' ),
'link' => esc_html__( 'Link Color', 'kirki' ),
'hover' => esc_html__( 'And this is hover color with long label so you know how it is displayed.', 'kirki' ),
'active' => esc_html__( 'Active Color', 'kirki' ),
'another1' => esc_html__( 'Another color 1', 'kirki' ),
'another2' => esc_html__( 'Another color 2', 'kirki' ),
'another3' => esc_html__( 'Another color 3', 'kirki' ),
'another4' => esc_html__( 'Another color 4', 'kirki' ),
'another5' => esc_html__( 'Another color 5', 'kirki' ),
'another6' => esc_html__( 'Another color 6', 'kirki' ),
'another7' => esc_html__( 'Another color 7', 'kirki' ),
'another8' => esc_html__( 'Another color 8', 'kirki' ),
'another9' => esc_html__( 'Another color 9', 'kirki' ),
'another10' => esc_html__( 'Another color 10', 'kirki' ),
'another11' => esc_html__( 'Another color 11', 'kirki' ),
'another12' => esc_html__( 'Another color 12', 'kirki' ),
'another13' => esc_html__( 'Another color 13', 'kirki' ),
'another14' => esc_html__( 'Another color 14', 'kirki' ),
'another15' => esc_html__( 'Another color 15', 'kirki' ),
],
'alpha' => true,
'default' => [

4
functions/kirki/kirki.php
View file

@ -5,7 +5,7 @@
* Description: The Ultimate WordPress Customizer Framework
* Author: David Vongries
* Author URI: https://davidvongries.com/
* Version: 4.0.22
* Version: 4.0.24
* Text Domain: kirki
* Requires at least: 5.2
* Requires PHP: 7.0
@ -44,7 +44,7 @@ require_once __DIR__ . '/inc/bootstrap.php'; // phpcs:ignore WPThemeReview.CoreF
// Define the KIRKI_VERSION constant.
if ( ! defined( 'KIRKI_VERSION' ) ) {
define( 'KIRKI_VERSION', '4.0.22' );
define( 'KIRKI_VERSION', '4.0.24' );
}
if ( ! function_exists( 'Kirki' ) ) {

5
functions/kirki/packages/autoload.php
View file

@ -2,6 +2,11 @@
// autoload.php @generated by Composer
if (PHP_VERSION_ID < 50600) {
echo 'Composer 2.3.0 dropped support for autoloading on PHP <5.6 and you are running '.PHP_VERSION.', please upgrade PHP or use Composer 2.2 LTS via "composer self-update --2.2". Aborting.'.PHP_EOL;
exit(1);
}
require_once __DIR__ . '/composer/autoload_real.php';
return ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144::getLoader();

2
functions/kirki/packages/composer/InstalledVersions.php
View file

@ -21,6 +21,8 @@ use Composer\Semver\VersionParser;
* See also https://getcomposer.org/doc/07-runtime.md#installed-versions
*
* To require its presence, you can require `composer-runtime-api ^2.0`
*
* @final
*/
class InstalledVersions
{

2
functions/kirki/packages/composer/autoload_classmap.php
View file

@ -2,7 +2,7 @@
// autoload_classmap.php @generated by Composer
$vendorDir = dirname(dirname(__FILE__));
$vendorDir = dirname(__DIR__);
$baseDir = dirname($vendorDir);
return array(

2
functions/kirki/packages/composer/autoload_namespaces.php
View file

@ -2,7 +2,7 @@
// autoload_namespaces.php @generated by Composer
$vendorDir = dirname(dirname(__FILE__));
$vendorDir = dirname(__DIR__);
$baseDir = dirname($vendorDir);
return array(

2
functions/kirki/packages/composer/autoload_psr4.php
View file

@ -2,7 +2,7 @@
// autoload_psr4.php @generated by Composer
$vendorDir = dirname(dirname(__FILE__));
$vendorDir = dirname(__DIR__);
$baseDir = dirname($vendorDir);
return array(

25
functions/kirki/packages/composer/autoload_real.php
View file

@ -25,34 +25,15 @@ class ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144
require __DIR__ . '/platform_check.php';
spl_autoload_register(array('ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144', 'loadClassLoader'), true, true);
self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(\dirname(__FILE__)));
self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__));
spl_autoload_unregister(array('ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144', 'loadClassLoader'));
$includePaths = require __DIR__ . '/include_paths.php';
$includePaths[] = get_include_path();
set_include_path(implode(PATH_SEPARATOR, $includePaths));
$useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded());
if ($useStaticLoader) {
require __DIR__ . '/autoload_static.php';
call_user_func(\Composer\Autoload\ComposerStaticInitc56aa391ac498061f8d648878e0e6144::getInitializer($loader));
} else {
$map = require __DIR__ . '/autoload_namespaces.php';
foreach ($map as $namespace => $path) {
$loader->set($namespace, $path);
}
$map = require __DIR__ . '/autoload_psr4.php';
foreach ($map as $namespace => $path) {
$loader->setPsr4($namespace, $path);
}
$classMap = require __DIR__ . '/autoload_classmap.php';
if ($classMap) {
$loader->addClassMap($classMap);
}
}
require __DIR__ . '/autoload_static.php';
call_user_func(\Composer\Autoload\ComposerStaticInitc56aa391ac498061f8d648878e0e6144::getInitializer($loader));
$loader->register(true);

2
functions/kirki/packages/composer/include_paths.php
View file

@ -2,7 +2,7 @@
// include_paths.php @generated by Composer
$vendorDir = dirname(dirname(__FILE__));
$vendorDir = dirname(__DIR__);
$baseDir = dirname($vendorDir);
return array(

66
functions/kirki/packages/composer/installed.php
View file

@ -1,22 +1,22 @@
<?php return array(
'root' => array(
'pretty_version' => 'dev-master',
'version' => 'dev-master',
'pretty_version' => '4.0.24',
'version' => '4.0.24.0',
'type' => 'library',
'install_path' => __DIR__ . '/../../',
'aliases' => array(),
'reference' => 'f44123472688894cb60ad0552857a3aadc4a6ee4',
'reference' => NULL,
'name' => 'kirki-framework/kirki',
'dev' => true,
),
'versions' => array(
'composer/installers' => array(
'pretty_version' => 'v2.0.1',
'version' => '2.0.1.0',
'pretty_version' => 'v2.1.1',
'version' => '2.1.1.0',
'type' => 'composer-plugin',
'install_path' => __DIR__ . '/./installers',
'aliases' => array(),
'reference' => 'a241e78aaeb09781f5f5b92ac01ffd13ab43e5e8',
'reference' => 'af93ba6e52236418f07a278033eba6959ee5b983',
'dev_requirement' => true,
),
'dealerdirect/phpcodesniffer-composer-installer' => array(
@ -29,12 +29,12 @@
'dev_requirement' => true,
),
'kirki-framework/compatibility' => array(
'pretty_version' => 'v1.0.9',
'version' => '1.0.9.0',
'pretty_version' => 'v1.0.11',
'version' => '1.0.11.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/compatibility',
'aliases' => array(),
'reference' => '1169e68f1232dfc7d659c981d440d81e8253a810',
'reference' => '551fdc67b39e7345fc49a785b2cdd0c2a9f0bc3e',
'dev_requirement' => false,
),
'kirki-framework/control-base' => array(
@ -56,12 +56,12 @@
'dev_requirement' => false,
),
'kirki-framework/control-code' => array(
'pretty_version' => 'v1.0.1',
'version' => '1.0.1.0',
'pretty_version' => 'v1.0.2',
'version' => '1.0.2.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/control-code',
'aliases' => array(),
'reference' => '29909ae3f62210b9b5937c798086ce8495e77d72',
'reference' => '88e7b01127fc7039e2c1fc6761184b0332f9a0c3',
'dev_requirement' => false,
),
'kirki-framework/control-color' => array(
@ -182,12 +182,12 @@
'dev_requirement' => false,
),
'kirki-framework/control-react-colorful' => array(
'pretty_version' => 'v1.0.14',
'version' => '1.0.14.0',
'pretty_version' => 'v1.0.17',
'version' => '1.0.17.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/control-react-colorful',
'aliases' => array(),
'reference' => 'bcfe71b736f4b43c00b0292e9260c78815808364',
'reference' => '79258cdbcdd4ee8582560edc4a09c8ba45eaf219',
'dev_requirement' => false,
),
'kirki-framework/control-react-select' => array(
@ -200,12 +200,12 @@
'dev_requirement' => false,
),
'kirki-framework/control-repeater' => array(
'pretty_version' => 'v1.0.3',
'version' => '1.0.3.0',
'pretty_version' => '1.0.5',
'version' => '1.0.5.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/control-repeater',
'aliases' => array(),
'reference' => 'b24e7ae8641867616cc12038eda0a6e990399bbd',
'reference' => '5375e65054b7a73da4e735fa7bee831c7f6c1cfc',
'dev_requirement' => false,
),
'kirki-framework/control-select' => array(
@ -317,12 +317,12 @@
'dev_requirement' => false,
),
'kirki-framework/kirki' => array(
'pretty_version' => 'dev-master',
'version' => 'dev-master',
'pretty_version' => '4.0.24',
'version' => '4.0.24.0',
'type' => 'library',
'install_path' => __DIR__ . '/../../',
'aliases' => array(),
'reference' => 'f44123472688894cb60ad0552857a3aadc4a6ee4',
'reference' => NULL,
'dev_requirement' => false,
),
'kirki-framework/l10n' => array(
@ -335,21 +335,21 @@
'dev_requirement' => false,
),
'kirki-framework/module-css' => array(
'pretty_version' => 'v1.0.10',
'version' => '1.0.10.0',
'pretty_version' => 'v1.0.11',
'version' => '1.0.11.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/module-css',
'aliases' => array(),
'reference' => '93b97d0e6b09fe4953c69a8ba9bc06884af91b27',
'reference' => 'b53cff693b489cc7e4991ef725a66ddafa8aa84b',
'dev_requirement' => false,
),
'kirki-framework/module-editor-styles' => array(
'pretty_version' => 'v1.0.1',
'version' => '1.0.1.0',
'pretty_version' => 'v1.0.2',
'version' => '1.0.2.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/module-editor-styles',
'aliases' => array(),
'reference' => 'd30622f500cfcc4e0145790d4aeca541d6c73319',
'reference' => 'a86f8b66fa0a442ce092c122b997c8d5f8d20951',
'dev_requirement' => false,
),
'kirki-framework/module-field-dependencies' => array(
@ -371,12 +371,12 @@
'dev_requirement' => false,
),
'kirki-framework/module-postmessage' => array(
'pretty_version' => 'v1.0.6',
'version' => '1.0.6.0',
'pretty_version' => '1.0.7',
'version' => '1.0.7.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/module-postmessage',
'aliases' => array(),
'reference' => 'd543c8d34e7d6fc8c2ce4805d8fc940070a54691',
'reference' => '9b2b419027f3b95a2546041a83fc5607492f35a5',
'dev_requirement' => false,
),
'kirki-framework/module-preset' => array(
@ -425,12 +425,12 @@
'dev_requirement' => false,
),
'kirki-framework/module-webfonts' => array(
'pretty_version' => 'v1.0.4',
'version' => '1.0.4.0',
'pretty_version' => 'v1.0.5',
'version' => '1.0.5.0',
'type' => 'library',
'install_path' => __DIR__ . '/../kirki-framework/module-webfonts',
'aliases' => array(),
'reference' => 'ec12372bb67230ab5558a6b3d8b7f98300d2e2a6',
'reference' => '6be8c298abc29bccc227e1b1dbcb029e6a072659',
'dev_requirement' => false,
),
'kirki-framework/url-getter' => array(

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;
}

38
functions/kirki/readme.txt
View file

@ -2,22 +2,24 @@
Contributors: davidvongries, aristath, dannycooper, wplemon, igmoweb
Tags: customizer, options framework, theme, mods, toolkit, gutenberg
Requires at least: 5.2
Tested up to: 5.9
Stable tag: 4.0.22
Tested up to: 6
Stable tag: 4.0.24
License: MIT
License URI: https://opensource.org/licenses/MIT
The ultimate customizer framework for WordPress theme developers.
The Ultimate Customizer Framework for WordPress Theme Developers
== Description ==
[![Build Status](https://travis-ci.org/aristath/kirki.svg?branch=develop)](https://travis-ci.org/aristath/kirki) [![Code Climate](https://codeclimate.com/github/aristath/kirki/badges/gpa.svg)](https://codeclimate.com/github/aristath/kirki) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/66d6d8b6a4654cd18686ed1cd9f1bfb3)](https://www.codacy.com/app/aristath/kirki?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=aristath/kirki&amp;utm_campaign=Badge_Grade) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/aristath/kirki/badges/quality-score.png?b=develop)](https://scrutinizer-ci.com/g/aristath/kirki/?branch=develop)
**NEW - [Kirki PRO](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki) is now available!**
[Kirki](https://kirki.org/?utm_source=repo&utm_medium=description&utm_campaign=kirki) allows theme developers to build themes quicker & more easily.
With over **30 custom controls** ranging from simple sliders to complex typography controls with Google-Fonts integration and features like automatic CSS & `postMessage` script generation, Kirki makes theme development a breeze.
### Features ###
### Features ✅ ###
* Increased Performance
* Simplified API
* Automatic CSS Generation
@ -28,8 +30,7 @@ With over **30 custom controls** ranging from simple sliders to complex typograp
* Improved Page Speed
* & more!
### Controls ###
### Controls 🎛️ ###
* [Background Customizer Control](https://kirki.org/docs/controls/background)
* [Code Customizer Control](https://kirki.org/docs/controls/code)
* [Checkbox Customizer Control](https://kirki.org/docs/controls/checkbox)
@ -62,30 +63,25 @@ With over **30 custom controls** ranging from simple sliders to complex typograp
* [Typography Customizer Control](https://kirki.org/docs/controls/typography)
* [Upload Customizer Control](https://kirki.org/docs/controls/upload)
### Theme Example ###
### Kirki PRO Extensions 🏆 ###
Create the WordPress experience your customers deserve with [Kirki PRO Extensions](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki).
[Page Builder Framework](https://wp-pagebuilderframework.com?utm_source=kirki&utm_medium=repo&utm_campaign=wpbf)'s customizer settings are a prime example of what can be achieved with Kirki.
## PRO Features ##
* Tabs
* Responsive Controls
* Input Slider
* Headlines & Dividers
* Margin & Padding Controls
Conditional Logic, Partial Refresh, postMessage and a variety of controls - It has all of it.
### Documentation ###
Learn more about [Kirki PRO](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki).
### Documentation 📖 ###
You can find detailed documentation on how to use Kirki on [kirki.org](https://kirki.org/?utm_source=repo&utm_medium=description&utm_campaign=kirki)
### Kirki PRO ###
Kirki PRO is currently in development. You can [sign up for the waiting list](https://kirki.org/pricing/?utm_source=repo&utm_medium=description&utm_campaign=kirki) here to be notified about updates.
### Disclaimer ###
Theme developers should be familiar with the Customizer API before starting to build a theme using Kirki. An excellent handbook for the WordPress Customizer can be found on the [developer.wordpress.org](https://developer.wordpress.org/themes/customize-api/) website.
== Installation ==
Simply install as a normal WordPress plugin and activate.
If you want to integrate Kirki in your theme or plugin, please read the instructions on [our documentation site](https://kirki.org/docs/integration).
== Changelog ==
[See the changelogs here](https://github.com/kirki-framework/kirki/blob/master/CHANGELOG.md).