From 359d20e58bed56bcaf0efff71a541d10bcf67e06 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 13 Jan 2022 16:10:17 -0300 Subject: [PATCH] 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' ? :