From a393ce83a50316a5de183b5b5b32e62ca39712d2 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 15 Dec 2022 12:31:01 +0200 Subject: [PATCH] create Openverse caption/attribution --- .../components/inserter/media-tab/utils.js | 2 +- .../block-editor/inserter-media-categories.js | 65 +++++++++++++++++++ .../src/components/media-categories/index.js | 65 +++++++++++++++++++ 3 files changed, 131 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/media-tab/utils.js b/packages/block-editor/src/components/inserter/media-tab/utils.js index 1e8128f8483a5a..311fa56527df00 100644 --- a/packages/block-editor/src/components/inserter/media-tab/utils.js +++ b/packages/block-editor/src/components/inserter/media-tab/utils.js @@ -18,7 +18,7 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) { // Add the common attributes between the different media types. const attributes = { id: media.id || undefined, - caption: media.caption || undefined, + caption: media.caption || undefined, // TODO: probably check to escape for security }; const mediaSrc = media.url; const alt = media.alt || undefined; diff --git a/packages/edit-site/src/components/block-editor/inserter-media-categories.js b/packages/edit-site/src/components/block-editor/inserter-media-categories.js index 848cd53f8b577e..5b634936c8a2a9 100644 --- a/packages/edit-site/src/components/block-editor/inserter-media-categories.js +++ b/packages/edit-site/src/components/block-editor/inserter-media-categories.js @@ -3,12 +3,76 @@ */ import { __ } from '@wordpress/i18n'; import { resolveSelect } from '@wordpress/data'; +import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ import { store as coreStore } from '@wordpress/core-data'; +const getExternalLink = ( url, text ) => + `${ text }`; + +const getOpenvereLicense = ( + license, + licenseVersion = '', // unknown version. + licenseUrl +) => { + let licenseName = license.trim(); + // PDM has no abbreviation + if ( license !== 'pdm' ) { + licenseName = license.toUpperCase().replace( 'SAMPLING', 'Sampling' ); + } + // If version is known, append version to the name. + if ( licenseVersion ) { + licenseName += ` ${ licenseVersion }`; + } + // For licenses other than public-domain marks, prepend 'CC' to the name. + const isPublicDomainMark = [ 'pdm', 'cc0' ].includes( license ); + if ( ! isPublicDomainMark ) { + licenseName = `CC ${ licenseName }`; + } + if ( !! licenseUrl ) { + license = getExternalLink( + `${ licenseUrl }?ref=openverse`, + licenseName + ); + } + // TODO: add translators comment. + const markedLicence = isPublicDomainMark + ? __( 'is marked with' ) + : __( 'is licensed under' ); + return `${ markedLicence } ${ license }`; +}; + +const getOpenverseCaption = ( item ) => { + const { + title = __( 'This work' ), // TODO: add translators comment. + foreign_landing_url: foreignLandingUrl, + creator, + creator_url: creatorUrl, + license, + license_version: licenseVersion, + license_url: licenseUrl, + } = item; + let _title = decodeEntities( title ); + if ( !! foreignLandingUrl ) { + _title = getExternalLink( foreignLandingUrl, _title ); + } + const fullLicense = getOpenvereLicense( + license, + licenseVersion, + licenseUrl + ); + let _creator = decodeEntities( creator ); + if ( creatorUrl ) { + _creator = getExternalLink( creatorUrl, creator ); + } + _creator = ` ${ __( 'by' ) } ${ _creator }`; // TODO: add translators comment. + const caption = `"${ _title }" ${ _creator } ${ fullLicense }.`; + return caption.replace( /\s{2}/g, ' ' ); +}; + const coreMediaFetch = async ( query = {} ) => { const mediaItems = await resolveSelect( coreStore ).getMediaItems( { ...query, @@ -76,6 +140,7 @@ const inserterMediaCategories = [ ...result, sourceId: result.id, id: undefined, + caption: getOpenverseCaption( result ), } ) ); }, hasAvailableMedia: true, diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js index 848cd53f8b577e..5b634936c8a2a9 100644 --- a/packages/editor/src/components/media-categories/index.js +++ b/packages/editor/src/components/media-categories/index.js @@ -3,12 +3,76 @@ */ import { __ } from '@wordpress/i18n'; import { resolveSelect } from '@wordpress/data'; +import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ import { store as coreStore } from '@wordpress/core-data'; +const getExternalLink = ( url, text ) => + `${ text }`; + +const getOpenvereLicense = ( + license, + licenseVersion = '', // unknown version. + licenseUrl +) => { + let licenseName = license.trim(); + // PDM has no abbreviation + if ( license !== 'pdm' ) { + licenseName = license.toUpperCase().replace( 'SAMPLING', 'Sampling' ); + } + // If version is known, append version to the name. + if ( licenseVersion ) { + licenseName += ` ${ licenseVersion }`; + } + // For licenses other than public-domain marks, prepend 'CC' to the name. + const isPublicDomainMark = [ 'pdm', 'cc0' ].includes( license ); + if ( ! isPublicDomainMark ) { + licenseName = `CC ${ licenseName }`; + } + if ( !! licenseUrl ) { + license = getExternalLink( + `${ licenseUrl }?ref=openverse`, + licenseName + ); + } + // TODO: add translators comment. + const markedLicence = isPublicDomainMark + ? __( 'is marked with' ) + : __( 'is licensed under' ); + return `${ markedLicence } ${ license }`; +}; + +const getOpenverseCaption = ( item ) => { + const { + title = __( 'This work' ), // TODO: add translators comment. + foreign_landing_url: foreignLandingUrl, + creator, + creator_url: creatorUrl, + license, + license_version: licenseVersion, + license_url: licenseUrl, + } = item; + let _title = decodeEntities( title ); + if ( !! foreignLandingUrl ) { + _title = getExternalLink( foreignLandingUrl, _title ); + } + const fullLicense = getOpenvereLicense( + license, + licenseVersion, + licenseUrl + ); + let _creator = decodeEntities( creator ); + if ( creatorUrl ) { + _creator = getExternalLink( creatorUrl, creator ); + } + _creator = ` ${ __( 'by' ) } ${ _creator }`; // TODO: add translators comment. + const caption = `"${ _title }" ${ _creator } ${ fullLicense }.`; + return caption.replace( /\s{2}/g, ' ' ); +}; + const coreMediaFetch = async ( query = {} ) => { const mediaItems = await resolveSelect( coreStore ).getMediaItems( { ...query, @@ -76,6 +140,7 @@ const inserterMediaCategories = [ ...result, sourceId: result.id, id: undefined, + caption: getOpenverseCaption( result ), } ) ); }, hasAvailableMedia: true,