Creates metadata section description block. #566.

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

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

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',
+                'tainacan/metadata-section-description',
-                {
-                    content: sectionDescription,
-                }
             ]);
         }
         if (sectionMetadata.length) {

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

@@ -124,8 +124,8 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                 <div>
                     { isModalOpen ?
                         <SingleItemModal
-                            modalTitle={ __('Select one item to render its metadata', 'tainacan') }
+                            modalTitle={ templateMode ? __('Select one metadata section', 'tainacan') : __('Select one item to render its metadata section', 'tainacan') }
-                            applyButtonLabel={ __('List metadata for this item', 'tainacan') }
+                            applyButtonLabel={ templateMode ?  __('Show this metadata section', 'tainacan') : __('Show this metadata section for this item', 'tainacan') }
                             existingCollectionId={ collectionId }
                             existingItemId={ itemId }
                             onSelectCollection={ (selectedCollectionId) => {

src/views/gutenberg-blocks/blocks/item-metadata/edit.js

@@ -29,14 +29,14 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
     const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
     
     function setContent() {
+        if ( dataSource === 'parent' && templateMode) {
+
             isLoading = true;
         
             setAttributes({
                 isLoading: isLoading
             });    
             
-        if ( dataSource === 'parent' && templateMode) {
-            
             getItemMetadataTemplates({
                 metadata: metadata,
                 itemMetadata: itemMetadata,
@@ -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.');

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' ? 
             <div className={className}>
                 <img
@@ -53,7 +67,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
             <BlockControls group="block">
                 { dataSource == 'selection' ? (
                         TainacanBlocksCompatToolbar({
-                            label: __('Select item', 'tainacan'),
+                            label: templateMode ? __('Select metadatum', 'tainacan') : __('Select item metadatum', 'tainacan'),
                             icon: <svg 
                                     xmlns="http://www.w3.org/2000/svg" 
                                     viewBox="-2 -2 24 24"
@@ -125,10 +139,11 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                 <div>
                     { isModalOpen ?
                         <SingleItemMetadatumModal
-                            modalTitle={ __('Select one item to render its metadata', 'tainacan') }
+                            modalTitle={ templateMode ? __('Select one metadatum', 'tainacan') : __('Select one item to render its metadata', 'tainacan') }
                             existingCollectionId={ collectionId }
                             existingItemId={ itemId }
                             existingMetadatumId={ metadatumId }
+                            isTemplateMode={ templateMode }
                             onSelectCollection={ (selectedCollectionId) => {
                                 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) ? (
                 <Placeholder
                     className="tainacan-block-placeholder"
                     icon={(

src/views/gutenberg-blocks/blocks/metadata-section-description/block.json

@@ -0,0 +1,61 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/block.json",
+    "name": "tainacan/metadata-section-description",
+    "title": "Tainacan Metadata Section Description",
+    "apiVersion": 2,
+    "category": "tainacan-blocks",
+    "keywords": ["metadata", "description", "field", "section"],
+    "description": "A metadata section description, used to complement information about a metadata section.",
+    "textdomain": "tainacan",
+    "parent": [ "tainacan/item-metadata-section" ],
+    "example": {
+        "attributes": {
+            "content": "preview"
+        }
+    },
+    "attributes": {
+        "content": {
+            "type": "array",
+            "source": "query",
+            "selector": "div"
+        },
+        "sectionId": {
+            "type": "string",
+            "default": ""
+        },
+        "sectionDescription": {
+            "type": "string",
+            "default": ""
+        },
+        "textAlign": {
+			"type": "string"
+		}
+    },
+    "usesContext": [
+        "tainacan/metadataSectionId",
+        "tainacan/metadataSectionDescription"
+    ],
+    "supports": {
+        "align": ["full", "wide"],
+        "multiple": true,
+        "html": true,
+        "anchor": true,
+        "color": {
+            "text": true,
+            "background": true,
+            "gradients": true,
+            "link": true
+        },
+        "typography": {
+            "fontSize": true,
+            "lineHeight": true
+        },
+        "spacing": {
+            "margin": true,
+            "padding": true,
+            "spacing": true
+        }
+    },
+    "editorScript": "metadata-section-description",
+	"editorStyle": "metadata-section-description"
+}

src/views/gutenberg-blocks/blocks/metadata-section-description/deprecated.js

@@ -0,0 +1 @@
+export default [];

src/views/gutenberg-blocks/blocks/metadata-section-description/edit.js

@@ -0,0 +1,56 @@
+const { __ } = wp.i18n;
+
+const { useBlockProps, BlockControls, AlignmentControl } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
+export default function ({ attributes, setAttributes, className, context }) {
+    
+    let {
+        content, 
+        sectionId,
+        sectionDescription,
+        textAlign,
+        style
+    } = attributes;
+
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps( {
+		className: {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		},
+		style,
+	} );
+
+    if (context['tainacan/metadataSectionId'])
+        sectionId = context['tainacan/metadataSectionId'];
+
+    if (context['tainacan/metadataSectionDescription'])
+        sectionDescription = context['tainacan/metadataSectionDescription'];
+
+    if ( context['tainacan/metadataSectionId'] || context['tainacan/metadataSectionDescription'] )
+        setAttributes({ sectionId, sectionDescription });
+
+    return content == 'preview' ? 
+            <div className={className}>
+                <img
+                        width="100%"
+                        src={ `${tainacan_blocks.base_url}/assets/images/related-carousel-items.png` } />
+            </div>
+        : (
+        <>
+            <BlockControls group="block">
+                <AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+            </BlockControls>
+            
+            <p
+                    { ...blockProps }
+                    id={ 'tainacan-metadata-section-description-block-id--' + sectionId }>
+                { sectionDescription }
+            </p>
+        </>
+    );
+};

src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js

@@ -0,0 +1,14 @@
+ const { SVG, Path } = wp.components;
+
+ export default (
+    <SVG
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 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>
+ );
+ 

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
+});

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 (
+		<p { ...blockProps } id={ 'tainacan-metadata-section-description-block-id--' + sectionId }>
+			{ sectionDescription }
+		</p>
+	);
+};

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,

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' ? 
             <div className={className}>
                 <img

src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php

@@ -21,7 +21,8 @@ const TAINACAN_BLOCKS = [
 	'item-metadata-section' => [],
 	'item-metadata' => [],
 	'item-metadatum' => ['render_callback' => 'tainacan_blocks_render_item_metadatum'],
-	'metadata-section-name' => []
+	'metadata-section-name' => [],
+	'metadata-section-description' => []
 ];
 
 // Lets do this!

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,

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
             <Modal
                 className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '')  }
@@ -328,11 +336,13 @@ export default class SingleItemModal extends React.Component {
                     onClick={ () => { this.resetCollections(); }}>
                     {__('Switch Collection', 'tainacan')}
                 </Button>
+                { !this.state.templateMode ?
                     <Button 
                         isSecondary
                         onClick={ () => { this.resetItem(); }}>
-                    {__('Switch Item', 'tainacan')}
+                        { __('Switch Item', 'tainacan') }
                     </Button>
+                : null }
                 <Button
                     isPrimary
                     disabled={ this.state.temporaryMetadatumId == undefined || this.state.temporaryMetadatumId == null || this.state.temporaryMetadatumId == ''}
@@ -343,7 +353,7 @@ export default class SingleItemModal 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' : '') }
@@ -369,6 +379,7 @@ export default class SingleItemModal extends React.Component {
                 </div>
         </Modal>
         ) : (
+            !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' : '')  }
@@ -489,7 +500,9 @@ export default class SingleItemModal extends React.Component {
                         </Button>
                     </div>
                 </div>
-            </Modal>) 
+            </Modal>
+            : null
+        ) 
         );
     }
 }

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/'),