Any Way to Disable Color Picker?

Hi @stevieboy23,

You can do so by enqueueing your own style in the Block Editor.

For instance, in your Child Theme directory, you create a new file called my-editor-style.css

Then, add this PHP in functions.php:

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/my-editor-style.css", false,'1.0', 'all' );
} );

Your my-editor-style.css should have this code:

.react-colorful {
	display: none !important;
}

Hope this helps!

Hi, thanks for replying.

I already have editor-styles enqueued, and .react-colorful {display: none !important;} in my css was the first thing I tried. Unfortunately the color picker still appears, stubbornly refusing to display:none …

Can you right click and inspect while editing a page, and check if my-block-editor-styles is really enqueued? Example: https://share.getcloudapp.com/04uQE0nJ

If it is, can you check if the CSS is implemented?: https://share.getcloudapp.com/KoujAyRz

If it’s implemented and something is overwriting it by precedence, try adding selectors to the CSS code to exceed the precedence of the other CSS rule.

Kindly let us know.

• This reply was modified 2 years, 8 months ago by fernandoazarcon2.
• This reply was modified 2 years, 8 months ago by fernandoazarcon2.
• This reply was modified 2 years, 8 months ago by fernandoazarcon2.

Hi, Yes, I already have a sizeable editor-styles.css that loads my styles for the backend. But it seems to have no effect with .react-colorful. I guess I’ll just have to live with it. Anyway, GenerateBlocks is still a brilliant plugin!

If you’re not seeing the code:

.react-colorful {
	display: none !important;
}

applied to the color picker, there may be a syntax error somewhere in your style sheet.

Try adding a basic CSS code below the code above and see if it will work. Something like to test:

p, h1, h2, h3 {
	color: green !important;
}

If it doesn’t work as well, then there’s a syntax error somewhere in the stylesheet.

Hope this clarifies!

Thank you for the compliment!

I knew there was nothing wrong with my css file as it was loading my styles, but I added your code just to check…

Anyway as this image shows: https://andystewart.info/colorful.png .react-colorful still persists – So, I guess I really will have to live with it! Best Wishes.

I see. That’s odd.

If you inspect the color picker, can you see the code as such?: https://share.getcloudapp.com/E0uyZd2v

Perhaps you can try a different CSS selector?

Hi there! We haven’t heard back from you for a while now so we’re going to go ahead and set this topic as resolved. Feel free to reply if you need any more help.