kirki-framework / control-react-color
Color control for the Kirki Customizer framework using react-color.
This package's canonical repository appears to be gone and the package has been frozen as a result.
Fund package maintenance!
aristath
Installs: 1 471
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 2
Open Issues: 5
Language:JavaScript
Requires
- php: >=5.6
- kirki-framework/control-base: *
- kirki-framework/field: *
- kirki-framework/url-getter: *
- dev-master
- v1.0.12
- v1.0.11
- v1.0.10
- v1.0.9
- v1.0.8
- v1.0.7
- v1.0.6
- v1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- 1.0.1
- v1.0
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/terser-4.8.1
- dev-dependabot/npm_and_yarn/minimist-1.2.6
This package is auto-updated.
Last update: 2023-01-06 02:06:11 UTC
README
This is a simple control for the WordPress Customizer use react-color.
Installation
To install this package use composer
:
composer require kirki-framework/control-react-color
NOTE: If you get errors with the package dependencies, please run the following first:
composer require kirki-framework/control-base:dev-master composer require kirki-framework/field:dev-master composer require kirki-framework/url-getter:dev-master
Until Kirki v4.0 is released some of these dependencies may not have a tag released, so in the meantime the above will allow you to install and use everything.
Usage
This package contains the control itself, as well as a simplified API for the WordPress Customizer, installed via the composer dependencies system.
Using the simplified API
new \Kirki\Field\ReactColor( [ 'settings' => 'my_setting', 'label' => esc_html__( 'My Color Control', 'textdomain' ), 'description' => esc_html__( 'A description here.', 'kirki' ), 'section' => 'title_tagline', 'default' => '#0008DC', 'choices' => [ 'formComponent' => 'ChromePicker', ], ] );
Using the Customizer API
/** * Add Customizer settings & controls. * * @since 1.0 * @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object. * @return void */ add_action( 'customize_register', function( $wp_customize ) { // Add setting. $wp_customize->add_setting( 'my_setting', [ 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'default' => '#0008DC', 'transport' => 'refresh', // Or postMessage. 'sanitize_callback' => [ '\kirki\Field\Color', 'sanitize' ], // Or a custom sanitization callback. ] ); // Add control. $wp_customize->add_control( new \Kirki\Control\ReactColor( $wp_customize, 'my_setting', [ 'label' => esc_html__( 'My Color Control', 'textdomain' ), 'description' => esc_html__( 'A description here.', 'kirki' ), 'section' => 'title_tagline', 'choices' => [ 'formComponent' => 'ChromePicker', ], ] ) ); } );
Arguments
You can pass arguments to the react-color
using the choices
argument in the control.
The only required argument here is formComponent
. In the formComponent
argument you can define the type of control you want, using one of the the following:
AlphaPicker
BlockPicker
ChromePicker
CirclePicker
CompactPicker
GithubPicker
HuePicker
MaterialPicker
PhotoshopPicker
SketchPicker
SliderPicker
SwatchesPicker
- `TwitterPicker
For information about the extra arguments you can use, please refer to the react-color script.
Development
If you want to make changes to this control, you can edit the JS files in the src
folder. Once done editing you can update the compiled script by running the following:
npm install npm run build