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!

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, 5 months ago by fernandoazarcon2.
• This reply was modified 2 years, 5 months ago by fernandoazarcon2.
• This reply was modified 2 years, 5 months ago by fernandoazarcon2.

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 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?