From 1e2166ad8fc7d487546241bb20a0886adfcea4b0 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Fri, 23 Sep 2022 15:41:31 -0300 Subject: [PATCH] Creates metadata section description block. #566. --- compile-sass.sh | 6 +- .../blocks/item-metadata-section/block.json | 4 +- .../blocks/item-metadata-section/edit.js | 9 +-- .../blocks/item-metadata-sections/edit.js | 4 +- .../blocks/item-metadata/edit.js | 26 +++++--- .../blocks/item-metadatum/edit.js | 21 ++++++- .../metadata-section-description/block.json | 61 +++++++++++++++++++ .../deprecated.js | 1 + .../metadata-section-description/edit.js | 56 +++++++++++++++++ .../metadata-section-description/icon.js | 14 +++++ .../metadata-section-description/index.js | 15 +++++ .../metadata-section-description/save.js | 16 +++++ .../metadata-section-description/style.scss | 0 .../blocks/metadata-section-name/block.json | 6 +- .../blocks/metadata-section-name/edit.js | 11 +++- .../class-tainacan-gutenberg-block.php | 3 +- .../single-item-metadata-section-modal.js | 6 +- .../selection/single-item-metadatum-modal.js | 41 ++++++++----- webpack.common.js | 3 +- 19 files changed, 259 insertions(+), 44 deletions(-) create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/block.json create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/deprecated.js create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/edit.js create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/index.js create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/save.js create mode 100644 src/views/gutenberg-blocks/blocks/metadata-section-description/style.scss diff --git a/compile-sass.sh b/compile-sass.sh index 9e52b8489..6f3caf246 100644 --- a/compile-sass.sh +++ b/compile-sass.sh @@ -54,9 +54,11 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-23 src/views/gutenberg-blocks/b 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-25 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-metadata-section-description.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 +sass -E 'UTF-8' --cache-location .tmp/sass-cache-26 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-27 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/views/gutenberg-blocks/blocks/item-metadata-section/block.json b/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json index e026f14df..03f0db6c7 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json +++ b/src/views/gutenberg-blocks/blocks/item-metadata-section/block.json @@ -63,7 +63,9 @@ } }, "providesContext": { - "tainacan/itemId": "itemId" + "tainacan/metadataSectionId": "sectionId", + "tainacan/metadataSectionName": "sectionName", + "tainacan/metadataSectionDescription": "sectionDescription" }, "supports": { "align": ["full", "wide"], 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 102c2c3fa..38a58e177 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js @@ -98,18 +98,11 @@ export default function ({ attributes, setAttributes, className, isSelected }) { if (sectionName) { metadataSectionTemplate.push([ 'tainacan/metadata-section-name', - { - sectionId: sectionId, - sectionName: sectionName, - } ]); } if (sectionDescription) { metadataSectionTemplate.push([ - 'core/paragraph', - { - content: sectionDescription, - } + 'tainacan/metadata-section-description', ]); } if (sectionMetadata.length) { 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 f4efb6f3f..1b2a0a090 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js @@ -124,8 +124,8 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
{ isModalOpen ? { diff --git a/src/views/gutenberg-blocks/blocks/item-metadata/edit.js b/src/views/gutenberg-blocks/blocks/item-metadata/edit.js index b895ff18d..725b373cc 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadata/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadata/edit.js @@ -29,13 +29,13 @@ export default function ({ attributes, setAttributes, className, isSelected }) { const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps(); function setContent() { - isLoading = true; - - setAttributes({ - isLoading: isLoading - }); - if ( dataSource === 'parent' && templateMode) { + + isLoading = true; + + setAttributes({ + isLoading: isLoading + }); getItemMetadataTemplates({ metadata: metadata, @@ -45,6 +45,12 @@ export default function ({ attributes, setAttributes, className, isSelected }) { } else if ( dataSource !== 'parent' && templateMode && collectionId ) { + isLoading = true; + + setAttributes({ + isLoading: isLoading + }); + if (itemMetadataRequestSource != undefined && typeof itemMetadataRequestSource == 'function') itemMetadataRequestSource.cancel('Previous metadata sections search canceled.'); @@ -72,7 +78,13 @@ export default function ({ attributes, setAttributes, className, isSelected }) { isLoading: false }); }); - } else { + } else if (itemId) { + + isLoading = true; + + setAttributes({ + isLoading: isLoading + }); if (itemMetadataRequestSource != undefined && typeof itemMetadataRequestSource == 'function') itemMetadataRequestSource.cancel('Previous metadata sections search canceled.'); diff --git a/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js b/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js index ac6f573e8..4ce6dc73b 100644 --- a/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-metadatum/edit.js @@ -6,6 +6,7 @@ const { useBlockProps, BlockControls, AlignmentControl } = (tainacan_blocks.wp_v import SingleItemMetadatumModal from '../../js/selection/single-item-metadatum-modal.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js'; +import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js'; const levelToPath = { 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', @@ -41,6 +42,19 @@ export default function ({ attributes, setAttributes, className, isSelected }) { } ); const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; + // 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 + }); + } + } + return content == 'preview' ?
{ dataSource == 'selection' ? ( TainacanBlocksCompatToolbar({ - label: __('Select item', 'tainacan'), + label: templateMode ? __('Select metadatum', 'tainacan') : __('Select item metadatum', 'tainacan'), icon: { isModalOpen ? { collectionId = selectedCollectionId; setAttributes({ @@ -159,7 +174,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) { ) : null } - { dataSource == 'selection' && !(collectionId && itemId && metadatumId) ? ( + { dataSource == 'selection' && !(collectionId && (templateMode || itemId) && metadatumId) ? ( + +
+ : ( + <> + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + +

+ { sectionDescription } +

+ + ); +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js b/src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js new file mode 100644 index 000000000..9067dba1d --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js @@ -0,0 +1,14 @@ + const { SVG, Path } = wp.components; + + export default ( + + + + ); + \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-description/index.js b/src/views/gutenberg-blocks/blocks/metadata-section-description/index.js new file mode 100644 index 000000000..f8cd05987 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/metadata-section-description/index.js @@ -0,0 +1,15 @@ +import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js'; + +import metadata from './block.json'; +import icon from './icon.js'; +import edit from './edit.js'; +import save from './save.js'; +import deprecated from './deprecated.js'; + +tainacanRegisterBlockType({ + metadata, + icon, + edit, + save, + deprecated +}); diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-description/save.js b/src/views/gutenberg-blocks/blocks/metadata-section-description/save.js new file mode 100644 index 000000000..63d29c9a3 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/metadata-section-description/save.js @@ -0,0 +1,16 @@ +const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); + +export default function({ attributes }) { + const { textAlign, style, sectionId, sectionDescription } = attributes; + + // Gets blocks props from hook + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: `has-text-align-${ textAlign }`, style } : useBlockProps.save( { + className: `has-text-align-${ textAlign }`, + style, + } ); + return ( +

+ { sectionDescription } +

+ ); +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-description/style.scss b/src/views/gutenberg-blocks/blocks/metadata-section-description/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-name/block.json b/src/views/gutenberg-blocks/blocks/metadata-section-name/block.json index 3b919b733..7a262e03f 100644 --- a/src/views/gutenberg-blocks/blocks/metadata-section-name/block.json +++ b/src/views/gutenberg-blocks/blocks/metadata-section-name/block.json @@ -4,7 +4,7 @@ "title": "Tainacan Metadata Section Name", "apiVersion": 2, "category": "tainacan-blocks", - "keywords": ["metadata", "field", "section", "region" ], + "keywords": ["metadata", "name", "field", "section"], "description": "A metadata section label, used to identify different metadata sections.", "textdomain": "tainacan", "parent": [ "tainacan/item-metadata-section" ], @@ -35,6 +35,10 @@ "type": "string" } }, + "usesContext": [ + "tainacan/metadataSectionId", + "tainacan/metadataSectionName" + ], "supports": { "align": ["full", "wide"], "multiple": true, diff --git a/src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js b/src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js index 19b110119..ffb42fbbc 100644 --- a/src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js +++ b/src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js @@ -12,7 +12,7 @@ const levelToPath = { 6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z', }; -export default function ({ attributes, setAttributes, className }) { +export default function ({ attributes, setAttributes, className, context }) { let { content, @@ -31,6 +31,15 @@ export default function ({ attributes, setAttributes, className }) { style, } ); + if (context['tainacan/metadataSectionId']) + sectionId = context['tainacan/metadataSectionId']; + + if (context['tainacan/metadataSectionName']) + sectionName = context['tainacan/metadataSectionName']; + + if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionName'] ) + setAttributes({ sectionId, sectionName }); + return content == 'preview' ?
[], 'item-metadata' => [], 'item-metadatum' => ['render_callback' => 'tainacan_blocks_render_item_metadatum'], - 'metadata-section-name' => [] + 'metadata-section-name' => [], + 'metadata-section-description' => [] ]; // Lets do this! 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 0141cf999..172e2a912 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 @@ -79,7 +79,7 @@ export default class SingleItemMetadataSectionModal extends React.Component { collectionId: this.props.existingCollectionId, templateMode: this.props.isTemplateMode }); - this.fetchModalMetadataSections(); + this.fetchModalMetadataSections(this.props.existingCollectionId); } else { this.setState({ collectionPage: 1 }); this.fetchModalCollections(); @@ -205,10 +205,10 @@ export default class SingleItemMetadataSectionModal extends React.Component { }); } - fetchModalMetadataSections() { + fetchModalMetadataSections(existingCollectionId) { let someModalMetadataSections = []; - let endpoint = '/collection/' + this.state.collectionId + '/metadata-sections/?nopaging=1'; + let endpoint = '/collection/' + (existingCollectionId ? existingCollectionId : this.state.collectionId) + '/metadata-sections/?nopaging=1'; this.setState({ isLoadingMetadataSections: true, diff --git a/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js b/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js index f27c91a41..1b423a56a 100644 --- a/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js +++ b/src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js @@ -35,7 +35,8 @@ export default class SingleItemModal extends React.Component { metadata: [], metadataRequestSource: undefined, searchURL: '', - itemsPerPage: 12 + itemsPerPage: 12, + templateMode: false }; // Bind events @@ -58,10 +59,11 @@ export default class SingleItemModal extends React.Component { this.setState({ collectionId: this.props.existingCollectionId, itemId: this.props.existingItemId, - metadatumId: this.props.existingMetadatumId + metadatumId: this.props.existingMetadatumId, + 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,7 +73,13 @@ export default class SingleItemModal extends React.Component { this.fetchItem(this.props.existingItemId); this.fetchModalMetadata(); } - + } else if (this.props.existingCollectionId && this.props.isTemplateMode) { + this.fetchCollection(this.props.existingCollectionId); + this.setState({ + collectionId: this.props.existingCollectionId, + templateMode: this.props.isTemplateMode + }); + this.fetchModalMetadata(this.props.existingCollectionId); } else { this.setState({ collectionPage: 1 }); this.fetchModalCollections(); @@ -197,10 +205,10 @@ export default class SingleItemModal extends React.Component { }); } - fetchModalMetadata() { + fetchModalMetadata(existingCollectionId) { let someModalMetadata = []; - let endpoint = '/collection/' + this.state.collectionId + '/metadata/?nopaging=1'; + let endpoint = '/collection/' + (existingCollectionId ? existingCollectionId : this.state.collectionId) + '/metadata/?nopaging=1'; this.setState({ isLoadingMetadata: true, @@ -289,7 +297,7 @@ export default class SingleItemModal extends React.Component { } render() { - return (this.state.collectionId && this.state.itemId) ? ( + return (this.state.collectionId && (this.state.templateMode || this.state.itemId)) ? ( // Metadata modal { this.resetCollections(); }}> {__('Switch Collection', 'tainacan')} - + { !this.state.templateMode ? + + : null }
- ) + + : null + ) ); } } \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index 375bcf666..ced8e3306 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -27,7 +27,8 @@ module.exports = { block_item_metadata_section: './src/views/gutenberg-blocks/blocks/item-metadata-section/index.js', block_item_metadata: './src/views/gutenberg-blocks/blocks/item-metadata/index.js', block_item_metadatum: './src/views/gutenberg-blocks/blocks/item-metadatum/index.js', - block_metadata_section_name: './src/views/gutenberg-blocks/blocks/metadata-section-name/index.js' + block_metadata_section_name: './src/views/gutenberg-blocks/blocks/metadata-section-name/index.js', + block_metadata_section_description: './src/views/gutenberg-blocks/blocks/metadata-section-description/index.js' }, output: { path: path.resolve(__dirname, './src/assets/js/'),