Skip to content

Commit

Permalink
Refactor File block to use block.json metadata (#14862)
Browse files Browse the repository at this point in the history 
* Refactor File block to use block.json metadata

* Refactor edit to set the default value for download button label
  • Loading branch information
@gziolo
gziolo authored May 6, 2019
1 parent 4021055 commit be8add9
Show file tree
Hide file tree
Showing 5 changed files with 229 additions and 221 deletions.
36 changes: 35 additions & 1 deletion packages/block-library/src/file/block.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,38 @@
{
"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]"
}
}
}
12 changes: 9 additions & 3 deletions packages/block-library/src/file/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
} from '@wordpress/block-editor';
import { mediaUpload } from '@wordpress/editor';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { __, _x } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -55,8 +55,8 @@ class FileEdit extends Component {
}

componentDidMount() {
const { attributes, noticeOperations } = this.props;
const { href } = attributes;
const { attributes, noticeOperations, setAttributes } = this.props;
const { downloadButtonText, href } = attributes;

// Upload a file drag-and-dropped into the editor
if ( isBlobURL( href ) ) {
Expand All @@ -73,6 +73,12 @@ class FileEdit extends Component {

revokeBlobURL( href );
}

if ( downloadButtonText === undefined ) {
setAttributes( {
downloadButtonText: _x( 'Download', 'button label' ),
} );
}
}

componentDidUpdate( prevProps ) {
Expand Down
222 changes: 5 additions & 217 deletions packages/block-library/src/file/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,242 +1,30 @@
/**
* 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
*/
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';

const { name } = metadata;

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 &&
<div>
{ ! RichText.isEmpty( fileName ) &&
<a
href={ textLinkHref }
target={ textLinkTarget }
rel={ textLinkTarget ? 'noreferrer noopener' : false }
>
<RichText.Content
value={ fileName }
/>
</a>
}
{ showDownloadButton &&
<a
href={ href }
className="wp-block-file__button"
download={ true }
>
<RichText.Content
value={ downloadButtonText }
/>
</a>
}
</div>
);
},

save,
};
42 changes: 42 additions & 0 deletions packages/block-library/src/file/save.js
View file
Original file line number Diff line number Diff line change
@@ -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 &&
<div>
{ ! RichText.isEmpty( fileName ) &&
<a
href={ textLinkHref }
target={ textLinkTarget }
rel={ textLinkTarget ? 'noreferrer noopener' : false }
>
<RichText.Content
value={ fileName }
/>
</a>
}
{ showDownloadButton &&
<a
href={ href }
className="wp-block-file__button"
download={ true }
>
<RichText.Content
value={ downloadButtonText }
/>
</a>
}
</div>
);
}
Loading

0 comments on commit be8add9

Please sign in to comment.