diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
index 237df6dd6..5d79ef587 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
@@ -10,6 +10,7 @@ import axios from 'axios';
 import qs from 'qs';
 import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
+import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
 import 'swiper/css/swiper.min.css';
 
 export default function({ attributes, setAttributes, className, isSelected, clientId }){
@@ -324,7 +325,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     <BaseControl
                                         id="backgroundcolorpicker"
                                         label={ __('Background color', 'tainacan')}>
-                                        <ColorPalette 
+                                        <TainacanBlocksCompatColorPicker
                                             value={ collectionBackgroundColor }
                                             onChange={ ( color ) => {
                                                 collectionBackgroundColor = color;
diff --git a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
index b2cca49b4..afa51d630 100644
--- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
@@ -10,6 +10,7 @@ import axios from 'axios';
 import qs from 'qs';
 import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
+import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
 
 export default function({ attributes, setAttributes, className, isSelected, clientId }){
     let {
@@ -571,7 +572,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     <BaseControl
                                         id="backgroundcolorpicker"
                                         label={ __('Background color', 'tainacan') }>
-                                        <ColorPalette 
+                                        <TainacanBlocksCompatColorPicker
                                             value={ collectionBackgroundColor }
                                             onChange={ ( color ) => {
                                                 collectionBackgroundColor = color;
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
index bee12cc88..9ed285682 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
@@ -24,6 +24,7 @@ const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2'
 
 import CollectionModal from './collection-modal.js';
 import TermModal from './term-modal.js';
+import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
 
 export default function({ attributes, setAttributes, className, isSelected, clientId }) {
     let {
@@ -586,7 +587,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="backgroundColorPicker"
                                 label={ __('Background color', 'tainacan')}
                                 help={ __('The background color of the entire items list', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ backgroundColor }
                                 onChange={ ( colorValue ) => {
                                     backgroundColor = colorValue;
@@ -600,7 +601,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="secondaryColorPicker"
                                 label={ __('Link and Active Main color', 'tainacan')}
                                 help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ secondaryColor }
                                 onChange={ (colorValue ) => {
                                     secondaryColor = colorValue;
@@ -614,7 +615,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="primaryColorPicker"
                                 label={ __('Tooltips background color', 'tainacan')}
                                 help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ primaryColor }
                                 onChange={ (colorValue ) => {
                                     primaryColor = colorValue;
@@ -628,7 +629,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="inputBackgroundColorPicker"
                                 label={ __('Input Background color', 'tainacan')}
                                 help={ __('The background color for input fields', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ inputBackgroundColor }
                                 onChange={ (colorValue ) => {
                                     inputBackgroundColor = colorValue;
@@ -642,7 +643,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="inputColorPicker"
                                 label={ __('Input Text color', 'tainacan')}
                                 help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ inputColor }
                                 onChange={ (colorValue ) => {
                                     inputColor = colorValue;
@@ -656,7 +657,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="inputBorderColorPicker"
                                 label={ __('Input Border color', 'tainacan')}
                                 help={ __('The border color for input fields', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ inputBorderColor }
                                 onChange={ (colorValue ) => {
                                     inputBorderColor = colorValue;
@@ -670,7 +671,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="labelColorPicker"
                                 label={ __('Label Text color', 'tainacan')}
                                 help={ __('The text color for field labels', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ labelColor }
                                 onChange={ (colorValue ) => {
                                     labelColor = colorValue;
@@ -684,7 +685,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="headingColorPicker"
                                 label={ __('Headings Text color', 'tainacan')}
                                 help={ __('The text color for headings such as items title and filters menu header', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ headingColor }
                                 onChange={ (colorValue ) => {
                                     headingColor = colorValue;
@@ -698,7 +699,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="infoColorPicker"
                                 label={ __('General Info Text color', 'tainacan')}
                                 help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ infoColor }
                                 onChange={ (colorValue ) => {
                                     infoColor = colorValue;
@@ -711,7 +712,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="itemBackgroundColorPicker"
                                 label={ __('Item Background color', 'tainacan')}
                                 help={ __('The background color for an item on the list', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ itemBackgroundColor }
                                 onChange={ (colorValue ) => {
                                     itemBackgroundColor = colorValue;
@@ -725,7 +726,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="itemHoverBackgroundColorPicker"
                                 label={ __('Item Hover Background color', 'tainacan')}
                                 help={ __('The background color for an item on the list, when hovered', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ itemHoverBackgroundColor }
                                 onChange={ (colorValue ) => {
                                     itemHoverBackgroundColor = colorValue;
@@ -743,7 +744,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="itemHeadingHoverBackgroundColorPicker"
                                 label={ __('Item Heading Hover Background color', 'tainacan')}
                                 help={ __('The background color for the item heading (where the title is), when hovered', 'tainacan') }>
-                            <ColorPalette
+                            <TainacanBlocksCompatColorPicker
                                 value={ itemHeadingHoverBackgroundColor }
                                 onChange={ (colorValue ) => {
                                     itemHeadingHoverBackgroundColor = colorValue;
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js b/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
index 78f53e46e..d6cf3f505 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
@@ -4,7 +4,6 @@ const {
     Button,
     TextControl,
     TextareaControl,
-    ColorPalette,
     BaseControl,
     CheckboxControl,
     FontSizePicker,
@@ -20,6 +19,7 @@ const { InspectorControls, BlockControls, RichText, useBlockProps } = (tainacan_
 import tainacan from '../../js/axios.js';
 import CollectionModal from '../faceted-search/collection-modal.js';
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
+import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
 
 export default function ({ attributes, setAttributes, className }) {
     let {
@@ -413,7 +413,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="backgroundColorPicker"
                                     label={ __('Background color', 'tainacan')}
                                     help={ __('The background color of the entire items list', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ backgroundColor }
                                     onChange={ (colorValue ) => {
                                         backgroundColor = colorValue;
@@ -427,7 +427,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="secondaryColorPicker"
                                     label={ __('Link and Active Main color', 'tainacan')}
                                     help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ secondaryColor }
                                     onChange={ (colorValue ) => {
                                         secondaryColor = colorValue;
@@ -441,7 +441,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="primaryColorPicker"
                                     label={ __('Tooltips background color', 'tainacan')}
                                     help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ primaryColor }
                                     onChange={ (colorValue ) => {
                                         primaryColor = colorValue;
@@ -455,7 +455,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="inputBackgroundColorPicker"
                                     label={ __('Input Background color', 'tainacan')}
                                     help={ __('The background color for input fields', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ inputBackgroundColor }
                                     onChange={ (colorValue ) => {
                                         inputBackgroundColor = colorValue;
@@ -469,7 +469,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="inputColorPicker"
                                     label={ __('Input Text color', 'tainacan')}
                                     help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ inputColor }
                                     onChange={ (colorValue ) => {
                                         inputColor = colorValue;
@@ -483,7 +483,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="inputBorderColorPicker"
                                     label={ __('Input Border color', 'tainacan')}
                                     help={ __('The border color for input fields', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ inputBorderColor }
                                     onChange={ (colorValue ) => {
                                         inputBorderColor = colorValue;
@@ -497,7 +497,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="labelColorPicker"
                                     label={ __('Label Text color', 'tainacan')}
                                     help={ __('The text color for field labels', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ labelColor }
                                     onChange={ (colorValue ) => {
                                         labelColor = colorValue;
@@ -510,7 +510,7 @@ export default function ({ attributes, setAttributes, className }) {
                                     id="infoColorPicker"
                                     label={ __('General Info Text color', 'tainacan')}
                                     help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
-                                <ColorPalette
+                                <TainacanBlocksCompatColorPicker
                                     value={ infoColor }
                                     onChange={ (colorValue ) => {
                                         infoColor = colorValue;
diff --git a/src/views/gutenberg-blocks/blocks/search-bar/edit.js b/src/views/gutenberg-blocks/blocks/search-bar/edit.js
index 56fb553c6..b0fbbc5de 100644
--- a/src/views/gutenberg-blocks/blocks/search-bar/edit.js
+++ b/src/views/gutenberg-blocks/blocks/search-bar/edit.js
@@ -5,6 +5,7 @@ const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeho
 const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
+import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
 import SearchBarModal from './search-bar-modal.js';
 
 export default function({ attributes, setAttributes, className, isSelected }) {
@@ -310,7 +311,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
                                     <BaseControl
                                         id="backgroundcolorpicker"
                                         label={ __('Background color', 'tainacan') }>
-                                        <ColorPalette 
+                                        <TainacanBlocksCompatColorPicker
                                             value={ collectionBackgroundColor }
                                             onChange={ ( color ) => {
                                                 collectionBackgroundColor = color;
diff --git a/src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js b/src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js
new file mode 100644
index 000000000..260fec168
--- /dev/null
+++ b/src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js
@@ -0,0 +1,21 @@
+const { ColorPicker, ColorPalette } = wp.components;
+
+export default function TainacanBlocksCompatColorPicker({ value, onChange, enableAlpha, disableAlpha }) {
+    
+    const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
+
+    return currentWPVersion < '5.9' ?
+        <ColorPicker
+            color={ value }
+            onChangeComplete={ (value) => onChange(value.hex) }
+            enableAlpha={ enableAlpha }
+            disableAlpha={ disableAlpha }
+            />
+        : 
+        <ColorPalette
+            value={ value }
+            onChange={ onChange }
+            enableAlpha={ enableAlpha }
+            disableAlpha={ disableAlpha }
+            />
+}
diff --git a/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js b/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js
index 5b35d898e..33b92ba7d 100644
--- a/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js
+++ b/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js
@@ -2,7 +2,7 @@ const { Button, Toolbar, ToolbarGroup, ToolbarButton } = wp.components;
 
 export default function TainacanBlocksCompatToolbar({ label, icon, onClick, onClickParams, controls }) {
     
-    const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? currentWPVersion : tainacan_plugin.wp_version;
+    const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
 
     if (controls !== undefined)
         return currentWPVersion < '5.4' ? <Toolbar controls={ controls } /> : <ToolbarGroup controls={ controls } />