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

Creates metadata section description block. #566.

This commit is contained in:
mateuswetah 2022-09-23 15:41:31 -03:00
parent ffef58e417
commit 1e2166ad8f
19 changed files with 259 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
compile-sass.sh
View File

@ -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

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

@ -63,7 +63,9 @@
}
},
"providesContext": {
"tainacan/itemId": "itemId"
"tainacan/metadataSectionId": "sectionId",
"tainacan/metadataSectionName": "sectionName",
"tainacan/metadataSectionDescription": "sectionDescription"
},
"supports": {
"align": ["full", "wide"],

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

@ -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) {

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

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

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

@ -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.');

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

@ -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={(

61
src/views/gutenberg-blocks/blocks/metadata-section-description/block.json Normal file
View File

@ -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"
}

1
src/views/gutenberg-blocks/blocks/metadata-section-description/deprecated.js Normal file
View File

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

56
src/views/gutenberg-blocks/blocks/metadata-section-description/edit.js Normal file
View File

@ -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>
</>
);
};

14
src/views/gutenberg-blocks/blocks/metadata-section-description/icon.js Normal file
View File

@ -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>
);

15
src/views/gutenberg-blocks/blocks/metadata-section-description/index.js Normal file
View File

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

16
src/views/gutenberg-blocks/blocks/metadata-section-description/save.js Normal file
View File

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

0
src/views/gutenberg-blocks/blocks/metadata-section-description/style.scss Normal file
View File

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

@ -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,

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

@ -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

3
src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
View File

@ -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!

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

@ -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,

31
src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js
View File

@ -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') }
</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
)
);
}
}

3
webpack.common.js
View File

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