Below is the function to add my custom colors, the 'disable-custom-colors' is working properly, but the custom colors that I'm trying to add are not appearing in the editor. I have also tried clearing my cache and the issue persists. function add_custom_gutenberg_color_palette() { add_theme_support( 'disable-custom-colors' ); add_theme_support( 'editor-color-palette', array( array( 'name' => esc_html__('Red', 'twentytwentyone-child'), 'slug' => 'red', 'color' => '#E4D1D1', ), array( 'name' => esc_html__('Orange', 'twentytwentyone-child'), 'slug' => 'orange', 'color' => '#E4DAD1', ) ) ); } add_action( 'after_setup_theme', 'add_custom_gutenberg_color_palette' ); …

I'm trying to clear the WordPress colorpicker but seems it doesn't work. This is what I'Ve tried: $('#element').wpColorPicker('clear'); //error: Uncaught Error: no such method 'clear' for wpColorPicker widget instance $('#element').wpColorPicker('color', '#'); //no output/change $('#element').wpColorPicker('color', ''); //no output/change Of course there's no method mentioned in the documentation but there's a options for a callback method so it's maybe possible via some "hacking"?

I have added the WordPress Core color picker (iris) to a widget I developed, but when I edit the color, there is no change triggered. As a result, the iframe (live preview) for the Customizer does not update unless you trigger a change in another input field. JavaScript to initialize the color picker: var myOptions = { // you can declare a default color here, // or in the data-default-color attribute on the input defaultColor: '#000', // a callback to …

I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker instead of default text input in form() method of Widget class: jQuery(document).ready(function($){ $('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker(); }); All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color. Previously trying for …

Do I need to use the ColorGradientControl component to add this interface to a custom block, even if gradients are deactivated by theme.json?

Since the latest WP update it changed my setting. Normally I had a ''change text color'' setting in the red area (see screenshot). Anyone can guide me how to add the option in this field?

This question here is asking the same question as I am, but there were no adequate answers nor a selected correct answer so I am asking again hoping if I ask in a more coherent manner I might get a response. I am trying to implement the colour picker wheel as seen in the Wordpress Theme Customization API pane for selecting colours. Loading the scripts and styles works fine when using the hook, "admin_enqueue_scripts" works however trying to load these …

For the Gutenberg editor, is there a setting, a code-behind change or any other way (if necessary, a plugin, but I'd rather avoid that) to always show the "text color" menu item when editing a paragraph, just as the menu items for "bold", "italics" and "insert link" ? If not, is there a way to configure a keyboard shortcut to bring up the selector?

I customized my Gutenberg block color pallete and the WordPress default is that the CSS classes generated has the form has-(slug)-color. For example say I added a color called red. The resulting CSS class will be has-red-color. I traced the function to a core WordPress file: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/colors.php#L73 How do I override this function from my functions.php in my theme so I can generate different class names. I've been reading about hooks and filters but I'm not sure how to use …

I'm trying to add color picker for header/title under Appearance > Customize > Color. As of now, the only option there is background color... For reference, I'm using a Genesis child theme. I'd appreciate some guidance. :)

I'm maintaining a Wordpress theme for a website that has an annual style change. Nothing fundamental, a few images get switched out and the colour scheme changes as well. The theme uses a pallette of 3 or 4 colours for the backgrounds of elements such as the main page, articles, drop down menus etc. I'm personally able to go through all the classes and change those colours around, I use SCSS, so I could potentially update variables with the color …

The default behavior for the gutenberg blocks with color pallet is: The class name is built appending ‘has-‘, followed by the class name using kebab case and ending with the context name. https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-color-palettes which make the color classes like has-blue-100-color has-black-background-color What I am looking for is a way to change the default naming convention has-*-color The reason is to make the blocks compatible with tailwindcss color naming - text-blue-100 bg-black

I'm developing a WordPress theme in which I'm adding a color control to the Customizer’s “Colors” section, so that the user can customize the footer’s background color. I added a functioning color picker to the Customizer, but I can’t get the color picker to show a “Default” color and button. I assigned a hex color value to the ‘default’ parameter in the Customizer setting associated with my color control, assuming this would be the default color for this control, but …

I have seen this reply before: How to implement color picker from wordpress in my plugin? But I personally still don't quite understand how I can add it in my plugin that follows the boilerplate structure. Can someone explain it to me better? And where do I get the files for the color picker from? Thanks!

i tried to use iris color picker in my plugin admin area but when i implemented i'm getting this error- TypeError: $(...).wpColorPicker is not a functionCode- function sam() { wp_enqueue_style( 'wp-color-picker'); wp_enqueue_script( 'wp-color-picker'); } add_action( 'admin_enqueue_scripts', 'sam' ); <!--HTML--> <input type="text" value="#bada55" class="ir" /> <!--SCRIPT--> <script type="text/javascript"> jQuery(document).ready(function($){ $('.ir').wpColorPicker(); }); </script> Why am I getting this error any clue? where am I making wrong?

I am trying to add new colors to my gutenberg color palette, I would like to add a red color, but when I add the following lines: array( 'name' => _x( 'Red', 'Name of the red color in the Gutenberg palette', 'baskerville' ), 'slug' => 'red', 'color' => '#d70004', ), My color palette shows red, the standard gutenberg text editor UI is coloring my red text, but the frontend does not. I am currently working on the Baskerville theme. Here's …

Is there a away to set the gutenberg block-editor color palette other than in the theme?

I'm new to WordPress I want to add simple color picker in theme options.I tried but not getting can anyone suggest me?

I would like to accomplice the following: Define theme colors in a SASS (.scss) file using nested variables. Add these colors to gutenberg using add_theme_support( 'editor-color-palette', array()) Have a visual color inspector pallete in Gutenberg. Save the object key, not value, to a attribute Use the atribute in the php callback to set a div class using .has-key-background-color So far, I've been able to generate and editor.scss and style.scss using something like: _variables.scss $theme-colors: ( base: #fff, base-typography: #333, primary: …

Just installed the new 2019 theme. The customizer offers "default" and "custom" color options. When you select "custom", it shows a slider to pick the color, not the normal color-picker. Unfortunately, using that slider is pretty hit and miss and the customizer does not offer a way to enter a precise color (hue). Where do I need to go and what do I need to do to enter a precise color for this theme? Note: I am NOT looking for …