From 61eebc9732b06a133c1f9fae6a2ad56466958c13 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 8 Apr 2019 12:06:05 +0200 Subject: [PATCH] Refactor File block to use block.json metadata --- packages/block-library/src/file/block.json | 37 ++- packages/block-library/src/file/index.js | 222 +----------------- packages/block-library/src/file/save.js | 42 ++++ packages/block-library/src/file/transforms.js | 138 +++++++++++ 4 files changed, 221 insertions(+), 218 deletions(-) create mode 100644 packages/block-library/src/file/save.js create mode 100644 packages/block-library/src/file/transforms.js diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index df285cfb60541..693fecc342161 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -1,4 +1,39 @@ { "name": "core/file", - "category": "common" + "category": "common", + "attributes": { + "id": { + "type": "number" + }, + "href": { + "type": "string" + }, + "fileName": { + "type": "string", + "source": "html", + "selector": "a:not([download])" + }, + "textLinkHref": { + "type": "string", + "source": "attribute", + "selector": "a:not([download])", + "attribute": "href" + }, + "textLinkTarget": { + "type": "string", + "source": "attribute", + "selector": "a:not([download])", + "attribute": "target" + }, + "showDownloadButton": { + "type": "boolean", + "default": true + }, + "downloadButtonText": { + "type": "string", + "source": "html", + "selector": "a[download]", + "default": "Download" + } + } } diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index 57d6fe5bc2c2b..86efc4291d56f 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -1,16 +1,7 @@ -/** - * External dependencies - */ -import { includes } from 'lodash'; - /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; -import { createBlobURL } from '@wordpress/blob'; -import { createBlock } from '@wordpress/blocks'; -import { select } from '@wordpress/data'; -import { RichText } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -18,6 +9,8 @@ import { RichText } from '@wordpress/block-editor'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; +import transforms from './transforms'; const { name } = metadata; @@ -25,218 +18,13 @@ export { metadata, name }; export const settings = { title: __( 'File' ), - description: __( 'Add a link to a downloadable file.' ), - icon, - keywords: [ __( 'document' ), __( 'pdf' ) ], - - attributes: { - id: { - type: 'number', - }, - href: { - type: 'string', - }, - fileName: { - type: 'string', - source: 'html', - selector: 'a:not([download])', - }, - // Differs to the href when the block is configured to link to the attachment page - textLinkHref: { - type: 'string', - source: 'attribute', - selector: 'a:not([download])', - attribute: 'href', - }, - // e.g. `_blank` when the block is configured to open in a new tab - textLinkTarget: { - type: 'string', - source: 'attribute', - selector: 'a:not([download])', - attribute: 'target', - }, - showDownloadButton: { - type: 'boolean', - default: true, - }, - downloadButtonText: { - type: 'string', - source: 'html', - selector: 'a[download]', - default: _x( 'Download', 'button label' ), - }, - }, - supports: { align: true, }, - - transforms: { - from: [ - { - type: 'files', - isMatch( files ) { - return files.length > 0; - }, - // We define a lower priorty (higher number) than the default of 10. This - // ensures that the File block is only created as a fallback. - priority: 15, - transform: ( files ) => { - const blocks = []; - - files.forEach( ( file ) => { - const blobURL = createBlobURL( file ); - - // File will be uploaded in componentDidMount() - blocks.push( createBlock( 'core/file', { - href: blobURL, - fileName: file.name, - textLinkHref: blobURL, - } ) ); - } ); - - return blocks; - }, - }, - { - type: 'block', - blocks: [ 'core/audio' ], - transform: ( attributes ) => { - return createBlock( 'core/file', { - href: attributes.src, - fileName: attributes.caption, - textLinkHref: attributes.src, - id: attributes.id, - } ); - }, - }, - { - type: 'block', - blocks: [ 'core/video' ], - transform: ( attributes ) => { - return createBlock( 'core/file', { - href: attributes.src, - fileName: attributes.caption, - textLinkHref: attributes.src, - id: attributes.id, - } ); - }, - }, - { - type: 'block', - blocks: [ 'core/image' ], - transform: ( attributes ) => { - return createBlock( 'core/file', { - href: attributes.url, - fileName: attributes.caption, - textLinkHref: attributes.url, - id: attributes.id, - } ); - }, - }, - ], - to: [ - { - type: 'block', - blocks: [ 'core/audio' ], - isMatch: ( { id } ) => { - if ( ! id ) { - return false; - } - const { getMedia } = select( 'core' ); - const media = getMedia( id ); - return !! media && includes( media.mime_type, 'audio' ); - }, - transform: ( attributes ) => { - return createBlock( 'core/audio', { - src: attributes.href, - caption: attributes.fileName, - id: attributes.id, - } ); - }, - }, - { - type: 'block', - blocks: [ 'core/video' ], - isMatch: ( { id } ) => { - if ( ! id ) { - return false; - } - const { getMedia } = select( 'core' ); - const media = getMedia( id ); - return !! media && includes( media.mime_type, 'video' ); - }, - transform: ( attributes ) => { - return createBlock( 'core/video', { - src: attributes.href, - caption: attributes.fileName, - id: attributes.id, - } ); - }, - }, - { - type: 'block', - blocks: [ 'core/image' ], - isMatch: ( { id } ) => { - if ( ! id ) { - return false; - } - const { getMedia } = select( 'core' ); - const media = getMedia( id ); - return !! media && includes( media.mime_type, 'image' ); - }, - transform: ( attributes ) => { - return createBlock( 'core/image', { - url: attributes.href, - caption: attributes.fileName, - id: attributes.id, - } ); - }, - }, - ], - }, - + transforms, edit, - - save( { attributes } ) { - const { - href, - fileName, - textLinkHref, - textLinkTarget, - showDownloadButton, - downloadButtonText, - } = attributes; - - return ( href && -
- { ! RichText.isEmpty( fileName ) && - - - - } - { showDownloadButton && - - - - } -
- ); - }, - + save, }; diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js new file mode 100644 index 0000000000000..461018e4bb8a7 --- /dev/null +++ b/packages/block-library/src/file/save.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { + href, + fileName, + textLinkHref, + textLinkTarget, + showDownloadButton, + downloadButtonText, + } = attributes; + + return ( href && +
+ { ! RichText.isEmpty( fileName ) && + + + + } + { showDownloadButton && + + + + } +
+ ); +} diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js new file mode 100644 index 0000000000000..a37aedfb45fce --- /dev/null +++ b/packages/block-library/src/file/transforms.js @@ -0,0 +1,138 @@ +/** + * External dependencies + */ +import { includes } from 'lodash'; + +/** + * WordPress dependencies + */ +import { createBlobURL } from '@wordpress/blob'; +import { createBlock } from '@wordpress/blocks'; +import { select } from '@wordpress/data'; + +const transforms = { + from: [ + { + type: 'files', + isMatch( files ) { + return files.length > 0; + }, + // We define a lower priorty (higher number) than the default of 10. This + // ensures that the File block is only created as a fallback. + priority: 15, + transform: ( files ) => { + const blocks = []; + + files.forEach( ( file ) => { + const blobURL = createBlobURL( file ); + + // File will be uploaded in componentDidMount() + blocks.push( createBlock( 'core/file', { + href: blobURL, + fileName: file.name, + textLinkHref: blobURL, + } ) ); + } ); + + return blocks; + }, + }, + { + type: 'block', + blocks: [ 'core/audio' ], + transform: ( attributes ) => { + return createBlock( 'core/file', { + href: attributes.src, + fileName: attributes.caption, + textLinkHref: attributes.src, + id: attributes.id, + } ); + }, + }, + { + type: 'block', + blocks: [ 'core/video' ], + transform: ( attributes ) => { + return createBlock( 'core/file', { + href: attributes.src, + fileName: attributes.caption, + textLinkHref: attributes.src, + id: attributes.id, + } ); + }, + }, + { + type: 'block', + blocks: [ 'core/image' ], + transform: ( attributes ) => { + return createBlock( 'core/file', { + href: attributes.url, + fileName: attributes.caption, + textLinkHref: attributes.url, + id: attributes.id, + } ); + }, + }, + ], + to: [ + { + type: 'block', + blocks: [ 'core/audio' ], + isMatch: ( { id } ) => { + if ( ! id ) { + return false; + } + const { getMedia } = select( 'core' ); + const media = getMedia( id ); + return !! media && includes( media.mime_type, 'audio' ); + }, + transform: ( attributes ) => { + return createBlock( 'core/audio', { + src: attributes.href, + caption: attributes.fileName, + id: attributes.id, + } ); + }, + }, + { + type: 'block', + blocks: [ 'core/video' ], + isMatch: ( { id } ) => { + if ( ! id ) { + return false; + } + const { getMedia } = select( 'core' ); + const media = getMedia( id ); + return !! media && includes( media.mime_type, 'video' ); + }, + transform: ( attributes ) => { + return createBlock( 'core/video', { + src: attributes.href, + caption: attributes.fileName, + id: attributes.id, + } ); + }, + }, + { + type: 'block', + blocks: [ 'core/image' ], + isMatch: ( { id } ) => { + if ( ! id ) { + return false; + } + const { getMedia } = select( 'core' ); + const media = getMedia( id ); + return !! media && includes( media.mime_type, 'image' ); + }, + transform: ( attributes ) => { + return createBlock( 'core/image', { + url: attributes.href, + caption: attributes.fileName, + id: attributes.id, + } ); + }, + }, + ], +}; + +export default transforms;