Add a File field, like for .pdf uploads #74

kienstra · 2021-06-14T05:03:06Z

Changes

Add a File field that allows non-image files:

There's already an Image field, but that doesn't allow some files like .pdf files

Fixes GF-3071

Testing instructions

cd /path/to/wp-content/plugins/genesis-custom-blocks/
git fetch
git checkout add/file-field
composer install && npm i && npm run build
/wp-admin > Custom Blocks > Add New
Add a field with the type 'File':

Click Publish
/wp-admin > Posts > Add New
Enter the name of the block you just created:

In the block, click 'Upload' and upload any .pdf file
Expected: The file name displays:

This won't preview the actual file in the Edit component, as the file could be a .pdf, a .zip, or any number of files

This still needs a JS component, but it's registered with PHP now.

Copied from the Image field, including the test.

js/src/block-editor/controls/file.js

This means that the field will actually display on the front-end.

Like how the File block accepts any file type: https://github.com/WordPress/gutenberg/blob/2f32ec41c3663fa63eae3ed2494a25bda76ab36f/packages/block-library/src/file/edit.js#L205

This was mainly copied from the Image control, so change this now.

Before, there was no e2e test of this.

Related to: WordPress/gutenberg#14623 (comment)

They're not necessarily images, as they could be files.

package-lock.json

This should be a bit easier, it was strange having $image_id.

There were only conflicts in tests/e2e/specs/all-fields.js They were trival, I kept both.

Align it horizontally with the help text.

kienstra · 2021-07-09T01:41:49Z

php/Blocks/Loader.php

@@ -72,7 +72,7 @@ public function init() {
 	 */
 	public function register_hooks() {
 		add_action( 'enqueue_block_editor_assets', [ $this, 'editor_assets' ] );
-		add_filter( 'block_categories', [ $this, 'register_categories' ] );
+		add_filter( 'block_categories_all', [ $this, 'register_categories' ] );


This will need to go out before WP 5.8 to prevent the PHP notice.

kienstra · 2021-07-09T02:03:45Z

js/src/block-editor/hooks/useMedia.js

-		if ( newImage?.alt ) {
-			setImageAlt( newImage.alt );
-		} else if ( newImage?.source_url ) { // eslint-disable-line camelcase
+		if ( media?.alt ) {


Most of this file's diff is just renaming parameters.

Like here, it changes newImage to media, as this hook is now used for files and images.

johnstonphilip · 2021-07-19T19:10:57Z

Nice work Ryan! This is working well for me when logged in as an administrator. However, if I log in as a contributor, I see the file field, but it doesn't actually upload the file. This isn't a must-fix right now, but possibly something to add in the future, if the user doesn't actually have permission to upload files. Perhaps we shouldn't show the upload field to them.

The main thing I wanted to be sure of was user capabilities work, which they do.

I was reading that you need to wrap MediaUpload in MediaUploadCheck here:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/media-upload/README.md

kienstra · 2021-07-19T21:26:19Z

Thanks, @dreamwhisper!

Great idea to test it with a contributor, never though of that. Also, good idea to use a <MediaUploadCheck>

As Jen mentioned, this can prevent the <MediaUpload> from showing for users that can't upload files.

There was a trivial conflict in Loader.php.

This isn't the right PR to do it in, but I forgot in #85.

kienstra · 2021-07-20T03:59:16Z

If it's OK, I bumped the WP Tested Up To version to 5.8, forgot to do that in #85

kienstra added 5 commits June 13, 2021 23:37

Rename useImage() to useMedia() to reuse it for the File field

c32d7b8

Add a File field via PHP, and a test class

7d271d5

This still needs a JS component, but it's registered with PHP now.

Add a React component for the new File field

3fe7839

Copied from the Image field, including the test.

Fix failed PHPUnit test in TestBlockPost.php

f714382

Display the file name, not an <img> like the Image field

d002213

kienstra commented Jun 14, 2021

View reviewed changes

js/src/block-editor/controls/file.js Show resolved Hide resolved

kienstra added 7 commits July 8, 2021 03:58

Add a validation method to echo/make a vailable the file

06b870e

This means that the field will actually display on the front-end.

Allow any file type for the file field

0e93a83

Like how the File block accepts any file type: https://github.com/WordPress/gutenberg/blob/2f32ec41c3663fa63eae3ed2494a25bda76ab36f/packages/block-library/src/file/edit.js#L205

Change the dashicon and text to File

853cbff

This was mainly copied from the Image control, so change this now.

Add the file field to the e2e test

bfbdab3

Before, there was no e2e test of this.

Add the testing .pdf file that I forgot to add

fb3e9e5

Fix an issue where the file doens't display on initial page load

dfa4647

Related to: WordPress/gutenberg#14623 (comment)

Change some parameter names from image to ownMedia

3dbadca

They're not necessarily images, as they could be files.

kienstra commented Jul 9, 2021

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

Simplify File::validate() to be one line

74bcd54

This should be a bit easier, it was strange having $image_id.

kienstra marked this pull request as ready for review July 9, 2021 01:26

kienstra added 2 commits July 8, 2021 20:34

Merge in develop, resolve conflict

f2e3b6c

There were only conflicts in tests/e2e/specs/all-fields.js They were trival, I kept both.

Improve the styling of the image file name

5d94d57

Align it horizontally with the help text.

kienstra commented Jul 9, 2021

View reviewed changes

kienstra requested review from joychen0521, mikemcalister and johnstonphilip July 9, 2021 04:58

kienstra mentioned this pull request Jul 14, 2021

Bump the version to 1.3.0 for release #85

Merged

dreamwhisper approved these changes Jul 19, 2021

View reviewed changes

johnstonphilip approved these changes Jul 19, 2021

View reviewed changes

kienstra added 2 commits July 19, 2021 16:34

Thanks to Jen's suggestion, use <MediaUploadCheck>

e9e387a

As Jen mentioned, this can prevent the <MediaUpload> from showing for users that can't upload files.

Merge in develop, resolve conflict

d9f5761

There was a trivial conflict in Loader.php.

Bump WP 'Tested up to' to 5.8, forgot earlier

e798b9e

This isn't the right PR to do it in, but I forgot in #85.

kienstra merged commit a2aedc4 into develop Jul 20, 2021

kienstra deleted the add/file-field branch July 20, 2021 06:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a File field, like for .pdf uploads #74

Add a File field, like for .pdf uploads #74

kienstra commented Jun 14, 2021 •

edited

Loading

kienstra Jul 9, 2021

kienstra Jul 9, 2021 •

edited

Loading

johnstonphilip commented Jul 19, 2021

kienstra commented Jul 19, 2021

kienstra commented Jul 20, 2021 •

edited

Loading

Add a File field, like for .pdf uploads #74

Add a File field, like for .pdf uploads #74

Conversation

kienstra commented Jun 14, 2021 • edited Loading

Changes

Testing instructions

kienstra Jul 9, 2021

Choose a reason for hiding this comment

kienstra Jul 9, 2021 • edited Loading

Choose a reason for hiding this comment

johnstonphilip commented Jul 19, 2021

kienstra commented Jul 19, 2021

kienstra commented Jul 20, 2021 • edited Loading

kienstra commented Jun 14, 2021 •

edited

Loading

kienstra Jul 9, 2021 •

edited

Loading

kienstra commented Jul 20, 2021 •

edited

Loading