From 660c683000c761744f435b5c5cf87ab179497a4f Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 1 Jul 2021 15:31:46 -0300
Subject: [PATCH] Adds option to display help info bellow label instead of
 inside a tooltip. #531

---
 ...n-gutenberg-block-item-submission-form.css |   5 +
 ...tenberg-block-item-submission-form.css.map |   2 +-
 .../metadata-types/tainacan-form-item.vue     |  17 +-
 .../item-submission-form/index.js             |  46 +++-
 .../item-submission-deprecated.js             | 204 ++++++++++++++++++
 .../item-submission-form.scss                 |   6 +
 src/views/item-submission/item-submission.vue |   1 +
 .../js/item-submission-main.js                |   5 +-
 .../pages/item-submission-form.vue            |  31 ++-
 9 files changed, 299 insertions(+), 18 deletions(-)

diff --git a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css
index efe7d8ab2..25ac1107f 100644
--- a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css
+++ b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css
@@ -48,6 +48,11 @@
         width: 5%;
         opacity: 0.75;
         margin-left: 6px; }
+      .wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-text.fake-text-help-description {
+        background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.3));
+        width: 35%;
+        opacity: 0.75;
+        margin-top: 4px; }
       .wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-text.fake-help-button {
         background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
         height: 0.32em;
diff --git a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map
index 032827dec..51df28571 100644
--- a/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map
+++ b/src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "AAEA,uBAAwB;EACpB,MAAM,EAAE,kBAAkB;EAE1B,sDAA+B;IAC3B,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,oCAAmC;;AAGlD,uCAAwC;EACpC,MAAM,EAAE,QAAQ;EAGhB,0DAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;EAG9C,wDAAiB;IACb,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,oCAAmC;IAC1C,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,QAAQ;EAEpB,yEAAkC;IAC9B,gBAAgB,EAAE,uCAAuC;IACzD,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,kCAAgC;IACxC,QAAQ,EAAE,MAAM;IAEhB,oFAAW;MACP,gBAAgB,EAAE,qDAAmD;MACrE,MAAM,EAAE,MAAM;MACd,KAAK,EAAE,GAAG;MACV,SAAS,EAAE,MAAM;MACjB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;MAErB,kGAAgB;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,MAAM;MAElB,mGAAiB;QACb,gBAAgB,EAAE,oDAAkD;QACpE,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,GAAG;MAEpB,+GAA6B;QACzB,gBAAgB,EAAE,oDAAkD;QACpE,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,GAAG;MAEnB,qGAAmB;QACf,gBAAgB,EAAE,mDAAiD;QACnE,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,GAAG;IAGxB,8FAAqB;MACjB,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,KAAK;MACV,IAAI,EAAE,OAAO;MACb,KAAK,EAAE,CAAC;MACR,MAAM,EAAE,CAAC;MACT,YAAY,EAAE,KAAK;MACnB,YAAY,EAAE,mBAAmB;MACjC,YAAY,EAAE,uFAAqF;IAEvG,oFAAW;MACP,gBAAgB,EAAE,mDAAiD;MACnE,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,GAAG;MACV,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;IAEzB,oFAAW;MACP,gBAAgB,EAAE,oDAAkD;MACpE,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,KAAK;MACZ,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,KAAK;MAChB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,KAAK;MAChB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;IAEzB,8FAAqB;MACjB,eAAe,EAAE,KAAK;MACtB,MAAM,EAAE,GAAG;MACX,gBAAgB,EAAE,gEAA8D;MAChF,MAAM,EAAE,uEAAqE;MAC7E,KAAK,EAAE,IAAI;MACX,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;MAErB,oGAAQ;QACJ,gBAAgB,EAAE,iDAA+C;IAGzE,uFAAc;MACV,gBAAgB,EAAE,iDAA+C;MACjE,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,MAAM;MACd,KAAK,EAAE,GAAG;MACV,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,MAAM;MACvB,WAAW,EAAE,MAAM;MACnB,GAAG,EAAE,MAAM;MACX,IAAI,EAAE,GAAG;MAET,kGAAW;QACP,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,WAAW;MAGvB,8FAAS;QACL,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,YAAY,EAAE,KAAK;MAEvB,8FAAS;QACL,YAAY,EAAE,2DAA2D;QACzE,kBAAkB,EAAE,GAAG;QACvB,gBAAgB,EAAE,GAAG;QACrB,iBAAiB,EAAE,GAAG;QACtB,MAAM,EAAE,IAAI;IAGpB,qFAAY;MACR,gBAAgB,EAAE,gEAA8D;MAChF,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,sEAAoE;MAC5E,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;IAEzB,wFAAe;MACX,gBAAgB,EAAE,gEAA8D;MAChF,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,sEAAoE;MAC5E,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,YAAY;IAEzB,sFAAa;MACT,gBAAgB,EAAE,mDAAiD;MACnE,OAAO,EAAE,WAAW;MACpB,MAAM,EAAE,MAAM;MACd,KAAK,EAAE,GAAG;MACV,SAAS,EAAE,MAAM;MACjB,SAAS,EAAE,GAAG;MACd,WAAW,EAAE,GAAG;MAChB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,YAAY,EAAE,IAAI;MAElB,iGAAW;QACP,gBAAgB,EAAE,KAAK;QACvB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,KAAK;MAEjB,iGAAW;QACP,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;MAEjB,8FAAU;QACN,MAAM,EAAE,qEAAmE;QAC3E,gBAAgB,EAAE,uCAAuC;QAEzD,yGAAW;UACP,gBAAgB,EAAE,mDAAiD;IAI/E,sFAAa;MACT,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MAEnB,iGAAW;QACP,gBAAgB,EAAE,mDAAiD;QACnE,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,aAAa,EAAE,GAAG;QAClB,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,GAAG;MAElB,iGAAW;QACP,WAAW,EAAE,KAAK;QAClB,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,GAAG;IAGtB,4FAAmB;MACf,OAAO,EAAE,IAAI;MACb,OAAO,EAAE,KAAK;MAEd,yGAAa;QACT,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,MAAM;QACnB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,aAAa,EAAE,IAAI;QACnB,gBAAgB,EAAE,4DAA0D;QAE5E,oHAAW;UACP,gBAAgB,EAAE,mDAAiD;QAEvE,+GAAQ;UACJ,gBAAgB,EAAE,iDAA+C;IAI7E,4FAAmB;MACf,OAAO,EAAE,KAAK;MAEd,yGAAa;QACT,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,IAAI;QACjB,aAAa,EAAE,IAAI;QACnB,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,GAAG;MAEhB,uGAAW;QACP,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,KAAK;QAChB,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,IAAI;IAG3B,8FAAqB;MACjB,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,eAAe,EAAE,UAAU;IAE/B,2FAAkB;MACd,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,MAAM;MACjB,cAAc,EAAE,MAAM;MAEtB,0GAAe;QACX,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE,MAAM;QAEjB,sHAAY;UACR,KAAK,EAAE,IAAI;UACX,SAAS,EAAE,IAAI;UACf,MAAM,EAAE,gBAAgB;QAE5B,uHAAe;UACX,aAAa,EAAE,sEAAoE;UACnF,aAAa,EAAE,KAAK;IAIhC,sFAAa;MACT,OAAO,EAAE,WAAW;MACpB,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,eAAe,EAAE,aAAa;MAE9B,mGAAa;QACT,gBAAgB,EAAE,oDAAkD;MAExE,mGAAa;QACT,MAAM,EAAE,KAAK",
 "sources": ["../../views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss"],
 "names": [],
 "file": "tainacan-gutenberg-block-item-submission-form.css"
diff --git a/src/views/admin/components/metadata-types/tainacan-form-item.vue b/src/views/admin/components/metadata-types/tainacan-form-item.vue
index edacb083d..ae4e672ea 100644
--- a/src/views/admin/components/metadata-types/tainacan-form-item.vue
+++ b/src/views/admin/components/metadata-types/tainacan-form-item.vue
@@ -42,7 +42,7 @@
                 ({{ itemMetadatum.metadatum.metadata_type_object.name }})
             </span>
             <help-button
-                    v-if="!$parent.hideHelpButtons" 
+                    v-if="!$parent.hideHelpButtons && !$parent.helpInfoBellowLabel && itemMetadatum.metadatum && itemMetadatum.metadatum.description" 
                     :title="itemMetadatum.metadatum.name"
                     :message="itemMetadatum.metadatum.description"/>
         </span>
@@ -50,6 +50,11 @@
             <div   
                     v-show="hideCollapses || (isCollapsed || errorMessage)"
                     v-if="isTextInputComponent">
+                <p
+                        class="metadatum-description-help-info"
+                        v-if="!$parent.hideHelpButtons && $parent.helpInfoBellowLabel && itemMetadatum.metadatum && itemMetadatum.metadatum.description">
+                    {{ itemMetadatum.metadatum.description }}
+                </p>
                 <component 
                         :is="metadatumComponent"
                         v-model="values[0]" 
@@ -99,6 +104,11 @@
             <div 
                     v-show="hideCollapses || isCollapsed"
                     v-if="!isTextInputComponent">
+                <p
+                        class="metadatum-description-help-info"
+                        v-if="!$parent.hideHelpButtons && $parent.helpInfoBellowLabel && itemMetadatum.metadatum && itemMetadatum.metadatum.description">
+                    {{ itemMetadatum.metadatum.description }}
+                </p>
                 <component
                         :is="metadatumComponent"
                         v-model="values"
@@ -277,6 +287,11 @@
             margin-top: 0.15em;
             max-width: 50%;
         }
+        .metadatum-description-help-info {
+            font-size: 0.75em;
+            color: var(--tainacan-info-color);
+            margin-bottom: 0.5em;
+        }
         .metadata-type {
             font-size: 0.8125em;
             font-weight: 400;
diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js
index b4c90c3ff..028e5762c 100644
--- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js
+++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js
@@ -84,7 +84,7 @@ registerBlockType('tainacan/item-submission-form', {
             type: Boolean,
             default: false
         },
-        showAllowCommentsSection: {            
+        showAllowCommentsSection: {
             type: Boolean,
             default: false
         },
@@ -171,7 +171,11 @@ registerBlockType('tainacan/item-submission-form', {
         itemLinkButtonLabel: {
             type: String,
             default: __( 'Go to the item page', 'tainacan' )
-        }
+        },
+        helpInfoBellowLabel: {
+            type: Boolean,
+            default: false
+        },
     },
     supports: {
         align: ['full', 'wide'],
@@ -210,7 +214,8 @@ registerBlockType('tainacan/item-submission-form', {
             thumbnailSectionLabel,
             metadataSectionLabel,
             showItemLinkButton,
-            itemLinkButtonLabel
+            itemLinkButtonLabel,
+            helpInfoBellowLabel
         } = attributes;
 
         const fontSizes = [
@@ -496,7 +501,7 @@ registerBlockType('tainacan/item-submission-form', {
                                     }
                                 />
                                 <ToggleControl
-                                    label={__('Hide help buttons', 'tainacan')}
+                                    label={__('Hide help information', 'tainacan')}
                                     help={ hideHelpButtons ? __('Do not show the "?" icon with a help tooltip aside the labels.', 'tainacan') : __('Toggle to show the "?" icon with a help tooltip aside the labels.', 'tainacan')}
                                     checked={ hideHelpButtons }
                                     onChange={ ( isChecked ) => {
@@ -505,6 +510,17 @@ registerBlockType('tainacan/item-submission-form', {
                                         }  
                                     }
                                 />
+
+                                <ToggleControl
+                                    label={__('Help info bellow label', 'tainacan')}
+                                    help={ helpInfoBellowLabel ? __('Show the help info bellow the label instead of hidden in the "?" icon on the help tooltip.', 'tainacan') : __('Do not show the help info bellow the label, keep it on the "?" icon toolip.', 'tainacan')}
+                                    checked={ helpInfoBellowLabel }
+                                    onChange={ ( isChecked ) => {
+                                            helpInfoBellowLabel = isChecked;
+                                            setAttributes({ helpInfoBellowLabel: isChecked });
+                                        }  
+                                    }
+                                />
                                 <ToggleControl
                                     label={__('Hide metadata type', 'tainacan')}
                                     help={ hideMetadataTypes ? __('Do not show the metadata type aside the metadata label.', 'tainacan') : __('Toggle to show the metadata type aside the metadata label.', 'tainacan')}
@@ -696,7 +712,10 @@ registerBlockType('tainacan/item-submission-form', {
                                             (
                                             <div>
                                                 { documentSectionLabel ? 
-                                                    <span style={{ display: 'flex', alignItems: 'baseline', marginBottom: '5px' }}><span class="fake-text section-label"></span>{ !hideHelpButtons ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                    <span>
+                                                        <span style={{ display: 'flex', alignItems: 'baseline', marginBottom: '5px' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                        { (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
+                                                    </span>
                                                 : null }
                                                 { [ hideFileModalButton, hideTextModalButton, hideLinkModalButton ].filter((option) => { return option == false }).length > 1 ?
                                                     <div class="documents-section">
@@ -724,7 +743,10 @@ registerBlockType('tainacan/item-submission-form', {
                                         (
                                             <div style={{ display: 'flex', flexDirection: 'column' }}>
                                                 { !thumbnailSectionLabel ? 
-                                                    <span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                    <span>
+                                                        <span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                        { (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
+                                                    </span>
                                                 : null }
                                                 <div class="fake-switch"><span class="fake-icon"></span><span class="fake-text"></span></div>
                                             </div>
@@ -750,7 +772,8 @@ registerBlockType('tainacan/item-submission-form', {
                                         showAllowCommentsSection ? 
                                         (
                                             <div>
-                                                <span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                <span style={{ display: 'flex', alignItems: 'baseline' }}><span class="fake-text section-label"></span>{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }</span>
+                                                { (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
                                                 <div class="fake-switch"><span class="fake-icon"></span><span class="fake-text"></span></div>
                                             </div>
                                         ) : null }
@@ -767,7 +790,8 @@ registerBlockType('tainacan/item-submission-form', {
                                                         <div class={ 'fake-metadata' + (!hideCollapses ? ' has-collapse' : '') }>
                                                             { !hideCollapses ? <span class="fake-collapse-arrow"></span> : null }
                                                             <span style={{ lineHeight: '0em' }}>
-                                                                <span class="fake-text"></span>{ !hideMetadataTypes ? <span class="fake-text fake-text-info"></span> : null }{ !hideHelpButtons ? <span class="fake-text fake-help-button"></span> : null }
+                                                                <span class="fake-text"></span>{ !hideMetadataTypes ? <span class="fake-text fake-text-info"></span> : null }{ !hideHelpButtons && !helpInfoBellowLabel ? <span class="fake-text fake-help-button"></span> : null }
+                                                                { (!hideHelpButtons && helpInfoBellowLabel) ? <div><span class="fake-text fake-text-help-description"></span></div> : null }
                                                             </span>
                                                             <span class="fake-input"></span>
                                                         </div>
@@ -843,7 +867,8 @@ registerBlockType('tainacan/item-submission-form', {
             sentFormHeading,
             sentFormMessage,
             showItemLinkButton,
-            itemLinkButtonLabel
+            itemLinkButtonLabel,
+            helpInfoBellowLabel
         } = attributes;
         
         return <div 
@@ -880,7 +905,8 @@ registerBlockType('tainacan/item-submission-form', {
                     attachments-section-label={ attachmentsSectionLabel }
                     metadata-section-label={ metadataSectionLabel }
                     show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
-                    item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) } >
+                    item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
+                    help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
             </div>
         </div>
     },
diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-deprecated.js b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-deprecated.js
index 68a64a833..c9e4cd089 100644
--- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-deprecated.js
+++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-deprecated.js
@@ -1,6 +1,210 @@
 const { __ } = wp.i18n;
 
 export default [
+    /* Depecrated on Tainacan 0.18.3, due to the introduction of helpInfoBellowLabel */
+    {
+        attributes: {
+            collectionId: {
+                type: String,
+                default: undefined
+            },
+            isCollectionModalOpen: {
+                type: Boolean,
+                default: false
+            },
+            hideFileModalButton: {
+                type: Boolean,
+                default: false
+            },
+            hideTextModalButton: {
+                type: Boolean,
+                default: false
+            },
+            hideLinkModalButton: {
+                type: Boolean,
+                default: false
+            },
+            hideThumbnailSection: {
+                type: Boolean,
+                default: false
+            },
+            hideAttachmentsSection: {
+                type: Boolean,
+                default: false
+            },
+            hideHelpButtons: {
+                type: Boolean,
+                default: false
+            },
+            hideMetadataTypes: {
+                type: Boolean,
+                default: false
+            },
+            showAllowCommentsSection: {
+                type: Boolean,
+                default: false
+            },
+            hideCollapses: {
+                type: Boolean,
+                default: false
+            },
+            backgroundColor: {
+                type: Object,
+                default: { r: 255, g: 255, b: 255, a: 0}
+            },
+            baseFontSize: {
+                type: Number,
+                default: 16
+            },
+            inputColor: {
+                type: String,
+                default: '#1d1d1d'
+            },
+            inputBackgroundColor: {
+                type: String,
+                default: '#ffffff'
+            },
+            inputBorderColor: {
+                type: String,
+                default: '#dbdbdb'
+            },
+            labelColor: {
+                type: String,
+                default: '#454647'
+            },
+            infoColor: {
+                type: String,
+                default: '#555758'
+            },
+            primaryColor: {
+                type: String,
+                default: '#d9eced'
+            },
+            secondaryColor: {
+                type: String,
+                default: '#298596'
+            },
+            enabledMetadata: {
+                type: Array,
+                default: []
+            },
+            collectionMetadata: {
+                type: Array,
+                default: []
+            },
+            isLoadingCollectionMetadata: {
+                type: Boolean,
+                default: false
+            },
+            sentFormHeading: {
+                type: String,
+                default: __( 'Form submitted!', 'tainacan' )
+            },
+            sentFormMessage: {
+                type: String,
+                default: __( 'Thank you. Your item was submitted to the collection.', 'tainacan' )
+            },
+            documentSectionLabel: {
+                type: String,
+                default: __( 'Document', 'tainacan' )
+            },
+            attachmentsSectionLabel: {
+                type: String,
+                default: __( 'Attachments', 'tainacan' )
+            },
+            thumbnailSectionLabel: {
+                type: String,
+                default: __( 'Thumbnail', 'tainacan' )
+            },
+            metadataSectionLabel: {
+                type: String,
+                default: __( 'Metadata', 'tainacan' )
+            },
+            showItemLinkButton: {
+                type: Boolean,
+                default: false
+            },
+            itemLinkButtonLabel: {
+                type: String,
+                default: __( 'Go to the item page', 'tainacan' )
+            }
+        },
+        supports: {
+            align: ['full', 'wide'],
+            html: true,
+            multiple: false
+        },
+        save({ attributes, className }){
+            const {
+                collectionId,
+                backgroundColor,
+                hideFileModalButton,
+                hideTextModalButton,
+                hideLinkModalButton,
+                hideThumbnailSection,
+                hideAttachmentsSection,
+                showAllowCommentsSection,
+                hideHelpButtons,
+                hideMetadataTypes,
+                hideCollapses,
+                documentSectionLabel,
+                thumbnailSectionLabel,
+                attachmentsSectionLabel,
+                metadataSectionLabel,
+                baseFontSize,
+                inputColor,
+                inputBackgroundColor,
+                inputBorderColor,
+                labelColor,
+                infoColor,
+                primaryColor,
+                secondaryColor,
+                enabledMetadata,
+                sentFormHeading,
+                sentFormMessage,
+                showItemLinkButton,
+                itemLinkButtonLabel
+            } = attributes;
+            
+            return <div 
+                        style={{
+                            'font-size': baseFontSize + 'px',
+                            '--tainacan-base-font-size': baseFontSize + 'px',
+                            '--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
+                            '--tainacan-input-color': inputColor,
+                            '--tainacan-input-background-color': inputBackgroundColor,
+                            '--tainacan-input-border-color': inputBorderColor,
+                            '--tainacan-label-color': labelColor,
+                            '--tainacan-info-color': infoColor,
+                            '--tainacan-primary': primaryColor,
+                            '--tainacan-secondary': secondaryColor
+                        }}
+                        className={ className }>
+                <div 
+                        id="tainacan-item-submission-form"
+                        collection-id={ collectionId }
+                        hide-file-modal-button={ hideFileModalButton.toString() }
+                        hide-text-modal-button={ hideTextModalButton.toString() }
+                        hide-link-modal-button={ hideLinkModalButton.toString() }
+                        hide-thumbnail-section={ hideThumbnailSection.toString() }
+                        hide-attachments-section={ hideAttachmentsSection.toString() }
+                        show-allow-comments-section={ showAllowCommentsSection.toString() }
+                        hide-help-buttons={ hideHelpButtons.toString() }
+                        hide-metadata-types={ hideMetadataTypes.toString() }
+                        hide-collapses={ hideCollapses.toString() }
+                        enabled-metadata={ enabledMetadata.toString() }
+                        sent-form-heading={ sentFormHeading }
+                        sent-form-message={ sentFormMessage }
+                        document-section-label={ documentSectionLabel }
+                        thumbnail-section-label={ thumbnailSectionLabel }
+                        attachments-section-label={ attachmentsSectionLabel }
+                        metadata-section-label={ metadataSectionLabel }
+                        show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
+                        item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) } >
+                </div>
+            </div>
+        }
+    },
     /* Deprecated on Tainacan 0.18, due to the introduction of itemLinkButtonLabel and showItemLinkButton */
     {
         attributes: {
diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss
index 80e145e96..44e331aca 100644
--- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss
+++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss
@@ -61,6 +61,12 @@
                 opacity: 0.75;
                 margin-left: 6px;
             }
+            &.fake-text-help-description {
+                background-color: var(--tainacan-info-color, rgba(200,200,200, 0.3));
+                width: 35%;
+                opacity: 0.75;
+                margin-top: 4px;
+            }
             &.fake-help-button {
                 background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
                 height: 0.32em;
diff --git a/src/views/item-submission/item-submission.vue b/src/views/item-submission/item-submission.vue
index 6929d07a9..fad34ec70 100644
--- a/src/views/item-submission/item-submission.vue
+++ b/src/views/item-submission/item-submission.vue
@@ -20,6 +20,7 @@
             :metadata-section-label="$root.metadataSectionLabel"
             :show-item-link-button="$root.showItemLinkButton"
             :item-link-button-label="$root.itemLinkButtonLabel"
+            :help-info-bellow-label="$root.helpInfoBellowLabel ? $root.helpInfoBellowLabel : false"
              />
 </template>
 
diff --git a/src/views/item-submission/js/item-submission-main.js b/src/views/item-submission/js/item-submission-main.js
index 2ff2dadea..821edc876 100644
--- a/src/views/item-submission/js/item-submission-main.js
+++ b/src/views/item-submission/js/item-submission-main.js
@@ -119,7 +119,8 @@ document.addEventListener("DOMContentLoaded", () => {
                 attachmentsSectionLabel: '',
                 metadataSectionLabel: '',
                 showItemLinkButton: false,
-                itemLinkButtonLabel: ''
+                itemLinkButtonLabel: '',
+                helpInfoBellowLabel: false
             },
             beforeMount () {
                 // Collection source settings
@@ -145,6 +146,8 @@ document.addEventListener("DOMContentLoaded", () => {
                     this.hideHelpButtons = this.isParameterTrue('hide-help-buttons');
                 if (this.$el.attributes['hide-metadata-types'] != undefined)
                     this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
+                if (this.$el.attributes['help-info-bellow-label'] != undefined)
+                    this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
 
                 // Form sections labels
                 if (this.$el.attributes['document-section-label'] != undefined)
diff --git a/src/views/item-submission/pages/item-submission-form.vue b/src/views/item-submission/pages/item-submission-form.vue
index 26f072abd..362e2a838 100644
--- a/src/views/item-submission/pages/item-submission-form.vue
+++ b/src/views/item-submission/pages/item-submission-form.vue
@@ -29,9 +29,14 @@
                             class="section-label">
                         <label>{{ documentSectionLabel }}</label>
                         <help-button
-                                v-if="!hideHelpButtons"
+                                v-if="!hideHelpButtons && !helpInfoBellowLabel && $i18n.getHelperMessage('items', 'document')"
                                 :title="$i18n.getHelperTitle('items', 'document')"
                                 :message="$i18n.getHelperMessage('items', 'document')"/>
+                        <p
+                                class="metadatum-description-help-info"
+                                v-if="!hideHelpButtons && helpInfoBellowLabel && $i18n.getHelperMessage('items', 'document')">
+                            {{ $i18n.getHelperMessage('items', 'document') }}
+                        </p>
                     </div>
                     <div 
                             class="section-box document-field"
@@ -137,10 +142,14 @@
                             class="section-label">
                         <label>{{ thumbnailSectionLabel }}</label>
                         <help-button
-                                v-if="!hideHelpButtons"
+                                v-if="!hideHelpButtons && !helpInfoBellowLabel && $i18n.getHelperMessage('items', '_thumbnail_id')"
                                 :title="$i18n.getHelperTitle('items', '_thumbnail_id')"
                                 :message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
-
+                        <p
+                                class="metadatum-description-help-info"
+                                v-if="!hideHelpButtons && helpInfoBellowLabel && $i18n.getHelperMessage('items', '_thumbnail_id')">
+                            {{ $i18n.getHelperMessage('items', '_thumbnail_id') }}
+                        </p>
                     </div>
                     <div class="section-toggle">
                         <p>{{ showThumbnailInput ? $i18n.get('info_thumbnail_custom') : $i18n.get('info_thumbnail_default_from_document') }}</p>
@@ -276,9 +285,14 @@
                     <div class="section-label">
                         <label>{{ $i18n.get('label_comments') }}</label>
                         <help-button
-                                v-if="!hideHelpButtons"
+                                v-if="!hideHelpButtons && !helpInfoBellowLabel && $i18n.getHelperMessage('items', 'comment_status')"
                                 :title="$i18n.getHelperTitle('items', 'comment_status')"
                                 :message="$i18n.getHelperMessage('items', 'comment_status')"/>
+                        <p
+                                class="metadatum-description-help-info"
+                                v-if="!hideHelpButtons && helpInfoBellowLabel && $i18n.getHelperMessage('items', 'comment_status')">
+                            {{ $i18n.getHelperMessage('items', 'comment_status') }}
+                        </p>
                     </div>
                     <div class="section-toggle">
                         <div class="field has-addons">
@@ -462,7 +476,8 @@ export default {
         attachmentsSectionLabel: String,
         metadataSectionLabel: String,
         showItemLinkButton: Boolean,
-        itemLinkButtonLabel: String
+        itemLinkButtonLabel: String,
+        helpInfoBellowLabel: Boolean
     },
     data(){
         return {
@@ -814,6 +829,12 @@ export default {
         }
     }
 
+    .metadatum-description-help-info {
+        font-size: 0.75em;
+        color: var(--tainacan-info-color);
+        margin-bottom: 0.5em;
+    }
+
     .document-field {
         ul {
             list-style: none;