From 06dc18e6b215b0d99fe4bb9feadadaf07c89a701 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 13 Jan 2022 12:00:37 -0300 Subject: [PATCH 1/2] Replaces usage of color picker component by color palette #656. --- .../blocks/carousel-items-list/edit.js | 18 +- .../blocks/dynamic-items-list/edit.js | 18 +- .../blocks/faceted-search/edit.js | 100 ++++---- .../blocks/item-submission-form/block.json | 4 +- .../blocks/item-submission-form/deprecated.js | 228 ++++++++++++++++++ .../blocks/item-submission-form/edit.js | 78 +++--- .../blocks/item-submission-form/save.js | 9 +- .../blocks/search-bar/edit.js | 26 +- 8 files changed, 362 insertions(+), 119 deletions(-) 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..237df6dd6 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 ); @@ -322,20 +322,20 @@ export default function({ attributes, setAttributes, className, isSelected, clie /> - { - collectionBackgroundColor = value.hex; + { + collectionBackgroundColor = color; setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) }} - disableAlpha - /> + disableAlpha + /> - { - collectionBackgroundColor = value.hex; + id="backgroundcolorpicker" + label={ __('Background color', 'tainacan') }> + { + collectionBackgroundColor = color; setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) }} disableAlpha - /> + /> - { - backgroundColor = colorValue.hex; + { + backgroundColor = colorValue; setAttributes({ backgroundColor: backgroundColor }); }} disableAlpha @@ -600,10 +600,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') }> - { - secondaryColor = colorValue.hex; + { + secondaryColor = colorValue; setAttributes({ secondaryColor: secondaryColor }); }} disableAlpha @@ -614,10 +614,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') }> - { - primaryColor = colorValue.hex; + { + primaryColor = colorValue; setAttributes({ primaryColor: primaryColor }); }} disableAlpha @@ -628,10 +628,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie id="inputBackgroundColorPicker" label={ __('Input Background color', 'tainacan')} help={ __('The background color for input fields', 'tainacan') }> - { - inputBackgroundColor = colorValue.hex; + { + inputBackgroundColor = colorValue; setAttributes({ inputBackgroundColor: inputBackgroundColor }); }} disableAlpha @@ -642,10 +642,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') }> - { - inputColor = colorValue.hex; + { + inputColor = colorValue; setAttributes({ inputColor: inputColor }); }} disableAlpha @@ -656,10 +656,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie id="inputBorderColorPicker" label={ __('Input Border color', 'tainacan')} help={ __('The border color for input fields', 'tainacan') }> - { - inputBorderColor = colorValue.hex; + { + inputBorderColor = colorValue; setAttributes({ inputBorderColor: inputBorderColor }); }} disableAlpha @@ -670,10 +670,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie id="labelColorPicker" label={ __('Label Text color', 'tainacan')} help={ __('The text color for field labels', 'tainacan') }> - { - labelColor = colorValue.hex; + { + labelColor = colorValue; setAttributes({ labelColor: labelColor }); }} disableAlpha @@ -684,10 +684,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') }> - { - headingColor = colorValue.hex; + { + headingColor = colorValue; setAttributes({ headingColor: headingColor }); }} disableAlpha @@ -698,10 +698,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') }> - { - infoColor = colorValue.hex; + { + infoColor = colorValue; setAttributes({ infoColor: infoColor }); }} disableAlpha @@ -711,10 +711,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') }> - { - itemBackgroundColor = colorValue.hex; + { + itemBackgroundColor = colorValue; setAttributes({ itemBackgroundColor: itemBackgroundColor }); }} disableAlpha @@ -725,11 +725,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') }> - { - itemHoverBackgroundColor = colorValue.hex; - skeletonColor = colorValue.hex; + { + itemHoverBackgroundColor = colorValue; + skeletonColor = colorValue; setAttributes({ itemHoverBackgroundColor: itemHoverBackgroundColor, skeletonColor: skeletonColor @@ -743,10 +743,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') }> - { - itemHeadingHoverBackgroundColor = colorValue.hex; + { + 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 = ; + termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : ''; + + return
+
+
+
+ } + }, /* 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..78f53e46e 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,7 @@ const { Button, TextControl, TextareaControl, - ColorPicker, + ColorPalette, BaseControl, CheckboxControl, FontSizePicker, @@ -21,7 +21,7 @@ import tainacan from '../../js/axios.js'; import CollectionModal from '../faceted-search/collection-modal.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.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') }> - { - backgroundColor = colorValue.rgb; + { + backgroundColor = colorValue; setAttributes({ backgroundColor: backgroundColor }); }} + enableAlpha /> @@ -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') }> - { - secondaryColor = colorValue.hex; + { + 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') }> - { - primaryColor = colorValue.hex; + { + 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') }> - { - inputBackgroundColor = colorValue.hex; + { + 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') }> - { - inputColor = colorValue.hex; + { + 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') }> - { - inputBorderColor = colorValue.hex; + { + 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') }> - { - labelColor = colorValue.hex; + { + 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') }> - { - infoColor = colorValue.hex; + { + infoColor = colorValue; setAttributes({ infoColor: infoColor }); }} disableAlpha @@ -552,7 +560,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
; 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
- { - collectionBackgroundColor = value.hex; - setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) ; - setContent(); - }} + id="backgroundcolorpicker" + label={ __('Background color', 'tainacan') }> + { + collectionBackgroundColor = color; + setAttributes({ collectionBackgroundColor: collectionBackgroundColor }); + setContent(); + }} disableAlpha - /> + /> + id="colorpicker" + label={ __('Collection name color', 'tainacan') }> Date: Thu, 13 Jan 2022 16:10:17 -0300 Subject: [PATCH 2/2] Creates TainacanCompatColorPicker component to handle different versions #656 --- .../blocks/carousel-items-list/edit.js | 3 ++- .../blocks/dynamic-items-list/edit.js | 3 ++- .../blocks/faceted-search/edit.js | 25 ++++++++++--------- .../blocks/item-submission-form/edit.js | 18 ++++++------- .../blocks/search-bar/edit.js | 3 ++- .../js/tainacan-blocks-compat-colorpicker.js | 21 ++++++++++++++++ .../js/tainacan-blocks-compat-toolbar.js | 2 +- 7 files changed, 50 insertions(+), 25 deletions(-) create mode 100644 src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js 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 - { 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 - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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') }> - { 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 }) { - { 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' ? + onChange(value.hex) } + 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' ? :