tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #658 from tainacan/feature/656 

Compatible ColorPicker for WP 5.9 Feature/656
This commit is contained in:
Mateus Machado Luna 2022-01-13 17:46:12 -03:00 committed by GitHub
parent eb16f62beb 359d20e58b
commit d131e184a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 388 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -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,12 +323,12 @@ 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
@ -335,7 +336,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
</BaseControl>
<BaseControl
id="colorpallete"
id="textcolorpicker"
label={ __('Collection name color', 'tainacan')}>
<ColorPalette
colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] }

17
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -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,12 +570,12 @@ 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
@ -582,7 +583,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
</BaseControl>
<BaseControl
id="colorpallete"
id="colorpicker"
label={ __('Collection name color', 'tainacan')}>
<ColorPalette
colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] }

101
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

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

4
src/views/gutenberg-blocks/blocks/item-submission-form/block.json
View File

@ -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",

228
src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js
View File

@ -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": {

78
src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
View File

@ -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,
@ -89,6 +89,13 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
},
];
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;
setAttributes( {
@ -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,

9
src/views/gutenberg-blocks/blocks/item-submission-form/save.js
View File

@ -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,

21
src/views/gutenberg-blocks/blocks/search-bar/edit.js
View File

@ -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,13 +309,13 @@ 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 }) ;
id="backgroundcolorpicker"
label={ __('Background color', 'tainacan') }>
<TainacanBlocksCompatColorPicker
value={ collectionBackgroundColor }
onChange={ ( color ) => {
collectionBackgroundColor = color;
setAttributes({ collectionBackgroundColor: collectionBackgroundColor });
setContent();
}}
disableAlpha
@ -322,8 +323,8 @@ export default function({ attributes, setAttributes, className, isSelected }) {
</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 }

21
src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js Normal file
View File

@ -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 }
/>
}

2
src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js
View File

@ -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 } />