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 0f9584892..5d79ef587 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
@@ -1,6 +1,6 @@
 const { __ } = wp.i18n;
 
-const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
@@ -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 }){
@@ -322,20 +323,20 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     />
 
                                     <BaseControl
-                                        id="colorpicker"
+                                        id="backgroundcolorpicker"
                                         label={ __('Background color', 'tainacan')}>
-                                        <ColorPicker
-                                            color={ collectionBackgroundColor }
-                                            onChangeComplete={ ( value ) => {
-                                                collectionBackgroundColor = value.hex;
+                                        <TainacanBlocksCompatColorPicker
+                                            value={ collectionBackgroundColor }
+                                            onChange={ ( color ) => {
+                                                collectionBackgroundColor = color;
                                                 setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) 
                                             }}
-                                            disableAlpha
-                                            />
+                                            disableAlpha 
+                                        />
                                     </BaseControl>
 
                                     <BaseControl
-                                        id="colorpallete"
+                                        id="textcolorpicker"
                                         label={ __('Collection name color', 'tainacan')}>
                                         <ColorPalette 
                                             colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] } 
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 5c46375c3..afa51d630 100644
--- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
@@ -1,6 +1,6 @@
 const { __ } = wp.i18n;
 
-const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
@@ -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 {
@@ -569,20 +570,20 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     />
 
                                     <BaseControl
-                                        id="colorpicker"
-                                        label={ __('Background color', 'tainacan')}>
-                                        <ColorPicker
-                                            color={ collectionBackgroundColor }
-                                            onChangeComplete={ ( value ) => {
-                                                collectionBackgroundColor = value.hex;
+                                        id="backgroundcolorpicker"
+                                        label={ __('Background color', 'tainacan') }>
+                                        <TainacanBlocksCompatColorPicker
+                                            value={ collectionBackgroundColor }
+                                            onChange={ ( color ) => {
+                                                collectionBackgroundColor = color;
                                                 setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) 
                                             }}
                                             disableAlpha
-                                            />
+                                        />
                                     </BaseControl>
 
                                     <BaseControl
-                                        id="colorpallete"
+                                        id="colorpicker"
                                         label={ __('Collection name color', 'tainacan')}>
                                         <ColorPalette 
                                             colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] } 
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
index dca4615a0..9ed285682 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js
@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { 
     Button,
-    ColorPicker,
+    ColorPalette,
     BaseControl,
     CheckboxControl,
     RangeControl,
@@ -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,10 +587,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="backgroundColorPicker"
                                 label={ __('Background color', 'tainacan')}
                                 help={ __('The background color of the entire items list', 'tainacan') }>
-                            <ColorPicker
-                                color={ backgroundColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    backgroundColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ backgroundColor }
+                                onChange={ ( colorValue ) => {
+                                    backgroundColor = colorValue;
                                     setAttributes({ backgroundColor: backgroundColor });
                                 }}
                                 disableAlpha
@@ -600,10 +601,10 @@ 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') }>
-                            <ColorPicker
-                                color={ secondaryColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    secondaryColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ secondaryColor }
+                                onChange={ (colorValue ) => {
+                                    secondaryColor = colorValue;
                                     setAttributes({ secondaryColor: secondaryColor });
                                 }}
                                 disableAlpha
@@ -614,10 +615,10 @@ 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') }>
-                            <ColorPicker
-                                color={ primaryColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    primaryColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ primaryColor }
+                                onChange={ (colorValue ) => {
+                                    primaryColor = colorValue;
                                     setAttributes({ primaryColor: primaryColor });
                                 }}
                                 disableAlpha
@@ -628,10 +629,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="inputBackgroundColorPicker"
                                 label={ __('Input Background color', 'tainacan')}
                                 help={ __('The background color for input fields', 'tainacan') }>
-                            <ColorPicker
-                                color={ inputBackgroundColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    inputBackgroundColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ inputBackgroundColor }
+                                onChange={ (colorValue ) => {
+                                    inputBackgroundColor = colorValue;
                                     setAttributes({ inputBackgroundColor: inputBackgroundColor });
                                 }}
                                 disableAlpha
@@ -642,10 +643,10 @@ 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') }>
-                            <ColorPicker
-                                color={ inputColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    inputColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ inputColor }
+                                onChange={ (colorValue ) => {
+                                    inputColor = colorValue;
                                     setAttributes({ inputColor: inputColor });
                                 }}
                                 disableAlpha
@@ -656,10 +657,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="inputBorderColorPicker"
                                 label={ __('Input Border color', 'tainacan')}
                                 help={ __('The border color for input fields', 'tainacan') }>
-                            <ColorPicker
-                                color={ inputBorderColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    inputBorderColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ inputBorderColor }
+                                onChange={ (colorValue ) => {
+                                    inputBorderColor = colorValue;
                                     setAttributes({ inputBorderColor: inputBorderColor });
                                 }}
                                 disableAlpha
@@ -670,10 +671,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                 id="labelColorPicker"
                                 label={ __('Label Text color', 'tainacan')}
                                 help={ __('The text color for field labels', 'tainacan') }>
-                            <ColorPicker
-                                color={ labelColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    labelColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ labelColor }
+                                onChange={ (colorValue ) => {
+                                    labelColor = colorValue;
                                     setAttributes({ labelColor: labelColor });
                                 }}
                                 disableAlpha
@@ -684,10 +685,10 @@ 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') }>
-                            <ColorPicker
-                                color={ headingColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    headingColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ headingColor }
+                                onChange={ (colorValue ) => {
+                                    headingColor = colorValue;
                                     setAttributes({ headingColor: headingColor });
                                 }}
                                 disableAlpha
@@ -698,10 +699,10 @@ 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') }>
-                            <ColorPicker
-                                color={ infoColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    infoColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ infoColor }
+                                onChange={ (colorValue ) => {
+                                    infoColor = colorValue;
                                     setAttributes({ infoColor: infoColor });
                                 }}
                                 disableAlpha
@@ -711,10 +712,10 @@ 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') }>
-                            <ColorPicker
-                                color={ itemBackgroundColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    itemBackgroundColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ itemBackgroundColor }
+                                onChange={ (colorValue ) => {
+                                    itemBackgroundColor = colorValue;
                                     setAttributes({ itemBackgroundColor: itemBackgroundColor });
                                 }}
                                 disableAlpha
@@ -725,11 +726,11 @@ 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') }>
-                            <ColorPicker
-                                color={ itemHoverBackgroundColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    itemHoverBackgroundColor = colorValue.hex;
-                                    skeletonColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ itemHoverBackgroundColor }
+                                onChange={ (colorValue ) => {
+                                    itemHoverBackgroundColor = colorValue;
+                                    skeletonColor = colorValue;
                                     setAttributes({ 
                                         itemHoverBackgroundColor: itemHoverBackgroundColor,
                                         skeletonColor: skeletonColor
@@ -743,10 +744,10 @@ 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') }>
-                            <ColorPicker
-                                color={ itemHeadingHoverBackgroundColor }
-                                onChangeComplete={ (colorValue ) => {
-                                    itemHeadingHoverBackgroundColor = colorValue.hex;
+                            <TainacanBlocksCompatColorPicker
+                                value={ itemHeadingHoverBackgroundColor }
+                                onChange={ (colorValue ) => {
+                                    itemHeadingHoverBackgroundColor = colorValue;
                                     setAttributes({ itemHeadingHoverBackgroundColor: itemHeadingHoverBackgroundColor });
                                 }}
                                 disableAlpha
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/block.json b/src/views/gutenberg-blocks/blocks/item-submission-form/block.json
index f511f2d73..031a11325 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/block.json
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/block.json
@@ -56,8 +56,8 @@
             "default": false
         },
         "backgroundColor": {
-            "type": "Object",
-            "default": { "r": 255, "g": 255, "b": 255, "a": 0 }
+            "type": "String",
+            "default": "rgba(255,255,255,0)"
         },
         "baseFontSize": {
             "type": "Number",
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js b/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js
index 3a10501e6..ce5700382 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js
@@ -1,6 +1,234 @@
 const { __ } = wp.i18n;
+const { RichText, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 export default [
+    /* Deprecated on Tainacan 0.18.8, due to the backgroundColor being a string instead of object */
+    {
+        "attributes": {
+            "collectionId": {
+                "type": "String",
+                "default": ""
+            },
+            "isCollectionModalOpen": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideFileModalButton": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideTextModalButton": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideLinkModalButton": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideThumbnailSection": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideAttachmentsSection": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideHelpButtons": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideMetadataTypes": {
+                "type": "Boolean",
+                "default": false
+            },
+            "showAllowCommentsSection": {
+                "type": "Boolean",
+                "default": false
+            },
+            "hideCollapses": {
+                "type": "Boolean",
+                "default": false
+            },
+            "backgroundColor": {
+                "type": "Object",
+                "default": { "r": 255, "g": 255, "b": 255, "a": 0 }
+            },
+            "baseFontSize": {
+                "type": "Number",
+                "default": 16
+            },
+            "inputColor": {
+                "type": "String",
+                "default": "#1d1d1d"
+            },
+            "inputBackgroundColor": {
+                "type": "String",
+                "default": "#ffffff"
+            },
+            "inputBorderColor": {
+                "type": "String",
+                "default": "#dbdbdb"
+            },
+            "labelColor": {
+                "type": "String",
+                "default": "#454647"
+            },
+            "infoColor": {
+                "type": "String",
+                "default": "#555758"
+            },
+            "primaryColor": {
+                "type": "String",
+                "default": "#d9eced"
+            },
+            "secondaryColor": {
+                "type": "String",
+                "default": "#298596"
+            },
+            "enabledMetadata": {
+                "type": "Array",
+                "default": []
+            },
+            "collectionMetadata": {
+                "type": "Array",
+                "default": []
+            },
+            "isLoadingCollectionMetadata": {
+                "type": "Boolean",
+                "default": false
+            },
+            "sentFormHeading": {
+                "type": "String",
+                "default": "Form submitted!"
+            },
+            "sentFormMessage": {
+                "type": "String",
+                "default": "Thank you. Your item was submitted to the collection."
+            },
+            "documentSectionLabel": {
+                "type": "String",
+                "default": "Document"
+            },
+            "attachmentsSectionLabel": {
+                "type": "String",
+                "default": "Attachments"
+            },
+            "thumbnailSectionLabel": {
+                "type": "String",
+                "default": "Thumbnail"
+            },
+            "metadataSectionLabel": {
+                "type": "String",
+                "default": "Metadata"
+            },
+            "showItemLinkButton": {
+                "type": "Boolean",
+                "default": false
+            },
+            "itemLinkButtonLabel": {
+                "type": "String",
+                "default": "Go to the item page"
+            },
+            "helpInfoBellowLabel": {
+                "type": "Boolean",
+                "default": false
+            },
+            "showTermsAgreementCheckbox": {
+                "type": "Boolean",
+                "default": false
+            },
+            "termsAgreementMessage": {
+                "type": "String",
+                "default": "I agree to submit this item information."
+            }
+        },
+        "supports": {
+            "align": ["full", "wide"],
+            "html": true,
+            "multiple": false
+        },
+        save({ attributes, className }) {
+            const {
+                collectionId,
+                backgroundColor,
+                hideFileModalButton,
+                hideTextModalButton,
+                hideLinkModalButton,
+                hideThumbnailSection,
+                hideAttachmentsSection,
+                showAllowCommentsSection,
+                hideHelpButtons,
+                hideMetadataTypes,
+                hideCollapses,
+                documentSectionLabel,
+                thumbnailSectionLabel,
+                attachmentsSectionLabel,
+                metadataSectionLabel,
+                baseFontSize,
+                inputColor,
+                inputBackgroundColor,
+                inputBorderColor,
+                labelColor,
+                infoColor,
+                primaryColor,
+                secondaryColor,
+                enabledMetadata,
+                sentFormHeading,
+                sentFormMessage,
+                showItemLinkButton,
+                itemLinkButtonLabel,
+                helpInfoBellowLabel,
+                showTermsAgreementCheckbox,
+                termsAgreementMessage
+            } = attributes;
+            
+            const blockProps = useBlockProps.save();
+            let termsAgreementMessageHTML = <RichText.Content { ...blockProps } tagName="p" value={ termsAgreementMessage } />;
+            termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : '';
+        
+            return <div 
+                        style={{
+                            'font-size': baseFontSize + 'px',
+                            '--tainacan-base-font-size': baseFontSize + 'px',
+                            '--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
+                            '--tainacan-input-color': inputColor,
+                            '--tainacan-input-background-color': inputBackgroundColor,
+                            '--tainacan-input-border-color': inputBorderColor,
+                            '--tainacan-label-color': labelColor,
+                            '--tainacan-info-color': infoColor,
+                            '--tainacan-primary': primaryColor,
+                            '--tainacan-secondary': secondaryColor
+                        }}
+                        className={ className }>
+                <div 
+                        id="tainacan-item-submission-form"
+                        data-module="item-submission-form"
+                        collection-id={ collectionId }
+                        hide-file-modal-button={ hideFileModalButton.toString() }
+                        hide-text-modal-button={ hideTextModalButton.toString() }
+                        hide-link-modal-button={ hideLinkModalButton.toString() }
+                        hide-thumbnail-section={ hideThumbnailSection.toString() }
+                        hide-attachments-section={ hideAttachmentsSection.toString() }
+                        show-allow-comments-section={ showAllowCommentsSection.toString() }
+                        hide-help-buttons={ hideHelpButtons.toString() }
+                        hide-metadata-types={ hideMetadataTypes.toString() }
+                        hide-collapses={ hideCollapses.toString() }
+                        enabled-metadata={ enabledMetadata.toString() }
+                        sent-form-heading={ sentFormHeading }
+                        sent-form-message={ sentFormMessage }
+                        document-section-label={ documentSectionLabel }
+                        thumbnail-section-label={ thumbnailSectionLabel }
+                        attachments-section-label={ attachmentsSectionLabel }
+                        metadata-section-label={ metadataSectionLabel }
+                        show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
+                        show-terms-agreement-checkbox={ showTermsAgreementCheckbox ? showTermsAgreementCheckbox.toString() : 'false' }
+                        terms-agreement-message={ termsAgreementMessageHTML }
+                        item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
+                        help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
+                </div>
+            </div>
+        }
+    },
     /* Deprecated on Tainacan 0.18.7, due to the addition of showTermsAgreementCheckbox */
     {
         "attributes": {
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 649722cb9..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,
-    ColorPicker,
     BaseControl,
     CheckboxControl,
     FontSizePicker,
@@ -20,8 +19,9 @@ 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, isSelected, clientId }) {
+export default function ({ attributes, setAttributes, className }) {
     let {
         collectionId,
         isCollectionModalOpen,
@@ -88,6 +88,13 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
             size: 20,
         },
     ];
+    
+    if (backgroundColor.rgb != undefined) {
+        if (backgroundColor.rgb.a)
+            backgroundColor = 'rgba(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ',' + backgroundColor.rgb.a + ')';
+        else
+            backgroundColor = 'rgb(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ')';
+    }
 
     function openCollectionModal() {
         isCollectionModalOpen = true;
@@ -406,12 +413,13 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="backgroundColorPicker"
                                     label={ __('Background color', 'tainacan')}
                                     help={ __('The background color of the entire items list', 'tainacan') }>
-                                <ColorPicker
-                                    color={ backgroundColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        backgroundColor = colorValue.rgb;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ backgroundColor }
+                                    onChange={ (colorValue ) => {
+                                        backgroundColor = colorValue;
                                         setAttributes({ backgroundColor: backgroundColor });
                                     }}
+                                    enableAlpha
                                 />
                             </BaseControl>
                             <HorizontalRule />
@@ -419,10 +427,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     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') }>
-                                <ColorPicker
-                                    color={ secondaryColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        secondaryColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ secondaryColor }
+                                    onChange={ (colorValue ) => {
+                                        secondaryColor = colorValue;
                                         setAttributes({ secondaryColor: secondaryColor });
                                     }}
                                     disableAlpha
@@ -433,10 +441,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="primaryColorPicker"
                                     label={ __('Tooltips background color', 'tainacan')}
                                     help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
-                                <ColorPicker
-                                    color={ primaryColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        primaryColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ primaryColor }
+                                    onChange={ (colorValue ) => {
+                                        primaryColor = colorValue;
                                         setAttributes({ primaryColor: primaryColor });
                                     }}
                                     disableAlpha
@@ -447,10 +455,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="inputBackgroundColorPicker"
                                     label={ __('Input Background color', 'tainacan')}
                                     help={ __('The background color for input fields', 'tainacan') }>
-                                <ColorPicker
-                                    color={ inputBackgroundColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        inputBackgroundColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ inputBackgroundColor }
+                                    onChange={ (colorValue ) => {
+                                        inputBackgroundColor = colorValue;
                                         setAttributes({ inputBackgroundColor: inputBackgroundColor });
                                     }}
                                     disableAlpha
@@ -461,10 +469,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="inputColorPicker"
                                     label={ __('Input Text color', 'tainacan')}
                                     help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
-                                <ColorPicker
-                                    color={ inputColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        inputColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ inputColor }
+                                    onChange={ (colorValue ) => {
+                                        inputColor = colorValue;
                                         setAttributes({ inputColor: inputColor });
                                     }}
                                     disableAlpha
@@ -475,10 +483,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="inputBorderColorPicker"
                                     label={ __('Input Border color', 'tainacan')}
                                     help={ __('The border color for input fields', 'tainacan') }>
-                                <ColorPicker
-                                    color={ inputBorderColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        inputBorderColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ inputBorderColor }
+                                    onChange={ (colorValue ) => {
+                                        inputBorderColor = colorValue;
                                         setAttributes({ inputBorderColor: inputBorderColor });
                                     }}
                                     disableAlpha
@@ -489,10 +497,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     id="labelColorPicker"
                                     label={ __('Label Text color', 'tainacan')}
                                     help={ __('The text color for field labels', 'tainacan') }>
-                                <ColorPicker
-                                    color={ labelColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        labelColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ labelColor }
+                                    onChange={ (colorValue ) => {
+                                        labelColor = colorValue;
                                         setAttributes({ labelColor: labelColor });
                                     }}
                                     disableAlpha
@@ -502,10 +510,10 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                                     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') }>
-                                <ColorPicker
-                                    color={ infoColor }
-                                    onChangeComplete={ (colorValue ) => {
-                                        infoColor = colorValue.hex;
+                                <TainacanBlocksCompatColorPicker
+                                    value={ infoColor }
+                                    onChange={ (colorValue ) => {
+                                        infoColor = colorValue;
                                         setAttributes({ infoColor: infoColor });
                                     }}
                                     disableAlpha
@@ -552,7 +560,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                             </div>
                             <div
                                     style={{
-                                        '--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
+                                        '--tainacan-background-color': backgroundColor,
                                         '--tainacan-input-color': inputColor,
                                         '--tainacan-input-background-color': inputBackgroundColor,
                                         '--tainacan-input-border-color': inputBorderColor,
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/save.js b/src/views/gutenberg-blocks/blocks/item-submission-form/save.js
index 0a97899b1..d851c463c 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/save.js
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/save.js
@@ -39,11 +39,18 @@ export default function({ attributes, className }) {
     let termsAgreementMessageHTML = <RichText.Content { ...blockProps } tagName="p" value={ termsAgreementMessage } />;
     termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : '';
 
+    if (backgroundColor.rgb != undefined) {
+        if (backgroundColor.rgb.a)
+            backgroundColor = 'rgba(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ',' + backgroundColor.rgb.a + ')';
+        else
+            backgroundColor = 'rgb(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ')';
+    }
+
     return <div 
                 style={{
                     'font-size': baseFontSize + 'px',
                     '--tainacan-base-font-size': baseFontSize + 'px',
-                    '--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
+                    '--tainacan-background-color': backgroundColor,
                     '--tainacan-input-color': inputColor,
                     '--tainacan-input-background-color': inputBackgroundColor,
                     '--tainacan-input-border-color': inputBorderColor,
diff --git a/src/views/gutenberg-blocks/blocks/search-bar/edit.js b/src/views/gutenberg-blocks/blocks/search-bar/edit.js
index 6e5a9699e..b0fbbc5de 100644
--- a/src/views/gutenberg-blocks/blocks/search-bar/edit.js
+++ b/src/views/gutenberg-blocks/blocks/search-bar/edit.js
@@ -1,10 +1,11 @@
 const { __ } = wp.i18n;
 
-const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 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 }) {
@@ -308,22 +309,22 @@ export default function({ attributes, setAttributes, className, isSelected }) {
                                     />
 
                                     <BaseControl
-                                        id="colorpicker"
-                                        label={ __('Background color', 'tainacan')}>
-                                        <ColorPicker
-                                            color={ collectionBackgroundColor }
-                                            onChangeComplete={ ( value ) => {
-                                                collectionBackgroundColor = value.hex;
-                                                setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) ;
-                                                setContent();
-                                            }}
+                                        id="backgroundcolorpicker"
+                                        label={ __('Background color', 'tainacan') }>
+                                        <TainacanBlocksCompatColorPicker
+                                            value={ collectionBackgroundColor }
+                                            onChange={ ( color ) => {
+                                                collectionBackgroundColor = color;
+                                                setAttributes({ collectionBackgroundColor: collectionBackgroundColor });
+                                                setContent(); 
+                                            }} 
                                             disableAlpha
-                                            />
+                                        />
                                     </BaseControl>
 
                                     <BaseControl
-                                        id="colorpallete"
-                                        label={ __('Collection name color', 'tainacan')}>
+                                        id="colorpicker"
+                                        label={ __('Collection name color', 'tainacan') }>
                                         <ColorPalette 
                                             colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] } 
                                             value={ collectionTextColor }
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 } />