braadmartin/components

A collection of custom WordPress theme and plugin components

components's Issues

Sanitize Callback

This is working great in a theme I am building. However when i run the theme through ThemeCheck plugin I get the following error msg:
REQUIRED: Found a Customizer setting that did not have a sanitization callback function. Every call to the add_setting() method needs to have a sanitization callback function passed.

The only setting I added was the alpha picker.

// Alpha Color Picker setting. $wp_customize->add_setting('alpha_color_setting', array( 'default' => 'rgb(0, 0, 0,)', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'NEEDS TO GO HERE', ));

Any idea how I can add the sanitize callback?

Not an issue

Not an issue but just wanted to say thanks ;)

Updating Styles After Color Change

Hi there, I've incorporated your color picker into a custom theme. It's awesome!

I'm running into an issue where the styles are not updated after changing the color. It's fine after I change another customizer setting and the overall styles are updated, but the trigger doesn't seem to be firing for the Alpha Color Picker.

Any ideas? Thanks!

Licensing

Hi there,
Is it possible to license this project under GPL 2 or later rather than GPL 3 or later? That way GPL 2 projects can incorporate it too.

Label only Shows Within Customizer After Clicking on Input

Since I am needing to include several instances of the Alpha Color Picker within the same Customizer section, I need the labels to show immediately. I found the template for the WP_Customizer_Color_Picker provides a paradigm that can easily be used here to solve this problem: https://developer.wordpress.org/reference/classes/wp_customize_color_control/

I have created a Pull-Request that makes this adjustment.

Not autorefresh of the page ?

Tested on 4.2 and 4.3RC2. I can customize colors on my theme but I can't get the page "live refresh" when I change the color value (just like with the standard color picker).

Am I doing something wrong ?

Not replacing the color picker just adding a new field

I'm working with a child theme, I did not create the parent theme. I can only get the color picker to add a new field rather than replace the existing color pickers. Any ideas?

Is this project still active?

I saw an issue with the color picker which will affect user with WordPress 4.9, so are you accepting pull requests? @BraadMartin

Error on Wordpress 4.7.2 - Uncaught ReferenceError: Color is not defined

I'm using on WP 2.7.2. The error is visible in the backend (Wordpress Admin).

I don't know if error was before or after of to update WP to new version.

Basically the error on Color Object it not found:

alpha-color-picker.js?ver=4.7.2:11 Uncaught ReferenceError: Color is not defined
at alpha-color-picker.js?ver=4.7.2:11
at alpha-color-picker.js?ver=4.7.2:260
(anonymous) @ alpha-color-picker.js?ver=4.7.2:11
(anonymous) @ alpha-color-picker.js?ver=4.7.2:260

Images to show the error:

Image 1:

Image 2:

Jose Carlos Ramos Carmenates

Labels and notifications invisible fix

The label should appear above the hidden control, not inside. I manage to fix this inside the javascript file, but there should be a better fix or?

/**
 * Initialization trigger.
 */
jQuery( document ).ready( function( $ ) {

	// Loop over each control and transform it into our color picker.
	$( '.alpha-color-control' ).each( function() {
		
		// Move title & notification into visible position
		var $parent = $(this).closest('li.customize-control-alpha-color');
		$parent.find('div.customize-control-notifications-container').prependTo($parent);
		$parent.find('span.customize-control-title').prependTo($parent);

		// Scope the vars....

Preview not showing new color

I am using your code in my Customizer theme and it is working with the following 2 exceptions:

1. When I change the color I cannot see this change in the preview.
2. When I click Save & Publish I still cannot see the change in the preview.

To fix this at the moment I have to CTRL + F5 to see it in the preview. However, it is not changing automatically. Any suggestions?

Sanitization, New controller on Wordpress Themes team!

I had a problem with sanitizing rgba.
I found a solution on:
https://make.wordpress.org/themes/2019/12/30/new-color-alpha-package-available/
However, the new controller has some new features that may make you prefer that one altogether.

Opacity slider does not change opacity until mouse button is released.

When changing the opacity value using the opacity slider, I noticed that the opacity changes were not taking effect until the the mouse button was released after moving the slider control. This behavior differs from the native iris color slider, which when changed, updates the Current Color preview immediately.

I found that by changing the slidechange event to slide on line 198 of alpha-color-picker.js, that I was able to get the opacity slider to work just like the iris's native saturation slider. I did not notice any negative side effects of this change, but definitely will let you be the judge. :-)

How to install?

Hello

Can you provide some help on how to enable this files?

I've tried to put in wp-content/plugins but they don't show up.

I've then tried dropping the files in wp-admin without results also.

I'm new to wordpress, can you provide a more detailed how to about this?

thank you in advance.

Having trouble with "clear" button not triggering a refresh.

Hello Braad,

First, allow me to thank you for a really nice repo and also your community involvement. I'm stoked about your work here. Maybe at some point I can help with it!

For now though, I am having a slight issue and I'm not sure where to begin my debugging efforts. Please see the gif below:

http://www.gfycat.com/SmartLinedBorzoi

What I'm seeing is that clicking "clear" does not trigger an update. The preview does not fade and the Save & Refresh button does not appear. However, actually choosing a new color does trigger an update. I want that behavior when I click "clear".

I am not getting any console errors.

Here's how I'm implementing your work:
https://gist.github.com/scofennell/0b088740bd07478dab12

And I'm passing the following args for add_control and add_setting:

array(3) {
  ["label"]=>
  string(15) "Body Text Color"
  ["section"]=>
  string(14) "globals-design"
  ["type"]=>
  string(11) "alpha-color"
}
array(3) {
  ["sanitize_callback"]=>
  string(19) "sanitize_text_field"
  ["sanitize_js_callback"]=>
  string(19) "sanitize_text_field"
  ["autoload"]=>
  bool(false)
}

I see a fair amount of discussion elsewhere in your repo on similar issues, but those tickets seem to pertain to live preview. I'm not talking about live preview at all, I'm just talking about the page not updating at all, and my issue is specific to the "clear" button.

I'm going to try a reduced test case with a simpler theme, but in the meantime I'd love to hear any advice you have.

WP version: 4.4
Plugins: none
Theme: Don't even ask, it's huge and crazy
Browser: Chrome & FF Mac, likely others
Multisite install

Multi-Color-Picker customizer control does not close

I'm just test driving your customizer color control components. All works fine, but I noticed that the
multi-color-picker does not close like the alpha-color-picker even after opening another control. Is that by design?

Color Picker not showing up

Hi, I'm trying to implement this into a theme I'm building, but I can't seem to get it to work, even with the example code you provided in the readme. All I get are plain text boxes with the color code inside and nothing happens when I click them.

I verified that the php file is getting fetched and that the css and js files are being loaded correctly. I have no errors in the console.

Implementation with wordpress 4.5.2

The color picker works fine, but I get the following error:

ReferenceError: wpColorPickerL10n is not defined

The solution is to enqueue iris and wp-color-picker, then define wpColorPickerL10n as follows:
wp_enqueue_script( 'wp-color-picker', admin_url( 'js/color-picker.js' ), array('jquery-ui-widget','iris'), false, 1); $colorpicker_l10n = array( 'clear' => __( 'Clear' ), 'defaultString' => __( 'Default' ), 'pick' => __( 'Select Color' ), 'current' => __( 'Current Color' ), ); wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); wp_enqueue_script( 'alpha-color-picker', plugins_url( 'alpha-color-picker/alpha-color-picker.js', __FILE__ ), array( 'jquery', 'iris'), null, true );
And thanks for the great work on this color picker.

k

p

sanitize_callback?

no function for sanitize?

Sanitize for disallowing HEX?

I'm currently building this alpha-color picker into my new WordPress theme and it works fabulously except I need some serious help on sanitizing it so it can't choose HEX when the opacity is at 100%. I want RGBA always. How can I do this?

Standard wp-color-picker shown

Hi Thank you for the plugin. I'm trying to use it in one of my plugins. The plugin seems to work. But theres an issue when I click on text field.

When I click on the color button, I can see a Wp Color Picker with Alpha channel.

When I click on the text field standard color picker is shown without alpha channel.

Can you please let me know what can I do get the text field to show alpha enabled color picker.

Previewed element is one color change behind the currently selected color

Hello,

First - major thanks for this!

I have run into a little issue while testing this great new RBGa control. While customizin', the target on the live preview is one color selection behind what I've set in the customizer panel. This is happening with the test code here.

The Current Color box on the RBGA customizer control updates immediately when changing colors, but the element targeted in the JS preview is one color behind. This is hard to notice when dragging the color selection circle around, but the phenomenon can easily be seen when selecting between various color presets or by single clicking different colors in the color selection area.

I'm using the following code to enqueue the JS preview:

function xxx_customizer_preview_js() {
    wp_enqueue_script( 'xxx-customizer-preview', get_stylesheet_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview', 'jquery' ), '0.1.0', true );
}
add_action( 'customize_preview_init', 'xxx_customizer_preview_js' );

Here is the contents of the customizer-preview.js file:

( function( $ ) {

    wp.customize( 'components_alpha_color_test_setting', function( value ) {
        value.bind( function( to ) {
            $( '.target-element' ).css( 'background-color', to );
        } );
    } );

} )( jQuery );

How to include the transparency-grid.png?

Hi,

thank you for the alpha-color-picker. It works fine. But for some reason I can't include the transparency-grid.png. The horizontal slider is missing. There is just the opacity number. I have all the files in the same folder and everything else is working fine.

Do you know what could be the reason?

Alpha color picker customizer control not showing up how I expected

I followed the instructions for the alpha color picker customizer control. I downloaded a ZIP of this repo, I put the customizer/alpha-color-picker folder into the root of my theme file, and I added in the code in my functions.php file, but when I go to the Customize page on the WordPress admin screen, I don't see the color picker in the way that GIF showed it. I only see a text input.

To be absolutely fair, this does work if I change the rgba value and press "Publish", but it doesn't look like a color picker like that GIF implied it would. If you're curious to see the code I put in functions.php, here it is:

function oforib_colorCustomizer($wp_customize) {
	require_once(dirname(__FILE__) . '/alpha-color-picker/alpha-color-picker.php');

	$wp_customize->add_setting('oforib_transparentOverlay', array(
		'default' => 'rgba(245, 83, 115, 0.9)',
		'transport' => 'refresh'
	));

	$wp_customize->add_control(new Customize_Alpha_Color_Control($wp_customize, 'Transparent Overlay Color Control', array(
		'label' => __('Transparent Overlay', 'Ofori Beauty'),
		'section' => 'oforib_siteColors',
		'settings' => 'oforib_transparentOverlay'
	)));
}

add_action('customize_register', 'oforib_colorCustomizer');

function oforib_customizerColorsCSS() { ?>
	<style type="text/css">
		@media (max-width: 1000px) {
			header#siteHeader nav#headerMenu {
				background-color: <?php echo get_theme_mod('oforib_transparentOverlay'); ?>;
			}
		}
	</style>
<?php }

add_action('wp_head', 'oforib_customizerColorsCSS');

Did I do something wrong, or is there something wrong with this customizer?