Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: File Block is crashing as soon as a file is selected #10323

Merged
merged 2 commits into from
Oct 4, 2018
Merged

Fix: File Block is crashing as soon as a file is selected #10323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
535ab3d
Fix: File Block is crashing as soon as a file is selected
jorgefilipecosta Oct 3, 2018
ce546c3
Update test fixtures
jorgefilipecosta Oct 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/block-library/src/file/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
mediaUpload,
} from '@wordpress/editor';
import { compose } from '@wordpress/compose';
import { create } from '@wordpress/rich-text';

/**
* Internal dependencies
Expand Down Expand Up @@ -80,7 +81,7 @@ class FileEdit extends Component {
this.setState( { hasError: false } );
this.props.setAttributes( {
href: media.url,
fileName: media.title,
fileName: create( { text: media.title } ),
textLinkHref: media.url,
id: media.id,
} );
Expand Down Expand Up @@ -189,9 +190,7 @@ class FileEdit extends Component {
<RichText
wrapperClassName={ `${ className }__textlink` }
tagName="div" // must be block-level or else cursor disappears
format="string"
value={ fileName }
multiline="false"
placeholder={ __( 'Write file name…' ) }
keepPlaceholderOnFocus
formattingControls={ [] } // disable controls
Expand All @@ -207,7 +206,6 @@ class FileEdit extends Component {
formattingControls={ [] } // disable controls
placeholder={ __( 'Add text…' ) }
keepPlaceholderOnFocus
multiline="false"
onChange={ ( text ) => setAttributes( { downloadButtonText: text } ) }
/>
</div>
Expand Down
20 changes: 12 additions & 8 deletions packages/block-library/src/file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n';
import { createBlobURL } from '@wordpress/blob';
import { createBlock } from '@wordpress/blocks';
import { select } from '@wordpress/data';
import { RichText } from '@wordpress/editor';
import { getTextContent, isEmpty } from '@wordpress/rich-text';

/**
* Internal dependencies
Expand Down Expand Up @@ -37,8 +39,7 @@ export const settings = {
type: 'string',
},
fileName: {
type: 'string',
source: 'text',
source: 'rich-text',
selector: 'a:not([download])',
},
// Differs to the href when the block is configured to link to the attachment page
Expand All @@ -60,8 +61,7 @@ export const settings = {
default: true,
},
downloadButtonText: {
type: 'string',
source: 'text',
source: 'rich-text',
selector: 'a[download]',
default: __( 'Download' ),
},
Expand Down Expand Up @@ -203,13 +203,15 @@ export const settings = {

return ( href &&
<div>
{ fileName &&
{ ! isEmpty( fileName ) &&
<a
href={ textLinkHref }
target={ textLinkTarget }
rel={ textLinkTarget ? 'noreferrer noopener' : false }
>
{ fileName }
<RichText.Content
value={ fileName }
/>
</a>
}
{ showDownloadButton &&
Expand All @@ -219,9 +221,11 @@ export const settings = {
// ensure download attribute is still set when fileName
// is undefined. Using '' here as `true` still leaves
// the attribute unset.
download={ fileName || '' }
download={ getTextContent( fileName ) }
>
{ downloadButtonText }
<RichText.Content
value={ downloadButtonText }
/>
</a>
}
</div>
Expand Down
24 changes: 22 additions & 2 deletions test/integration/full-content/fixtures/core__file__new-window.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,31 @@
"attributes": {
"id": 176,
"href": "http://localhost:8888/wp-content/uploads/2018/05/keycodes.js",
"fileName": "6546",
"fileName": {
"formats": [
null,
null,
null,
null
],
"text": "6546"
},
"textLinkHref": "http://localhost:8888/wp-content/uploads/2018/05/keycodes.js",
"textLinkTarget": "_blank",
"showDownloadButton": true,
"downloadButtonText": "Download"
"downloadButtonText": {
"formats": [
null,
null,
null,
null,
null,
null,
null,
null
],
"text": "Download"
}
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" target=\"_blank\" rel=\"noreferrer noopener\">6546</a><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download=\"6546\">Download</a></div>"
Expand Down
20 changes: 18 additions & 2 deletions test/integration/full-content/fixtures/core__file__no-download-button.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,26 @@
"attributes": {
"id": 176,
"href": "http://localhost:8888/wp-content/uploads/2018/05/keycodes.js",
"fileName": "lkjfijwef",
"fileName": {
"formats": [
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"text": "lkjfijwef"
},
"textLinkHref": "http://localhost:8888/?attachment_id=176",
"showDownloadButton": false,
"downloadButtonText": "Download"
"downloadButtonText": {
"formats": [],
"text": ""
}
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-file\"><a href=\"http://localhost:8888/?attachment_id=176\">lkjfijwef</a></div>"
Expand Down
18 changes: 17 additions & 1 deletion test/integration/full-content/fixtures/core__file__no-text-link.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,24 @@
"attributes": {
"id": 176,
"href": "http://localhost:8888/wp-content/uploads/2018/05/keycodes.js",
"fileName": {
"formats": [],
"text": ""
},
"showDownloadButton": true,
"downloadButtonText": "Download"
"downloadButtonText": {
"formats": [
null,
null,
null,
null,
null,
null,
null,
null
],
"text": "Download"
}
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download=\"\">Download</a></div>"
Expand Down