Implement File block #7622

noisysocks · 2018-06-29T02:17:35Z

Based off of @mirka's work in #6805.

Closes #5462.

Implements a File block with the following features:

Editable text link
Text link can be copy and pasted to create a normal link
HTML5 download link
Copy URL button to copy the media file URL to clipboard
Accepts both Media Library files and external URLs only Media Library files
Text link can be changed to point to the Attachment Page
Text link can be changed to open in a new window
Accepts and uploads a file drag-and-dropped into the editor (or placeholder)
Transforms to/from Audio and Video blocks
Download button text is editable
Download button is optional

Implements a File block with the following features: - Editable text link - Text link can be copy and pasted to create a normal link - HTML5 download link - Copy URL button to copy the media file URL to clipboard - Accepts both Media Library files and external URLs only Media Library files - Text link can be changed to point to the Attachment Page - Text link can be changed to open in a new window - Accepts and uploads a file drag-and-dropped into the editor (or placeholder) - Transforms to/from Audio and Video blocks - Download button text is editable - Download button is optional Co-authored-by: mirka <[email protected]>

noisysocks · 2018-06-29T02:25:46Z

core-blocks/file/index.js

+export const settings = {
+	title: __( 'File' ),
+
+	description: __( 'Link to a file.' ),


@karmatosed — any suggestions for what the File block's description should be?

Something closer to Serve / put up a file for download?. Add a link to a file that visitors can download?

noisysocks · 2018-06-29T02:42:58Z

core-blocks/file/index.js

+				transform: ( attributes ) => {
+					return createBlock( 'core/file', {
+						href: attributes.src,
+						fileName: attributes.caption && attributes.caption.join(),


Calling join() like this won't work for more complex cases where we have e.g. bold and italic text in the caption.

Created issue #7626 for this.

- Move inline functions in render method to class methods - Change `e` to `event` - Remove unnecessary if statement

talldan · 2018-06-29T06:41:57Z

It seems possible to transform file blocks that are not audio or video to those block types (e.g. a pdf).

edit - created issue #7625

noisysocks · 2018-06-29T07:12:41Z

This is in pretty good shape now. @talldan and reviewed and tested the code together, and fixed up some minor issues. Aiming to merge this early next week.

Soean · 2018-06-29T08:36:04Z

Nice work! What do you think about selecting/changing the color of the download button?

mcsf

This looks great, even though I left some generally secondary comments.

The 'file' transform I'd have a better look at, either fixing or removing it.

mcsf · 2018-06-29T13:51:15Z

core-blocks/file/index.js

+export const settings = {
+	title: __( 'File' ),
+
+	description: __( 'Link to a file.' ),


Something closer to Serve / put up a file for download?. Add a link to a file that visitors can download?

mcsf · 2018-06-29T13:53:57Z

core-blocks/file/index.js

+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlobURL } from '@wordpress/utils';


Deprecated in favor of wp.blob.

mcsf · 2018-06-29T14:07:41Z

core-blocks/file/index.js

+				},
+			},
+		],
+		to: [


It's pretty strange to unconditionally offer transforms to audio and video regardless of file type, but I also understand that there's no matching mechanism in transforms (unlike isMatch when converting classic content to blocks). We could tackle this later, but just noting that the UX can be a bit weird (offering a transform that will break if the file is, say, a ZIP file).

Yep, agree with that. I've created an issue for this - #7625.

The question is whether we're happy to leave it as it is and merge this, or whether we want to remove the transforms temporarily.

Another alternative could be to show a warning on audio and video blocks if the file type is incorrect.

I've no strong opinion either way. Leaning slightly to leaving it as is for now because if we fix the bug in a future PR it aligns better with our goal of having the next release be 'feature complete'.

mcsf · 2018-06-29T14:11:39Z

editor/utils/editor-media-upload/index.js

 *
 * @param   {Object}   $0                   Parameters object passed to the function.
- * @param   {string}   $0.allowedType       The type of media that can be uploaded.
+ * @param   {string}   $0.allowedType       The type of media that can be uploaded, or '*' to allow all.


Is it better to require an explicit '*' or to make allowedType optional and assume no restriction? (I'm not sure)

I had a think about it, and I think I prefer the * over making it optional. It at least signals a clear intention and is an accepted wildcard.

Making it optional and leaving it undefined could indicate either any or no allowed types.

Another option is to use a constant for the accepted values - e.g allowedType: fileTypes.image or allowedType: fileTypes.any.

mcsf · 2018-06-29T14:30:54Z

core-blocks/file/index.js

+						href: blobURL,
+						fileName: file.name,
+						textLinkHref: blobURL,
+					} );


Here's what I got when dragging a small ZIP file into the editor:

Fixed in 5202a06

When dragging and dropping a file to create a new block an error was being thrown. This is caused by attempting to use `getBlobByUrl` as though it returns a promise. This function seems to be synchronous so the fix is to use it that way.

noisysocks · 2018-07-03T00:47:20Z

Thanks for addressing those comments @talldan. This looks good to me! 👍:shipit:

pento

Looks good to me, let's ship it!

Fun side note, I was initially running into max file size issues, which I thought had been fixed. We really should get #4203 merged, too.

noisysocks · 2018-07-03T01:17:31Z

Thanks @pento! And props again to @mirka for the great work here 🎉🌈💃✨

talldan · 2018-07-03T02:33:34Z

and also thanks @mcsf for the helpful review comments 👍

aduth · 2018-07-18T14:13:19Z

core-blocks/file/index.js

+	transforms: {
+		from: [
+			{
+				type: 'files',


Seems to me this should have been given a priority of low value, since as implemented it has identical priority as any other file transform, when in fact this should be the fallback. For example, dropping an image should take advantage of the Image block's files transform before this one. I don't know if this is currently working, and if it is it only incidental and prone to future breakage.

See: https://wordpress.org/gutenberg/handbook/block-api/#transforms-optional

To control the priority with which a transform is applied, define a priority numeric property on your transform object, where a lower value will take precedence over higher values. This behaves much like a WordPress hook. Like hooks, the default priority is 10 when not otherwise set.

Issue at #8022

aduth · 2018-07-18T14:21:50Z

core-blocks/file/editable-link.js

+					onCopy={ this.copyLinkToClipboard }
+					onCut={ this.copyLinkToClipboard }
+					onPaste={ this.forcePlainTextPaste }
+					contentEditable


Warning:

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

Should this be using the RichText component instead? There are many complexities of contentEditable that are meant to be abstracted into this component for general usage like this.

Issue at #8023

aduth · 2018-07-18T14:37:35Z

This block appears to completely fail to handle file types not supported for upload. See #8025.

noisysocks mentioned this pull request Jun 29, 2018

Implement File block #6805

Closed

11 tasks

noisysocks added 9 commits June 29, 2018 12:27

e → event

d2b4236

Specify type on all of the file block's attributes

51d2cab

Use instead of calling setAttributes() in constructor

65c677c

this.props.attributes → attributes

08dd3bc

Use classnames to simplify className computation

6627400

this.props.hrefs → hrefs

1384512

Use let instead of IIFE

5fc44df

Add help text to Show Download Button toggle, improve copy

f96344b

Make FileBlockInspector a function component

86e5df1

noisysocks commented Jun 29, 2018

View reviewed changes

talldan added 5 commits June 29, 2018 13:32

Move inline functions in render to class methods

557cd04

Minor stylistic changes in editable-link component

03cfbdd

- Move inline functions in render method to class methods - Change `e` to `event` - Remove unnecessary if statement

Add visited styling for file block button in front-end

2911f3c

Add explanatory comment about use of RichText component

1f910fc

Renaming and commenting for file block attributes

3854c32

talldan force-pushed the add/file-block branch from dbb674d to 3854c32 Compare June 29, 2018 06:26

Renaming for openInNewWindow attribute for clarity

fc224c3

Fix file block content tests

7b9358e

noisysocks added [Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement. labels Jun 29, 2018

noisysocks added this to the 3.2 milestone Jun 29, 2018

noisysocks assigned noisysocks and talldan Jun 29, 2018

This was referenced Jun 29, 2018

File block allows transformation to audio or video block when uploaded file is not an audio or video file #7625

Closed

Converting from an audio block with a formatted caption to a file block results in an incorrect file link #7626

Closed

mcsf reviewed Jun 29, 2018

View reviewed changes

Use wp.blob instead of deprecated wp.utils

15f8086

talldan force-pushed the add/file-block branch from 59bce35 to 15f8086 Compare July 2, 2018 03:53

talldan added 2 commits July 2, 2018 11:57

Improve copy for file block description

a690317

pento approved these changes Jul 3, 2018

View reviewed changes

noisysocks merged commit 9356304 into master Jul 3, 2018

noisysocks deleted the add/file-block branch July 3, 2018 01:14

gziolo mentioned this pull request Jul 3, 2018

Add an "Insert File" Block #7683

Closed

aduth reviewed Jul 18, 2018

View reviewed changes

mcsf mentioned this pull request Jan 28, 2019

Make ClipboardButton inside a block work correctly in Safari #7106

Merged

ellatrix mentioned this pull request May 8, 2020

ClipboardButton: remove wrapper span #22218

Merged

6 tasks

Implement File block #7622

Implement File block #7622

Uh oh!

Conversation

noisysocks commented Jun 29, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

talldan commented Jun 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noisysocks commented Jun 29, 2018

Uh oh!

Soean commented Jun 29, 2018

Uh oh!

mcsf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noisysocks commented Jul 3, 2018

Uh oh!

pento left a comment

Choose a reason for hiding this comment

Uh oh!

noisysocks commented Jul 3, 2018

Uh oh!

talldan commented Jul 3, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth commented Jul 18, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

talldan commented Jun 29, 2018 •

edited

Loading