diff --git a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css index a2c1c03d0..4ef12517b 100644 --- a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css +++ b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css @@ -49,15 +49,20 @@ width: 80vw; height: 80vh; } .wp-block-tainacan-modal.dynamic-modal iframe { - width: calc(100% + 32px); - height: calc(100% - 132px); - margin-left: -16px; } + width: 100%; + height: calc(100% - 96px); } + .wp-block-tainacan-modal.dynamic-modal.wp-version-smaller-than-5-9 iframe { + height: calc(100% - 156px); } .wp-block-tainacan-modal.dynamic-modal .modal-footer-area { height: 68px; - width: calc(100% + 32px); - margin-left: -16px !important; - padding: 1.2em 1.2em !important; - border-top: 1px solid var(--tainacan-block-gray3, #cbcbcb); } + width: 100%; + border-top: 1px solid var(--tainacan-block-gray3, #cbcbcb); + padding: 15px 32px; } + .wp-block-tainacan-modal.dynamic-modal .components-modal__content { + padding: 0; } + .wp-block-tainacan-modal.dynamic-modal .components-modal__content .components-modal__header { + margin-left: 0; + margin-right: 0; } .wp-block-tainacan-modal .spinner-container { min-height: 56px; padding: 1em; @@ -173,8 +178,7 @@ display: flex; align-items: baseline; justify-content: space-between; - padding: 15px 16px 0 16px; - margin: 0 -16px; } + padding: 15px 0 0 0; } .wp-block-tainacan-modal .modal-footer-area p { padding: 0 12px; color: var(--tainacan-block-gray5, #454647); } diff --git a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map index 945ed8959..1c7060418 100644 --- a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map +++ b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAIA,KAAM;EACF,sBAAsB,CAAC,QAAU;EACjC,sBAAsB,CAAC,QAAU;EACjC,sBAAsB,CAAC,QAAU;EACjC,sBAAsB,CAAC,QAAU;EACjC,sBAAsB,CAAC,QAAU;EACjC,sBAAsB,CAAC,QAAU;EACjC,wBAAwB,CAAC,QAAY;;AAIzC,kDAAmD;EAC/C,WAAW,EAAE,iBAAiB;EAC9B,aAAa,EAAE,YAAY;EAC3B,UAAU,EAAE,oCAAmC;EAE/C,iFAA+B;IAC3B,aAAa,EAAE,CAAC;EAEpB,oFAAkC;IAC9B,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,CAAC;IAEV,sFAAE;MACE,SAAS,EAAE,cAAc;MACzB,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,oCAAmC;MAC1C,IAAI,EAAE,oCAAmC;MAEzC,0FAAI;QACA,YAAY,EAAE,GAAG;QACjB,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,oCAAmC;IAGjD,uGAAmB;MACf,MAAM,EAAE,CAAC;;AAMrB,wBAAyB;EACrB,KAAK,EAAE,GAAG;EAEV,0CAA2C;IAH/C,wBAAyB;MAGyB,KAAK,EAAE,GAAG;EACxD,yCAA0C;IAJ9C,wBAAyB;MAIuB,KAAK,EAAE,IAAI;EAGvD,sCAAgB;IACZ,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IAEZ,6CAAO;MACH,KAAK,EAAE,iBAAiB;MACxB,MAAM,EAAE,kBAAkB;MAC1B,WAAW,EAAE,KAAK;IAGtB,yDAAmB;MACf,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,iBAAiB;MACxB,WAAW,EAAE,gBAAgB;MAC7B,OAAO,EAAE,sBAAsB;MAC/B,UAAU,EAAE,8CAA6C;EAKjE,2CAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;IAC1C,+DAAoB;MAAE,MAAM,EAAE,GAAG;EAGrC;4EACkD;IAC9C,aAAa,EAAE,CAAC;IAEhB;oFAAQ;MACJ,UAAU,EAAE,sBAAsB;MAClC,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,eAAe;EAInC,2BAAG;IACC,MAAM,EAAE,UAAU;EAGtB,0DAAkC;IAC9B,OAAO,EAAE,kBAAkB;IAC3B,MAAM,EAAE,YAAY;IACpB,WAAW,EAAE,GAAG;EAGpB,2CAAmB;IACf,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,GAAG;IAElB,oEAAyB;MACrB,KAAK,EAAE,GAAG;MAEV,0CAA2C;QAH/C,oEAAyB;UAGyB,KAAK,EAAE,GAAG;MACxD,iFAAe;QACX,WAAW,EAAE,CAAC;MAElB,oGAAgC;QAC5B,SAAS,EAAE,IAAI;QAEf,+HAA2B;UACvB,KAAK,EAAE,IAAI;MAGnB,yGAAqC;QACjC,WAAW,EAAE,GAAG;QAChB,KAAK,EAAE,oCAAmC;QAC1C,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,MAAM;MAEtB,yGAAqC;QACjC,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,IAAI;EAKxB,gDAAwB;IACpB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,MAAM;EAGvB;4EACkD;IAC9C,OAAO,EAAE,CAAC;ICvJd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDsJT,gBAAgB,EAAE,WAAW;IAC7B,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IACrB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,GAAG;IACZ,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,MAAM;IAElB;uGAAyB;MACrB,QAAQ,EAAE,MAAM;MAChB,YAAY,EAAE,GAAG;IAGrB;;;gHACkC;MAC9B,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,UAAU;MAC3B,WAAW,EAAE,MAAM;MAEnB;;;sHAAI;QACA,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,GAAG;MAEtB;;;wHAAM;QACF,OAAO,EAAE,YAAY;QACrB,SAAS,EAAE,GAAG;QAEd,yCAA0C;UAJ9C;;;4HAAM;YAI0C,SAAS,EAAE,GAAG;IAGlE;iJAAmE;MAC/D,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;EAGxB,gDAAwB;IACpB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,QAAQ;IACrB,eAAe,EAAE,MAAM;IAEvB,kDAAE;MACE,KAAK,EAAE,oCAAmC;MAC1C,YAAY,EAAE,IAAI;MAClB,UAAU,EAAE,GAAG;EAGvB,2CAAmB;IACf,UAAU,EAAE,iBAAiB;IAC7B,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,QAAQ;IACrB,eAAe,EAAE,aAAa;IAC9B,OAAO,EAAE,gBAAgB;IACzB,MAAM,EAAE,OAAO;IAEf,6CAAE;MACE,OAAO,EAAE,MAAM;MACf,KAAK,EAAE,oCAAmC", +"mappings": "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", "sources": ["../../views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"], "names": [], "file": "tainacan-gutenberg-block-common-editor-styles.css" diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js b/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js index f6e8909db..8f9a09e10 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js +++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js @@ -4,6 +4,7 @@ import axios from 'axios'; const { __ } = wp.i18n; const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; export default class CarouselItemsModal extends React.Component { constructor(props) { @@ -204,7 +205,7 @@ export default class CarouselItemsModal extends React.Component { return this.state.collectionId ? ( // Items modal this.cancelSelection() } shouldCloseOnClickOutside={ false } 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 /> - { - 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 +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') }> - { - secondaryColor = colorValue.hex; + { + 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') }> - { - primaryColor = colorValue.hex; + { + 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') }> - { - inputBackgroundColor = colorValue.hex; + { + 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') }> - { - inputColor = colorValue.hex; + { + 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') }> - { - inputBorderColor = colorValue.hex; + { + 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') }> - { - labelColor = colorValue.hex; + { + 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') }> - { - headingColor = colorValue.hex; + { + 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') }> - { - infoColor = colorValue.hex; + { + 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') }> - { - itemBackgroundColor = colorValue.hex; + { + 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') }> - { - itemHoverBackgroundColor = colorValue.hex; - skeletonColor = colorValue.hex; + { + 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') }> - { - itemHeadingHoverBackgroundColor = colorValue.hex; + { + itemHeadingHoverBackgroundColor = colorValue; setAttributes({ itemHeadingHoverBackgroundColor: itemHeadingHoverBackgroundColor }); }} disableAlpha diff --git a/src/views/gutenberg-blocks/blocks/item-gallery/theme.js b/src/views/gutenberg-blocks/blocks/item-gallery/theme.js index 617e64bec..1b7d40168 100644 --- a/src/views/gutenberg-blocks/blocks/item-gallery/theme.js +++ b/src/views/gutenberg-blocks/blocks/item-gallery/theme.js @@ -294,6 +294,18 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery { if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running) swiperInstance.autoplay.stop(); }); + + // On destroy we make a copy of the inner content to clear it + // and set again. This stops YouTube player, for example. + gallery.listen('destroy', () => { + let actualGalleryContainer = document.getElementsByClassName("pswp__container")[0]; + if (actualGalleryContainer) { + let currentData = actualGalleryContainer.innerHTML; + actualGalleryContainer.innerHTML = ''; + actualGalleryContainer.innerHTML = currentData; + } + }); + }; // triggers when user clicks on thumbnail 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..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') }> - { - 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
this.cancelSelection() } shouldCloseOnClickOutside={ false } diff --git a/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js b/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js index be88bbe80..ce3a4ab86 100644 --- a/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js +++ b/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js @@ -4,6 +4,7 @@ import axios from 'axios'; const { __ } = wp.i18n; const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; export default class RelatedItemsModal extends React.Component { constructor(props) { @@ -199,7 +200,7 @@ export default class RelatedItemsModal extends React.Component { return this.state.collectionId ? ( // Items modal this.cancelSelection() } shouldCloseOnClickOutside={ false } 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 }) { /> - { - 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') }> 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' ? : diff --git a/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss b/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss index 459cd109a..cce8f495d 100644 --- a/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss +++ b/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss @@ -65,17 +65,27 @@ height: 80vh; iframe { - width: calc(100% + 32px); - height: calc(100% - 132px); - margin-left: -16px; + width: 100%; + height: calc(100% - 96px); + } + &.wp-version-smaller-than-5-9 iframe { + height: calc(100% - 156px); } .modal-footer-area { height: 68px; - width: calc(100% + 32px); - margin-left: -16px !important; - padding: 1.2em 1.2em !important; + width: 100%; border-top: 1px solid var(--tainacan-block-gray3, $gray3); + padding: 15px 32px; + } + + .components-modal__content { + padding: 0; + + .components-modal__header { + margin-left: 0; + margin-right: 0; + } } } @@ -209,8 +219,7 @@ display: flex; align-items: baseline; justify-content: space-between; - padding: 15px 16px 0 16px; - margin: 0 -16px; + padding: 15px 0 0 0; p { padding: 0 12px;