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

More and more improvements to new metadata section blocks. #566.

This commit is contained in:
mateuswetah 2022-09-23 12:09:05 -03:00
parent 0eda0da01d
commit ffef58e417
25 changed files with 601 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
compile-sass.sh
View File

@ -44,9 +44,19 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-18 src/views/gutenberg-blocks/b
sass -E 'UTF-8' --cache-location .tmp/sass-cache-19 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-related-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-20 src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss:src/assets/css/tainacan-gutenberg-block-common-editor-styles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-20 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-item-metadata.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-21 src/views/gutenberg-blocks/scss/gutenberg-blocks-theme-style.scss:src/assets/css/tainacan-gutenberg-block-common-theme-styles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-21 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-item-metadata-section.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-22 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-23 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-item-metadatum.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-24 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-metadata-section-name.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-25 src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss:src/assets/css/tainacan-gutenberg-block-common-editor-styles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-26 src/views/gutenberg-blocks/scss/gutenberg-blocks-theme-style.scss:src/assets/css/tainacan-gutenberg-block-common-theme-styles.css
echo "Compilação do Sass Concluído!"
exit 0

51
src/assets/css/tainacan-gutenberg-block-item-metadata-section.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-metadata-section.css.map */

7
src/assets/css/tainacan-gutenberg-block-item-metadata-section.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-item-metadata-section.css"
}

51
src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-metadata-sections.css.map */

7
src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-item-metadata-sections.css"
}

51
src/assets/css/tainacan-gutenberg-block-item-metadata.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-metadata.css.map */

7
src/assets/css/tainacan-gutenberg-block-item-metadata.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-item-metadata.css"
}

51
src/assets/css/tainacan-gutenberg-block-item-metadatum.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-metadatum.css.map */

7
src/assets/css/tainacan-gutenberg-block-item-metadatum.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-item-metadatum.css"
}

51
src/assets/css/tainacan-gutenberg-block-metadata-section-name.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-metadata-section-name.css.map */

7
src/assets/css/tainacan-gutenberg-block-metadata-section-name.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-metadata-section-name.css"
}

4
src/views/gutenberg-blocks/blocks/item-metadata-section/block.json
View File

@ -22,6 +22,10 @@
"type": "string",
"default": "selection"
},
"templateMode": {
"type": "boolean",
"default": false
},
"collectionId": {
"type": "integer"
},

75
src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js
View File

@ -5,6 +5,7 @@ const { Button, Spinner, Placeholder } = wp.components;
const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemMetadataSectionModal from '../../js/selection/single-item-metadata-section-modal.js';
import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@ -22,17 +23,16 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
sectionDescription,
sectionMetadata,
metadataSectionTemplate,
dataSource
dataSource,
templateMode
} = attributes;
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
checkIfTemplateEdition();
function setContent() {
if (sectionId) {
if ( sectionId && collectionId ) {
isLoading = true;
@ -40,7 +40,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
isLoading: isLoading
});
if ( dataSource === 'parent' && sectionMetadata.length ) {
if ( dataSource === 'parent' ) {
getMetadataSectionTemplates({
sectionId: sectionId,
@ -120,7 +120,8 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
itemId: Number(itemId),
collectionId: Number(collectionId),
metadata: sectionMetadata,
dataSource: dataSource
dataSource: 'parent',
templateMode: templateMode
}
]);
}
@ -135,51 +136,22 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
metadataSectionRequestSource: metadataSectionRequestSource
});
}
function checkIfTemplateEdition() {
// Check custom template edition state
if (dataSource !== 'parent' && !collectionId) {
const queryParams = new URLSearchParams(window.location.search);
if (queryParams.get('postType') == 'wp_template') {
// Extracts collectionId from a string like theme-slug//single-tnc_col_123_item
let postId = queryParams.get('postId');
if (typeof postId == 'string') {
postId = postId.split('single-tnc_col_');
if (postId.length == 2) {
postId = postId[1];
if (typeof postId == 'string') {
postId = postId.split('_item');
if (postId.length == 2) {
postId = postId[0];
collectionId = Number(postId);
itemId = 0;
const shouldSetContent = dataSource !== 'template';
dataSource = 'template';
setAttributes({
collectionId: collectionId,
itemId: itemId,
dataSource: dataSource
});
if (shouldSetContent)
setContent();
}
}
}
}
}
// Checks if we are in template mode, if so, gets the collection Id from URL.
if ( !templateMode ) {
const possibleCollectionId = getCollectionIdFromPossibleTemplateEdition();
if (possibleCollectionId) {
collectionId = possibleCollectionId;
templateMode = true
setAttributes({
collectionId: collectionId,
templateMode: templateMode
});
console.log(collectionId)
setContent();
}
}
// Executed only on the first load of page
if (content === undefined || (content && content.length && content[0].type)) {
setAttributes({ content: '' });
@ -204,6 +176,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
existingCollectionId={ collectionId }
existingItemId={ itemId }
existingMetadataSectionId={ sectionId }
isTemplateMode={ templateMode }
onSelectCollection={ (selectedCollectionId) => {
collectionId = Number(selectedCollectionId);
setAttributes({
@ -232,7 +205,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
) : null
}
{ !sectionId && (dataSource !== 'parent' || dataSource !== 'template') ? (
{ !sectionId && dataSource !== 'parent' ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
@ -249,7 +222,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
width="24px">
<path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
</svg>
{ __('Select an item and a metadata section to display it.', 'tainacan') }
{ collectionId ? __('Select a metadata section to display it.', 'tainacan') : __('Select an item and a metadata section to display it.', 'tainacan') }
</p>
<Button
isPrimary
@ -261,7 +234,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
});
}
}>
{__('Select Item and Metadata Section', 'tainacan')}
{ collectionId ? __('Select a Metadata Section', 'tainacan') : __('Select Item and Metadata Section', 'tainacan') }
</Button>
</Placeholder>
) : null

7
src/views/gutenberg-blocks/blocks/item-metadata-sections/block.json
View File

@ -22,6 +22,10 @@
"type": "string",
"default": "selection"
},
"templateMode": {
"type": "boolean",
"default": false
},
"collectionId": {
"type": "integer"
},
@ -49,9 +53,6 @@
"default": []
}
},
"providesContext": {
"tainacan/itemId": "itemId"
},
"supports": {
"align": ["full", "wide"],
"multiple": true,

125
src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js
View File

@ -5,6 +5,7 @@ const { Button, Spinner, Placeholder } = wp.components;
const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemModal from '../../js/selection/single-item-modal.js';
import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@ -19,46 +20,49 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
isModalOpen,
metadataSections,
metadataSectionsTemplate,
dataSource
dataSource,
templateMode
} = attributes;
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
checkIfTemplateEdition();
function setContent() {
isLoading = true;
setAttributes({
isLoading: isLoading
});
if (collectionId) {
if (metadataSectionsRequestSource != undefined && typeof metadataSectionsRequestSource == 'function')
metadataSectionsRequestSource.cancel('Previous metadata sections search canceled.');
isLoading = true;
metadataSectionsRequestSource = axios.CancelToken.source();
let endpoint = '/collection/'+ collectionId + '/metadata-sections';
tainacan.get(endpoint, { cancelToken: metadataSectionsRequestSource.token })
.then(response => {
metadataSections = response.data ? response.data : [];
getMetadataSectionsTemplates({
metadataSections: metadataSections,
metadataSectionsRequestSource: metadataSectionsRequestSource
});
})
.catch((error) => {
console.error(error);
setAttributes({
metadataSections: [],
isLoading: false
});
setAttributes({
isLoading: isLoading
});
if (metadataSectionsRequestSource != undefined && typeof metadataSectionsRequestSource == 'function')
metadataSectionsRequestSource.cancel('Previous metadata sections search canceled.');
metadataSectionsRequestSource = axios.CancelToken.source();
let endpoint = '/collection/'+ collectionId + '/metadata-sections';
tainacan.get(endpoint, { cancelToken: metadataSectionsRequestSource.token })
.then(response => {
metadataSections = response.data ? response.data : [];
getMetadataSectionsTemplates({
metadataSections: metadataSections,
metadataSectionsRequestSource: metadataSectionsRequestSource
});
})
.catch((error) => {
console.error(error);
setAttributes({
metadataSections: [],
isLoading: false
});
});
}
}
function getMetadataSectionsTemplates({
@ -79,6 +83,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
itemId: Number(itemId),
collectionId: Number(collectionId),
dataSource: 'parent',
templateMode: templateMode
}
]);
}
@ -90,56 +95,20 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
metadataSectionsRequestSource: metadataSectionsRequestSource
});
}
function checkIfTemplateEdition() {
// Check custom template edition state
if (dataSource !== 'parent' && !collectionId) {
const queryParams = new URLSearchParams(window.location.search);
if (queryParams.get('postType') == 'wp_template') {
// Extracts collectionId from a string like theme-slug//single-tnc_col_123_item
let postId = queryParams.get('postId');
if (typeof postId == 'string') {
postId = postId.split('single-tnc_col_');
if (postId.length == 2) {
postId = postId[1];
if (typeof postId == 'string') {
postId = postId.split('_item');
if (postId.length == 2) {
postId = postId[0];
collectionId = Number(postId);
itemId = 0;
const shouldSetContent = dataSource !== 'template';
dataSource = 'template';
setAttributes({
collectionId: collectionId,
itemId: itemId,
dataSource: dataSource
});
if (shouldSetContent)
setContent();
}
}
}
}
}
// Checks if we are in template mode, if so, gets the collection Id from URL.
if ( !templateMode ) {
const possibleCollectionId = getCollectionIdFromPossibleTemplateEdition();
if (possibleCollectionId) {
collectionId = possibleCollectionId;
templateMode = true
setAttributes({
collectionId: collectionId,
templateMode: templateMode
});
setContent();
}
}
// Executed only on the first load of page
if (content && content.length && content[0].type) {
setAttributes({ content: '' });
setContent();
}
return content == 'preview' ?
<div className={className}>
@ -181,7 +150,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
) : null
}
{ !itemId && dataSource !== 'template' ? (
{ !itemId && !templateMode ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(

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

@ -22,6 +22,10 @@
"type": "string",
"default": "selection"
},
"templateMode": {
"type": "boolean",
"default": false
},
"collectionId": {
"type": "integer"
},

76
src/views/gutenberg-blocks/blocks/item-metadata/edit.js
View File

@ -5,10 +5,11 @@ const { Button, Spinner, Placeholder } = wp.components;
const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemModal from '../../js/selection/single-item-modal.js';
import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
export default function ({ attributes, setAttributes, className, isSelected, context }) {
export default function ({ attributes, setAttributes, className, isSelected }) {
let {
content,
@ -20,13 +21,12 @@ export default function ({ attributes, setAttributes, className, isSelected, con
itemMetadata,
metadata,
itemMetadataTemplate,
dataSource
dataSource,
templateMode
} = attributes;
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
checkIfTemplateEdition();
function setContent() {
isLoading = true;
@ -35,7 +35,7 @@ export default function ({ attributes, setAttributes, className, isSelected, con
isLoading: isLoading
});
if ( dataSource === 'parent' && metadata.length && itemMetadata.length) {
if ( dataSource === 'parent' && templateMode) {
getItemMetadataTemplates({
metadata: metadata,
@ -43,7 +43,8 @@ export default function ({ attributes, setAttributes, className, isSelected, con
itemMetadataRequestSource: itemMetadataRequestSource
});
} else if ( dataSource === 'template' ) {
} else if ( dataSource !== 'parent' && templateMode && collectionId ) {
if (itemMetadataRequestSource != undefined && typeof itemMetadataRequestSource == 'function')
itemMetadataRequestSource.cancel('Previous metadata sections search canceled.');
@ -109,7 +110,8 @@ export default function ({ attributes, setAttributes, className, isSelected, con
itemMetadataRequestSource
}) {
let itemMetadataTemplate = [];
if (dataSource === 'template' || (dataSource === 'parent' && !itemId)) {
if ( templateMode ) {
metadata.forEach((aMetadatum) => {
itemMetadataTemplate.push([
'tainacan/item-metadatum',
@ -117,7 +119,8 @@ export default function ({ attributes, setAttributes, className, isSelected, con
placeholder: __( 'Item Metadatum', 'tainacan' ),
metadatumId: aMetadatum.id,
collectionId: Number(collectionId),
dataSource: dataSource
dataSource: 'parent',
templateMode: templateMode
}
]);
});
@ -136,7 +139,8 @@ export default function ({ attributes, setAttributes, className, isSelected, con
metadatumId: itemMetadatum.metadatum.id,
itemId: Number(itemId),
collectionId: Number(collectionId),
dataSource: 'parent'
dataSource: 'parent',
templateMode: templateMode
}
]);
}
@ -151,47 +155,17 @@ export default function ({ attributes, setAttributes, className, isSelected, con
});
}
function checkIfTemplateEdition() {
// Check custom template edition state
if (dataSource !== 'parent' && !collectionId) {
const queryParams = new URLSearchParams(window.location.search);
if (queryParams.get('postType') == 'wp_template') {
// Extracts collectionId from a string like theme-slug//single-tnc_col_123_item
let postId = queryParams.get('postId');
if (typeof postId == 'string') {
postId = postId.split('single-tnc_col_');
if (postId.length == 2) {
postId = postId[1];
if (typeof postId == 'string') {
postId = postId.split('_item');
if (postId.length == 2) {
postId = postId[0];
collectionId = Number(postId);
itemId = 0;
const shouldSetContent = dataSource !== 'template';
dataSource = 'template';
setAttributes({
collectionId: collectionId,
itemId: itemId,
dataSource: dataSource
});
if (shouldSetContent)
setContent();
}
}
}
}
}
// Checks if we are in template mode, if so, gets the collection Id from URL.
if ( !templateMode ) {
const possibleCollectionId = getCollectionIdFromPossibleTemplateEdition();
if (possibleCollectionId) {
collectionId = possibleCollectionId;
templateMode = true
setAttributes({
collectionId: collectionId,
templateMode: templateMode
});
setContent();
}
}
@ -241,7 +215,7 @@ export default function ({ attributes, setAttributes, className, isSelected, con
) : null
}
{ !itemId && dataSource !== 'template' && dataSource !== 'parent' ? (
{ !itemId && !templateMode && dataSource !== 'parent' ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(

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

@ -22,6 +22,10 @@
"type": "string",
"default": "selection"
},
"templateMode": {
"type": "boolean",
"default": false
},
"collectionId": {
"type": "integer"
},

3
src/views/gutenberg-blocks/blocks/item-metadatum/edit.js
View File

@ -26,6 +26,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
metadatumType,
isModalOpen,
dataSource,
templateMode,
labelLevel,
textAlign,
style
@ -193,7 +194,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
) : null
}
{ (collectionId && (itemId || dataSource === 'template' || dataSource === 'parent') && metadatumId) ? (
{ (collectionId && (itemId || templateMode) && metadatumId) ? (
<div className={ 'item-metadatum-edit-container' }>
<ServerSideRender
block="tainacan/item-metadatum"

3
src/views/gutenberg-blocks/blocks/item-metadatum/save.php
View File

@ -11,6 +11,7 @@ function tainacan_blocks_render_item_metadatum( $block_attributes, $content, $bl
$metadatum_id = isset($block_attributes['metadatumId']) ? $block_attributes['metadatumId'] : false;
$collection_id = isset($block_attributes['collectionId']) ? $block_attributes['collectionId'] : false;
$data_source = isset($block_attributes['dataSource']) ? $block_attributes['dataSource'] : 'parent';
$template_mode = isset($block_attributes['templateMode']) ? $block_attributes['templateMode'] : false;
if ( !$metadatum_id )
return '';
@ -43,7 +44,7 @@ function tainacan_blocks_render_item_metadatum( $block_attributes, $content, $bl
// Checks if we are in the edit page or in the published
$current_post = get_post();
if ( ($data_source === 'template' || ($data_source === 'parent' && !$item_id) ) && $collection_id ) {
if ( $template_mode && $collection_id ) {
$collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/';
if ( $current_post === NULL )

7
src/views/gutenberg-blocks/blocks/metadata-section-name/block.json
View File

@ -19,6 +19,10 @@
"source": "query",
"selector": "div"
},
"sectionId": {
"type": "string",
"default": ""
},
"sectionName": {
"type": "string",
"default": ""
@ -31,9 +35,6 @@
"type": "string"
}
},
"usesContext": [
"tainacan/itemId"
],
"supports": {
"align": ["full", "wide"],
"multiple": true,

41
src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js
View File

@ -1,5 +1,5 @@
const { __ } = wp.i18n;
const { Placeholder, ToolbarDropdownMenu, SVG, Path, __experimentalHeading: Heading } = wp.components;
const { ToolbarDropdownMenu, SVG, Path, __experimentalHeading: Heading } = wp.components;
const { useBlockProps, BlockControls, AlignmentControl } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
@ -16,6 +16,7 @@ export default function ({ attributes, setAttributes, className }) {
let {
content,
sectionId,
sectionName,
labelLevel,
textAlign,
@ -89,39 +90,13 @@ export default function ({ attributes, setAttributes, className }) {
} }
/>
</BlockControls>
{ !sectionName ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
<img
width={148}
src={ `${tainacan_blocks.base_url}/assets/images/tainacan_logo_header.svg` }
alt="Tainacan Logo"/>
)}>
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-2 -2 24 24"
height="24px"
width="24px">
<path d="m 6,3.9960001 h 5.016 c 0.544,0 1.008,0.192 1.392,0.576 L 19.416,11.58 c 0.384,0.384 0.576,0.856 0.576,1.416 0,0.56 -0.192,1.032 -0.576,1.416 l -4.992,4.992 c -0.176,0.176 -0.392,0.32 -0.648,0.432 -0.24,0.112 -0.496,0.168 -0.768,0.168 -0.272,0 -0.536,-0.056 -0.792,-0.168 -0.24,-0.112 -0.448,-0.256 -0.624,-0.432 L 4.608,12.42 c -0.4,-0.4 -0.6,-0.872 -0.6,-1.416 V 5.988 C 4.008,5.428 4.2,4.956 4.584,4.572 4.968,4.188 5.44,3.996 6,3.9960001 Z m 1.512,4.992 c 0.416,0 0.768,-0.144 1.056,-0.432 C 8.856,8.2680001 9,7.916 9,7.5 9,7.084 8.856,6.732 8.568,6.444 8.28,6.14 7.928,5.988 7.512,5.988 7.096,5.988 6.736,6.14 6.432,6.444 6.144,6.732 6,7.084 6,7.5 c 0,0.416 0.144,0.7680001 0.432,1.0560001 0.304,0.288 0.664,0.432 1.08,0.432 z"/>
</svg>
{ __('No metadata section was found. Please use this block only inside metadata section block.', 'tainacan') }
</p>
</Placeholder>
) : null
}
{ sectionName ? (
<Heading
{ ...blockProps }
level={ labelLevel }>
{ sectionName }
</Heading>
) : null
}
<Heading
{ ...blockProps }
level={ labelLevel }
id={ 'tainacan-metadata-section-name-block-id--' + sectionId }>
{ sectionName }
</Heading>
</>
);
};

4
src/views/gutenberg-blocks/blocks/metadata-section-name/save.js
View File

@ -1,7 +1,7 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default function({ attributes }) {
const { textAlign, style, sectionName, labelLevel } = attributes;
const { textAlign, style, sectionId, sectionName, labelLevel } = attributes;
const TagName = 'h' + labelLevel;
// Gets blocks props from hook
@ -10,7 +10,7 @@ export default function({ attributes }) {
style,
} );
return (
<TagName { ...blockProps }>
<TagName { ...blockProps } id={ 'tainacan-metadata-section-name-block-id--' + sectionId }>
{ sectionName }
</TagName>
);

240
src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js
View File

@ -34,7 +34,8 @@ export default class SingleItemMetadataSectionModal extends React.Component {
metadataSections: [],
metadataSectionsRequestSource: undefined,
searchURL: '',
itemsPerPage: 12
itemsPerPage: 12,
templateMode: false
};
// Bind events
@ -57,10 +58,11 @@ export default class SingleItemMetadataSectionModal extends React.Component {
this.setState({
collectionId: this.props.existingCollectionId,
itemId: this.props.existingItemId,
sectionId: this.props.existingSectionId
sectionId: this.props.existingSectionId,
templateMode: this.props.isTemplateMode
});
if (this.props.existingCollectionId) {
if (this.props.existingCollectionId && !this.props.isTemplateMode) {
this.fetchCollection(this.props.existingCollectionId);
this.setState({
searchURL: tainacan_blocks.admin_url + 'admin.php?itemsSingleSelectionMode=true&page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?status=publish'
@ -71,6 +73,13 @@ export default class SingleItemMetadataSectionModal extends React.Component {
this.fetchModalMetadataSections();
}
} else if (this.props.existingCollectionId && this.props.isTemplateMode) {
this.fetchCollection(this.props.existingCollectionId);
this.setState({
collectionId: this.props.existingCollectionId,
templateMode: this.props.isTemplateMode
});
this.fetchModalMetadataSections();
} else {
this.setState({ collectionPage: 1 });
this.fetchModalCollections();
@ -284,7 +293,7 @@ export default class SingleItemMetadataSectionModal extends React.Component {
}
render() {
return (this.state.collectionId && this.state.itemId) ? (
return (this.state.collectionId && (this.state.templateMode || this.state.itemId)) ? (
// metadataSections modal
<Modal
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
@ -313,7 +322,7 @@ export default class SingleItemMetadataSectionModal extends React.Component {
</div>
) : this.state.isLoadingMetadataSections ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no metadatum found.', 'tainacan') }</p>
<p>{ __('Sorry, no metadata section found.', 'tainacan') }</p>
</div>
)
}
@ -323,11 +332,13 @@ export default class SingleItemMetadataSectionModal extends React.Component {
onClick={ () => { this.resetCollections(); }}>
{ __('Switch Collection', 'tainacan') }
</Button>
<Button
isSecondary
onClick={ () => { this.resetItem(); }}>
{ __('Switch Item', 'tainacan') }
</Button>
{ !this.state.templateMode ?
<Button
isSecondary
onClick={ () => { this.resetItem(); }}>
{ __('Switch Item', 'tainacan') }
</Button>
: null }
<Button
isPrimary
disabled={ this.state.temporaryMetadataSectionId == undefined || this.state.temporaryMetadataSectionId == null || this.state.temporaryMetadataSectionId == ''}
@ -338,7 +349,7 @@ export default class SingleItemMetadataSectionModal extends React.Component {
</Modal>
) : (
this.state.collectionId ? (
this.state.collectionId && !this.state.templateMode ? (
// Item modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
@ -364,127 +375,130 @@ export default class SingleItemMetadataSectionModal extends React.Component {
</div>
</Modal>
) : (
// Collections modal
<Modal
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
contentLabel={__('Select item', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
label={__('Search for a collection', 'tainacan')}
placeholder={ __('Search by collection\'s name', 'tainacan') }
value={ this.state.searchCollectionName }
onChange={(value) => {
this.setState({
searchCollectionName: value
});
_.debounce(this.fetchCollections(value), 300);
}}/>
<SelectControl
label={__('Order by', 'tainacan')}
value={ this.state.collectionOrderBy }
options={ [
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
{ label: __('Oldest', 'tainacan'), value: 'date' },
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
] }
onChange={ ( aCollectionOrderBy ) => {
this.state.collectionOrderBy = aCollectionOrderBy;
this.state.collectionPage = 1;
this.setState({
collectionOrderBy: this.state.collectionOrderBy,
collectionPage: this.state.collectionPage
});
if (this.state.searchCollectionName && this.state.searchCollectionName != '') {
this.fetchCollections(this.state.searchCollectionName);
} else {
this.fetchModalCollections();
}
}}/>
</div>
{(
this.state.searchCollectionName != '' ? (
this.state.collections.length > 0 ?
(
!this.state.templateMode ?
// Collections modal
<Modal
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
contentLabel={__('Select item', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
label={__('Search for a collection', 'tainacan')}
placeholder={ __('Search by collection\'s name', 'tainacan') }
value={ this.state.searchCollectionName }
onChange={(value) => {
this.setState({
searchCollectionName: value
});
_.debounce(this.fetchCollections(value), 300);
}}/>
<SelectControl
label={__('Order by', 'tainacan')}
value={ this.state.collectionOrderBy }
options={ [
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
{ label: __('Oldest', 'tainacan'), value: 'date' },
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
] }
onChange={ ( aCollectionOrderBy ) => {
this.state.collectionOrderBy = aCollectionOrderBy;
this.state.collectionPage = 1;
this.setState({
collectionOrderBy: this.state.collectionOrderBy,
collectionPage: this.state.collectionPage
});
if (this.state.searchCollectionName && this.state.searchCollectionName != '') {
this.fetchCollections(this.state.searchCollectionName);
} else {
this.fetchModalCollections();
}
}}/>
</div>
{(
this.state.searchCollectionName != '' ? (
this.state.collections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.collections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
</div>
) :
this.state.isLoadingCollections ? (
<Spinner />
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
):
this.state.modalCollections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.collections.map((collection) => {
this.state.modalCollections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
}
</div>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
{
this.state.modalCollections.length < this.state.totalModalCollections ? (
<Button
isSecondary
isSmall
onClick={ () => this.fetchModalCollections() }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) :
this.state.isLoadingCollections ? (
<Spinner />
) :
) : this.state.isLoadingCollections ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
):
this.state.modalCollections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.modalCollections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
{
this.state.modalCollections.length < this.state.totalModalCollections ? (
<Button
isSecondary
isSmall
onClick={ () => this.fetchModalCollections() }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) : this.state.isLoadingCollections ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
)}
<div className="modal-footer-area">
<Button
isSecondary
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
{ __('Select item', 'tainacan') }
</Button>
</div>
)}
<div className="modal-footer-area">
<Button
isSecondary
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
{ __('Select item', 'tainacan') }
</Button>
</div>
</div>
</Modal>)
</Modal>
: null
)
);
}
}

42
src/views/gutenberg-blocks/js/template/tainacan-blocks-single-item-template-mode.js Normal file
View File

@ -0,0 +1,42 @@
/**
* This function is used by all blocks that need to know if the
* the current editing context is an item single template edition or not
* It looks in the editor url to see if a theme-slug//single-tnc_col_123_item
* pattern is present. If so, it extracts the collection ID from it, to be used
* for creating a block placeholder for any possible item of that collection.
*
* To use this function, a block ideally have in its attributes a boolean
* "templateMode" and a number "collectionId"
*/
export default function getCollectionIdFromPossibleTemplateEdition() {
const queryParams = new URLSearchParams(window.location.search);
if (queryParams.get('postType') == 'wp_template') {
// Extracts collectionId from a string like theme-slug//single-tnc_col_123_item
let postId = queryParams.get('postId');
if (typeof postId == 'string') {
postId = postId.split('single-tnc_col_');
if (postId.length == 2) {
postId = postId[1];
if (typeof postId == 'string') {
postId = postId.split('_item');
if (postId.length == 2) {
postId = postId[0];
const collectionId = !isNaN(postId) ? Number(postId) : false;
return collectionId;
}
}
}
}
}
return false;
}