From ffef58e4172b8f7f4771e9d608740ba269dd662a Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Fri, 23 Sep 2022 12:09:05 -0300 Subject: [PATCH] More and more improvements to new metadata section blocks. #566. --- compile-sass.sh | 14 +- ...-gutenberg-block-item-metadata-section.css | 51 ++++ ...enberg-block-item-metadata-section.css.map | 7 + ...gutenberg-block-item-metadata-sections.css | 51 ++++ ...nberg-block-item-metadata-sections.css.map | 7 + ...tainacan-gutenberg-block-item-metadata.css | 51 ++++ ...acan-gutenberg-block-item-metadata.css.map | 7 + ...ainacan-gutenberg-block-item-metadatum.css | 51 ++++ ...can-gutenberg-block-item-metadatum.css.map | 7 + ...-gutenberg-block-metadata-section-name.css | 51 ++++ ...enberg-block-metadata-section-name.css.map | 7 + .../blocks/item-metadata-section/block.json | 4 + .../blocks/item-metadata-section/edit.js | 75 ++---- .../blocks/item-metadata-sections/block.json | 7 +- .../blocks/item-metadata-sections/edit.js | 125 ++++----- .../blocks/item-metadata/block.json | 4 + .../blocks/item-metadata/edit.js | 76 ++---- .../blocks/item-metadatum/block.json | 4 + .../blocks/item-metadatum/edit.js | 3 +- .../blocks/item-metadatum/save.php | 3 +- .../blocks/metadata-section-name/block.json | 7 +- .../blocks/metadata-section-name/edit.js | 41 +-- .../blocks/metadata-section-name/save.js | 4 +- .../single-item-metadata-section-modal.js | 240 +++++++++--------- ...inacan-blocks-single-item-template-mode.js | 42 +++ 25 files changed, 601 insertions(+), 338 deletions(-) create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata-section.css create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata-section.css.map create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css.map create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata.css create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadata.css.map create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadatum.css create mode 100644 src/assets/css/tainacan-gutenberg-block-item-metadatum.css.map create mode 100644 src/assets/css/tainacan-gutenberg-block-metadata-section-name.css create mode 100644 src/assets/css/tainacan-gutenberg-block-metadata-section-name.css.map create mode 100644 src/views/gutenberg-blocks/js/template/tainacan-blocks-single-item-template-mode.js diff --git a/compile-sass.sh b/compile-sass.sh index 67d570a06..9e52b8489 100644 --- a/compile-sass.sh +++ b/compile-sass.sh @@ -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 diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css b/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css new file mode 100644 index 000000000..9692bf036 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css.map b/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css.map new file mode 100644 index 000000000..7d0d66758 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata-section.css.map @@ -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" +} diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css b/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css new file mode 100644 index 000000000..8881f1ad2 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css.map b/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css.map new file mode 100644 index 000000000..26c5c8a46 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata-sections.css.map @@ -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" +} diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata.css b/src/assets/css/tainacan-gutenberg-block-item-metadata.css new file mode 100644 index 000000000..d24e5204a --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadata.css.map b/src/assets/css/tainacan-gutenberg-block-item-metadata.css.map new file mode 100644 index 000000000..5b03882b7 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadata.css.map @@ -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" +} diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadatum.css b/src/assets/css/tainacan-gutenberg-block-item-metadatum.css new file mode 100644 index 000000000..3c1f686ce --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadatum.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-item-metadatum.css.map b/src/assets/css/tainacan-gutenberg-block-item-metadatum.css.map new file mode 100644 index 000000000..7bacd50df --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-item-metadatum.css.map @@ -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" +} diff --git a/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css b/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css new file mode 100644 index 000000000..5ddf84965 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css.map b/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css.map new file mode 100644 index 000000000..170facbe9 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-metadata-section-name.css.map @@ -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" +} diff --git a/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json b/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json index 9a4d192d5..e026f14df 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json +++ b/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json @@ -22,6 +22,10 @@ "type": "string", "default": "selection" }, + "templateMode": { + "type": "boolean", + "default": false + }, "collectionId": { "type": "integer" }, diff --git a/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js b/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js index 1737a780f..102c2c3fa 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js @@ -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' ? ( - { __('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') }

) : null diff --git a/src/views/gutenberg-blocks/blocks/item-metadata-sections/block.json b/src/views/gutenberg-blocks/blocks/item-metadata-sections/block.json index 4969bef28..90adb6ec7 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-sections/block.json +++ b/src/views/gutenberg-blocks/blocks/item-metadata-sections/block.json @@ -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, diff --git a/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js b/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js index 57303d232..f4efb6f3f 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js @@ -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' ?
@@ -181,7 +150,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) { ) : null } - { !itemId && dataSource !== 'template' ? ( + { !itemId && !templateMode ? ( { 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' ? ( - - { !sectionName ? ( - - )}> -

- - - - { __('No metadata section was found. Please use this block only inside metadata section block.', 'tainacan') } -

- - ) : null - } - - { sectionName ? ( - - { sectionName } - - ) : null - } + + { sectionName } + ); }; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-name/save.js b/src/views/gutenberg-blocks/blocks/metadata-section-name/save.js index 5f471fef6..296a6556b 100644 --- a/src/views/gutenberg-blocks/blocks/metadata-section-name/save.js +++ b/src/views/gutenberg-blocks/blocks/metadata-section-name/save.js @@ -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 ( - + { sectionName } ); diff --git a/src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js b/src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js index 3c2688cee..0141cf999 100644 --- a/src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js +++ b/src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js @@ -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 ) : this.state.isLoadingMetadataSections ? :
-

{ __('Sorry, no metadatum found.', 'tainacan') }

+

{ __('Sorry, no metadata section found.', 'tainacan') }

) } @@ -323,11 +332,13 @@ export default class SingleItemMetadataSectionModal extends React.Component { onClick={ () => { this.resetCollections(); }}> { __('Switch Collection', 'tainacan') } - + { !this.state.templateMode ? + + : null } + ) : null + }
- ) : - this.state.isLoadingCollections ? ( - - ) : + ) : this.state.isLoadingCollections ? :

{ __('Sorry, no collection found.', 'tainacan') }

-
- ): - this.state.modalCollections.length > 0 ? - ( -
-
- { - { - return { label: collection.name, value: '' + collection.id } - }) - } - onChange={ ( aCollectionId ) => { - this.setState({ temporaryCollectionId: aCollectionId }); - } } /> - } -
-
-

{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}

- { - this.state.modalCollections.length < this.state.totalModalCollections ? ( - - ) : null - } -
- ) : this.state.isLoadingCollections ? : -
-

{ __('Sorry, no collection found.', 'tainacan') }

+ )} +
+ +
- )} -
- -
-
- ) + + : null + ) ); } } \ No newline at end of file diff --git a/src/views/gutenberg-blocks/js/template/tainacan-blocks-single-item-template-mode.js b/src/views/gutenberg-blocks/js/template/tainacan-blocks-single-item-template-mode.js new file mode 100644 index 000000000..f5e6492f6 --- /dev/null +++ b/src/views/gutenberg-blocks/js/template/tainacan-blocks-single-item-template-mode.js @@ -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; +} \ No newline at end of file