From c32d7b833532a58c6ed5db03f313280a9bac17bf Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 13 Jun 2021 23:37:38 -0500 Subject: [PATCH 01/16] Rename useImage() to useMedia() to reuse it for the File field --- js/src/block-editor/controls/image.js | 4 ++-- js/src/block-editor/hooks/index.js | 2 +- js/src/block-editor/hooks/{useImage.js => useMedia.js} | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) rename js/src/block-editor/hooks/{useImage.js => useMedia.js} (94%) diff --git a/js/src/block-editor/controls/image.js b/js/src/block-editor/controls/image.js index bfb1cc66f..0ec5d0ce5 100644 --- a/js/src/block-editor/controls/image.js +++ b/js/src/block-editor/controls/image.js @@ -21,7 +21,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useImage } from '../hooks'; +import { useMedia } from '../hooks'; const allowedTypes = [ 'image' ]; const defaultImgId = 0; @@ -37,7 +37,7 @@ const GcbImageControl = ( props ) => { removeImage, setIsUploading, uploadFiles, - } = useImage( fieldValue, onChange, allowedTypes ); + } = useMedia( fieldValue, onChange, allowedTypes ); return ( diff --git a/js/src/block-editor/hooks/index.js b/js/src/block-editor/hooks/index.js index 429d9d331..e3c7ebe05 100644 --- a/js/src/block-editor/hooks/index.js +++ b/js/src/block-editor/hooks/index.js @@ -1 +1 @@ -export { default as useImage } from './useImage'; +export { default as useMedia } from './useMedia'; diff --git a/js/src/block-editor/hooks/useImage.js b/js/src/block-editor/hooks/useMedia.js similarity index 94% rename from js/src/block-editor/hooks/useImage.js rename to js/src/block-editor/hooks/useMedia.js index 719037f32..1adc1cee6 100644 --- a/js/src/block-editor/hooks/useImage.js +++ b/js/src/block-editor/hooks/useMedia.js @@ -28,7 +28,7 @@ import { __, sprintf } from '@wordpress/i18n'; */ /** - * @typedef {Object} UseImageReturn The return value of the hook. + * @typedef {Object} UseMediaReturn The return value of the hook. * @property {string} imageAlt The alt attribute of the . * @property {string} imageSrc The src attribute of the . * @property {boolean} isUploading Whether the image is uploading. @@ -44,9 +44,9 @@ import { __, sprintf } from '@wordpress/i18n'; * @param {number|string} fieldValue The current field value. * @param {(imageId: number) => void} onChange Handles changing the field value. * @param {string[]} allowedTypes The allowed media types. - * @return {UseImageReturn} The return value of this hook. + * @return {UseMediaReturn} The return value of this hook. */ -const useImage = ( fieldValue, onChange, allowedTypes ) => { +const useMedia = ( fieldValue, onChange, allowedTypes ) => { const defaultImageSrc = ''; const [ imageSrc, setImageSrc ] = useState( defaultImageSrc ); const [ isUploading, setIsUploading ] = useState( false ); @@ -129,4 +129,4 @@ const useImage = ( fieldValue, onChange, allowedTypes ) => { }; }; -export default useImage; +export default useMedia; From 7d271d58e8f3f19aa98c4ae02261f60118405b72 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 13 Jun 2021 23:45:29 -0500 Subject: [PATCH 02/16] Add a File field via PHP, and a test class This still needs a JS component, but it's registered with PHP now. --- php/Blocks/Controls/File.php | 51 +++++++++++++ php/PostTypes/BlockPost.php | 1 + tests/php/Unit/Blocks/Controls/TestFile.php | 79 +++++++++++++++++++++ 3 files changed, 131 insertions(+) create mode 100644 php/Blocks/Controls/File.php create mode 100644 tests/php/Unit/Blocks/Controls/TestFile.php diff --git a/php/Blocks/Controls/File.php b/php/Blocks/Controls/File.php new file mode 100644 index 000000000..e3260a75c --- /dev/null +++ b/php/Blocks/Controls/File.php @@ -0,0 +1,51 @@ +label = __( 'File', 'genesis-custom-blocks' ); + } + + /** + * Register settings. + * + * @return void + */ + public function register_settings() { + foreach ( [ 'location', 'width', 'help' ] as $setting ) { + $this->settings[] = new ControlSetting( $this->settings_config[ $setting ] ); + } + } +} diff --git a/php/PostTypes/BlockPost.php b/php/PostTypes/BlockPost.php index eb5ccdfcb..267333315 100644 --- a/php/PostTypes/BlockPost.php +++ b/php/PostTypes/BlockPost.php @@ -72,6 +72,7 @@ public function register_controls() { 'textarea', 'url', 'email', + 'file', 'number', 'color', 'image', diff --git a/tests/php/Unit/Blocks/Controls/TestFile.php b/tests/php/Unit/Blocks/Controls/TestFile.php new file mode 100644 index 000000000..e530aeb90 --- /dev/null +++ b/tests/php/Unit/Blocks/Controls/TestFile.php @@ -0,0 +1,79 @@ +instance = new File(); + } + + /** + * Test __construct. + * + * @covers \Genesis\CustomBlocks\Blocks\Controls\File::__construct() + */ + public function test_construct() { + $this->assertEquals( 'file', $this->instance->name ); + $this->assertEquals( 'File', $this->instance->label ); + } + + /** + * Test register_settings. + * + * @covers \Genesis\CustomBlocks\Blocks\Controls\File::register_settings() + */ + public function test_register_settings() { + $expected_settings = [ + [ + 'name' => 'location', + 'label' => 'Field Location', + 'type' => 'location', + 'default' => 'editor', + 'help' => '', + 'value' => null, + ], + [ + 'name' => 'width', + 'label' => 'Field Width', + 'type' => 'width', + 'default' => '100', + 'help' => '', + 'value' => null, + ], + [ + 'name' => 'help', + 'label' => 'Help Text', + 'type' => 'text', + 'default' => '', + 'help' => '', + 'value' => null, + ], + ]; + + $this->assert_correct_settings( $expected_settings, $this->instance->settings ); + } +} From 3fe78393d9cb46527b72ced26149362e631e4542 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 14 Jun 2021 00:01:48 -0500 Subject: [PATCH 03/16] Add a React component for the new File field Copied from the Image field, including the test. --- js/src/block-editor/controls/file.js | 114 ++++++++++++++++++ js/src/block-editor/controls/index.js | 2 + js/src/block-editor/controls/test/file.js | 45 +++++++ .../block-editor/helpers/test/addControls.js | 1 + 4 files changed, 162 insertions(+) create mode 100644 js/src/block-editor/controls/file.js create mode 100644 js/src/block-editor/controls/test/file.js diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js new file mode 100644 index 000000000..279c3c171 --- /dev/null +++ b/js/src/block-editor/controls/file.js @@ -0,0 +1,114 @@ +/** + * External dependencies + */ +import * as React from 'react'; + +/** + * WordPress dependencies + */ +import { MediaUpload } from '@wordpress/block-editor'; +import { + BaseControl, + Button, + Placeholder, + DropZone, + DropZoneProvider, + FormFileUpload, + Spinner, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { useMedia } from '../hooks'; + +const allowedTypes = [ 'application' ]; +const defaultImgId = 0; + +const GcbFileControl = ( props ) => { + const { field, getValue, instanceId, onChange } = props; + const fieldValue = getValue( props ); + const { + imageSrc, + isUploading, + onSelect, + removeImage, + setIsUploading, + uploadFiles, + } = useMedia( fieldValue, onChange, allowedTypes ); + + return ( + + { !! field.help + ?

{ field.help }

+ : null + } + { !! imageSrc + ? ( + + ) : ( + + + { + if ( files.length ) { + setIsUploading( true ); + uploadFiles( files ); + } + } } + /> + + { isUploading + ? + : ( + <> + { + setIsUploading( true ); + uploadFiles( event.target.files ); + } } + accept="application/*" + multiple={ false } + > + { __( 'Upload', 'genesis-custom-blocks' ) } + + ( +
+ +
+ ) } + /> + + ) + } + + ) + } + + ); +}; + +export default GcbFileControl; diff --git a/js/src/block-editor/controls/index.js b/js/src/block-editor/controls/index.js index c6d6b68ae..bb2cc7820 100644 --- a/js/src/block-editor/controls/index.js +++ b/js/src/block-editor/controls/index.js @@ -5,6 +5,7 @@ import GcbTextControl from './text'; import GcbTextareaControl from './textarea'; import GcbURLControl from './url'; import GcbEmailControl from './email'; +import GcbFileControl from './file'; import GcbNumberControl from './number'; import GcbColorControl from './color'; import GcbImageControl from './image'; @@ -20,6 +21,7 @@ export default { textarea: GcbTextareaControl, url: GcbURLControl, email: GcbEmailControl, + file: GcbFileControl, number: GcbNumberControl, color: GcbColorControl, image: GcbImageControl, diff --git a/js/src/block-editor/controls/test/file.js b/js/src/block-editor/controls/test/file.js new file mode 100644 index 000000000..9c711f30a --- /dev/null +++ b/js/src/block-editor/controls/test/file.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import GcbFileControl from '../file'; + +jest.mock( '@wordpress/api-fetch', () => { + return jest.fn( () => { + return Promise.resolve( { + json: () => Promise.resolve( {} ), + } ); + } ); +} ); + +// @todo: remove this when the console warning no longer appears. +// Expected mock function not to be called but it was called with: +// ["wp.components.DropZoneProvider is deprecated. Note: wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code."] +// Core still has an older components file, so removing the provider now crashes the editor. +console.warn = jest.fn(); /* eslint-disable-line no-console */ + +/** + * Gets the props for the tested component. + * + * @return {Object} The props to pass to the component. + */ +const getProps = () => ( { + field: { + label: 'Here is a label', + help: 'And here is some text', + }, + getValue: jest.fn(), + onChange: jest.fn(), +} ); + +test( 'file control', () => { + const props = getProps(); + const { getByText } = render( ); + + expect( getByText( props.field.label ) ).toBeInTheDocument(); + expect( getByText( props.field.help ) ).toBeInTheDocument(); +} ); diff --git a/js/src/block-editor/helpers/test/addControls.js b/js/src/block-editor/helpers/test/addControls.js index af667e9f4..4cad95103 100644 --- a/js/src/block-editor/helpers/test/addControls.js +++ b/js/src/block-editor/helpers/test/addControls.js @@ -17,6 +17,7 @@ test( 'addControls', () => { checkbox: expect.anything(), color: expect.anything(), email: expect.anything(), + file: expect.anything(), image: expect.anything(), multiselect: expect.anything(), number: expect.anything(), From f71438221534902b68bd6ca8426510038d410450 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 14 Jun 2021 00:13:56 -0500 Subject: [PATCH 04/16] Fix failed PHPUnit test in TestBlockPost.php --- js/src/block-editor/controls/file.js | 8 +++---- js/src/block-editor/controls/image.js | 10 ++++----- js/src/block-editor/hooks/useMedia.js | 26 +++++++++++----------- tests/php/Unit/PostTypes/TestBlockPost.php | 1 + 4 files changed, 23 insertions(+), 22 deletions(-) diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js index 279c3c171..745e8937a 100644 --- a/js/src/block-editor/controls/file.js +++ b/js/src/block-editor/controls/file.js @@ -30,10 +30,10 @@ const GcbFileControl = ( props ) => { const { field, getValue, instanceId, onChange } = props; const fieldValue = getValue( props ); const { - imageSrc, + mediaSrc, isUploading, onSelect, - removeImage, + removeMedia, setIsUploading, uploadFiles, } = useMedia( fieldValue, onChange, allowedTypes ); @@ -44,14 +44,14 @@ const GcbFileControl = ( props ) => { ?

{ field.help }

: null } - { !! imageSrc + { !! mediaSrc ? ( + <> + { mediaSrc.match( fileRegex ) + ? mediaSrc.match( fileRegex )[ 0 ] + : null + } + + ) : ( From 06b870e0219493f005d76ae422a8f616dcbc9c83 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 8 Jul 2021 03:58:05 -0500 Subject: [PATCH 06/16] Add a validation method to echo/make a vailable the file This means that the field will actually display on the front-end. --- php/Blocks/Controls/File.php | 17 +++++++++++++++ php/Blocks/Loader.php | 2 +- tests/php/Unit/Blocks/Controls/TestFile.php | 23 +++++++++++++++++++++ tests/php/Unit/Blocks/TestLoader.php | 2 +- 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/php/Blocks/Controls/File.php b/php/Blocks/Controls/File.php index e3260a75c..ab279440d 100644 --- a/php/Blocks/Controls/File.php +++ b/php/Blocks/Controls/File.php @@ -48,4 +48,21 @@ public function register_settings() { $this->settings[] = new ControlSetting( $this->settings_config[ $setting ] ); } } + + /** + * Validates the value to be made available to the front-end template. + * + * @param string $value The value to either make available as a variable or echoed on the front-end template. + * @param bool $echo Whether this value will be echoed. + * @return string|int|false The value to be made available or echoed on the front-end template, false if none found. + */ + public function validate( $value, $echo ) { + $image_id = intval( $value ); + + if ( $echo ) { + return wp_get_attachment_url( $image_id ); + } else { + return $image_id; + } + } } diff --git a/php/Blocks/Loader.php b/php/Blocks/Loader.php index 5e98a9088..7fab33cd2 100644 --- a/php/Blocks/Loader.php +++ b/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' ] ); add_action( 'init', [ $this, 'retrieve_blocks' ] ); add_action( 'init', [ $this, 'dynamic_block_loader' ] ); add_filter( 'rest_endpoints', [ $this, 'add_rest_method' ] ); diff --git a/tests/php/Unit/Blocks/Controls/TestFile.php b/tests/php/Unit/Blocks/Controls/TestFile.php index e530aeb90..ed2fd3803 100644 --- a/tests/php/Unit/Blocks/Controls/TestFile.php +++ b/tests/php/Unit/Blocks/Controls/TestFile.php @@ -76,4 +76,27 @@ public function test_register_settings() { $this->assert_correct_settings( $expected_settings, $this->instance->settings ); } + + /** + * Test validate. + * + * @covers \Genesis\CustomBlocks\Blocks\Controls\File::validate() + */ + public function test_validate() { + $pdf_file = 'example.pdf'; + $attachment_id = $this->factory()->attachment->create_object( + [ 'file' => $pdf_file ], + 0, + [ + 'post_mime_type' => 'application/pdf', + ] + ); + + // This is needed because attachments seem to usually have this kind of metadata. + wp_update_attachment_metadata( $attachment_id, [ 'file' => $pdf_file ] ); + $attachment_url = wp_get_attachment_url( $attachment_id ); + + $this->assertEquals( $attachment_url, $this->instance->validate( $attachment_id, true ) ); + $this->assertEquals( $attachment_id, $this->instance->validate( $attachment_id, false ) ); + } } diff --git a/tests/php/Unit/Blocks/TestLoader.php b/tests/php/Unit/Blocks/TestLoader.php index 33137dc5a..c0a31e8e7 100644 --- a/tests/php/Unit/Blocks/TestLoader.php +++ b/tests/php/Unit/Blocks/TestLoader.php @@ -101,7 +101,7 @@ public function test_register_hooks() { $this->instance->register_hooks(); $this->assertEquals( 10, has_action( 'enqueue_block_editor_assets', [ $this->instance, 'editor_assets' ] ) ); - $this->assertEquals( 10, has_filter( 'block_categories', [ $this->instance, 'register_categories' ] ) ); + $this->assertEquals( 10, has_filter( 'block_categories_all', [ $this->instance, 'register_categories' ] ) ); $this->assertEquals( 10, has_action( 'init', [ $this->instance, 'retrieve_blocks' ] ) ); $this->assertEquals( 10, has_action( 'init', [ $this->instance, 'dynamic_block_loader' ] ) ); $this->assertEquals( 10, has_filter( 'rest_endpoints', [ $this->instance, 'add_rest_method' ] ) ); From 0e93a83b8a23c25b8537bcd4e5859e01ac7d9428 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 8 Jul 2021 04:11:35 -0500 Subject: [PATCH 07/16] Allow any file type for the file field Like how the File block accepts any file type: https://github.com/WordPress/gutenberg/blob/2f32ec41c3663fa63eae3ed2494a25bda76ab36f/packages/block-library/src/file/edit.js#L205 --- js/src/block-editor/controls/file.js | 8 +++----- js/src/block-editor/hooks/useMedia.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js index 0d9ca689b..b6e259e1f 100644 --- a/js/src/block-editor/controls/file.js +++ b/js/src/block-editor/controls/file.js @@ -23,7 +23,6 @@ import { __ } from '@wordpress/i18n'; */ import { useMedia } from '../hooks'; -const allowedTypes = [ 'application' ]; const defaultImgId = 0; const GcbFileControl = ( props ) => { @@ -36,7 +35,7 @@ const GcbFileControl = ( props ) => { removeMedia, setIsUploading, uploadFiles, - } = useMedia( fieldValue, onChange, allowedTypes ); + } = useMedia( fieldValue, onChange ); const fileRegex = /[^\/]+\.[^\/]+$/; return ( @@ -64,7 +63,7 @@ const GcbFileControl = ( props ) => { ) : ( - + { @@ -85,7 +84,7 @@ const GcbFileControl = ( props ) => { setIsUploading( true ); uploadFiles( event.target.files ); } } - accept="application/*" + accept="*" multiple={ false } > { __( 'Upload', 'genesis-custom-blocks' ) } @@ -94,7 +93,6 @@ const GcbFileControl = ( props ) => { gallery={ false } multiple={ false } onSelect={ onSelect } - allowedTypes={ allowedTypes } value={ getValue( props ) } render={ ( { open } ) => (
diff --git a/js/src/block-editor/hooks/useMedia.js b/js/src/block-editor/hooks/useMedia.js index 362865a19..f34949845 100644 --- a/js/src/block-editor/hooks/useMedia.js +++ b/js/src/block-editor/hooks/useMedia.js @@ -43,7 +43,7 @@ import { __, sprintf } from '@wordpress/i18n'; * * @param {number|string} fieldValue The current field value. * @param {(imageId: number) => void} onChange Handles changing the field value. - * @param {string[]} allowedTypes The allowed media types. + * @param {string[]} [allowedTypes] The allowed media types. * @return {UseMediaReturn} The return value of this hook. */ const useMedia = ( fieldValue, onChange, allowedTypes ) => { From 853cbffca208e5ae6b3c996f333c932ef9b1aa81 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 8 Jul 2021 04:22:54 -0500 Subject: [PATCH 08/16] Change the dashicon and text to File This was mainly copied from the Image control, so change this now. --- js/src/block-editor/controls/file.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js index b6e259e1f..0271d01f5 100644 --- a/js/src/block-editor/controls/file.js +++ b/js/src/block-editor/controls/file.js @@ -40,11 +40,11 @@ const GcbFileControl = ( props ) => { return ( - { !! field.help + { Boolean( field.help ) ?

{ field.help }

: null } - { !! mediaSrc + { Boolean( mediaSrc ) ? ( <> { mediaSrc.match( fileRegex ) @@ -63,7 +63,12 @@ const GcbFileControl = ( props ) => { ) : ( - + { From bfbdab3005deeadcb21e1f40a1c1a72c2ccc8f07 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 8 Jul 2021 05:06:35 -0500 Subject: [PATCH 09/16] Add the file field to the e2e test Before, there was no e2e test of this. --- js/src/block-editor/controls/file.js | 8 ++-- .../blocks/block-testing-example.php | 1 + tests/e2e/specs/all-fields.js | 42 ++++++++++++------- 3 files changed, 33 insertions(+), 18 deletions(-) diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js index 0271d01f5..15966f571 100644 --- a/js/src/block-editor/controls/file.js +++ b/js/src/block-editor/controls/file.js @@ -23,7 +23,7 @@ import { __ } from '@wordpress/i18n'; */ import { useMedia } from '../hooks'; -const defaultImgId = 0; +const defaultFileId = 0; const GcbFileControl = ( props ) => { const { field, getValue, instanceId, onChange } = props; @@ -40,11 +40,11 @@ const GcbFileControl = ( props ) => { return ( - { Boolean( field.help ) + { !! field.help ?

{ field.help }

: null } - { Boolean( mediaSrc ) + { !! mediaSrc ? ( <> { mediaSrc.match( fileRegex ) @@ -55,7 +55,7 @@ const GcbFileControl = ( props ) => { disabled={ !! isUploading } className="gcb-image__remove" onClick={ () => { - onChange( defaultImgId ); + onChange( defaultFileId ); removeMedia(); } } > diff --git a/tests/e2e/plugins/testing-blocks/blocks/block-testing-example.php b/tests/e2e/plugins/testing-blocks/blocks/block-testing-example.php index b2419d872..6cdb2c23a 100644 --- a/tests/e2e/plugins/testing-blocks/blocks/block-testing-example.php +++ b/tests/e2e/plugins/testing-blocks/blocks/block-testing-example.php @@ -15,6 +15,7 @@ 'testing-number', 'testing-color', 'testing-image', + 'testing-file', 'testing-select', 'testing-multiselect', 'testing-toggle', diff --git a/tests/e2e/specs/all-fields.js b/tests/e2e/specs/all-fields.js index cc8dfb5d1..503efbffe 100644 --- a/tests/e2e/specs/all-fields.js +++ b/tests/e2e/specs/all-fields.js @@ -16,6 +16,26 @@ import { visitAdminPage, } from '@wordpress/e2e-test-utils'; +const uploadMediaFile = async ( $context, fileName ) => { + await ( await queries.findAllByRole( $context, 'button', { name: /media library/i } ) )[ 0 ].click(); + const inputSelector = '.media-modal input[type=file]'; + await page.waitForSelector( inputSelector ); + const $input = await page.$( inputSelector ); + + const testImagePath = path.join( __dirname, '..', 'assets', fileName ); + const newFileName = uuid(); + const fileExtension = fileName.match( /.[^\.]+$/ )[ 0 ]; + const tmpFilePath = path.join( os.tmpdir(), `${ newFileName }${ fileExtension }` ); + fs.copyFileSync( testImagePath, tmpFilePath ); + + await $input.uploadFile( tmpFilePath ); + const buttonSelector = '.media-button-select:not([disabled])'; + await page.waitForSelector( buttonSelector ); + await page.click( buttonSelector ); + + return newFileName; +}; + describe( 'AllFields', () => { it( 'creates the block and makes the fields available in the block editor', async () => { const { findAllByLabelText, findAllByText, findByLabelText, findByRole, findByText } = queries; @@ -55,6 +75,10 @@ describe( 'AllFields', () => { label: 'Testing Image', name: 'testing-image', }, + file: { + label: 'Testing File', + name: 'testing-file', + }, select: { label: 'Testing Select', name: 'testing-select', @@ -113,6 +137,7 @@ describe( 'AllFields', () => { await addNewField( 'number' ); await addNewField( 'color' ); await addNewField( 'image' ); + await addNewField( 'file' ); await addNewField( 'select' ); await ( await findByLabelText( $editBlockDocument, /choices/i ) ).type( fields.select.choices ); await addNewField( 'multiselect' ); @@ -146,20 +171,8 @@ describe( 'AllFields', () => { await typeIntoField( 'number' ); await typeIntoField( 'color' ); - await ( await findByRole( $blockEditorDocument, 'button', { name: /media library/i } ) ).click(); - const inputSelector = '.media-modal input[type=file]'; - await page.waitForSelector( inputSelector ); - const $input = await page.$( inputSelector ); - - const testImagePath = path.join( __dirname, '..', 'assets', 'trombone.jpg' ); - const imageFileName = uuid(); - const tmpFileName = path.join( os.tmpdir(), imageFileName + '.jpg' ); - fs.copyFileSync( testImagePath, tmpFileName ); - - await $input.uploadFile( tmpFileName ); - const buttonSelector = '.media-button-select:not([disabled])'; - await page.waitForSelector( buttonSelector ); - await page.click( buttonSelector ); + const imageFileName = await uploadMediaFile( $blockEditorDocument, 'trombone.jpg' ); + const fileUploadName = await uploadMediaFile( $blockEditorDocument, 'example.pdf' ); await ( await findByLabelText( $blockEditorDocument, fields.select.label ) ).select( fields.select.value ); await page.click( `[value=${ fields.multiselect.value }` ); @@ -191,6 +204,7 @@ describe( 'AllFields', () => { await findByText( $blockEditorDocument, getExpectedText( 'block_field', 'color' ), options ); await findByText( $blockEditorDocument, imageFileName, options ); + await findByText( $blockEditorDocument, fileUploadName, options ); await findByText( $blockEditorDocument, getExpectedText( 'block_value', 'select' ), options ); await findByText( $blockEditorDocument, getExpectedText( 'block_field', 'select' ), options ); From fb3e9e59a8f12bbed7ab4651611a4fcb33de963b Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 8 Jul 2021 05:21:24 -0500 Subject: [PATCH 10/16] Add the testing .pdf file that I forgot to add --- tests/e2e/assets/example.pdf | Bin 0 -> 11080 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 tests/e2e/assets/example.pdf diff --git a/tests/e2e/assets/example.pdf b/tests/e2e/assets/example.pdf new file mode 100644 index 0000000000000000000000000000000000000000..c952c2d6afc4bb34268d534945952f510a6354b8 GIT binary patch literal 11080 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 Date: Thu, 8 Jul 2021 20:07:17 -0500 Subject: [PATCH 11/16] Fix an issue where the file doens't display on initial page load Related to: https://github.com/WordPress/gutenberg/issues/14623#issuecomment-499610251 --- js/src/block-editor/controls/file.js | 2 +- js/src/block-editor/hooks/useMedia.js | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/js/src/block-editor/controls/file.js b/js/src/block-editor/controls/file.js index 15966f571..0e1f99c59 100644 --- a/js/src/block-editor/controls/file.js +++ b/js/src/block-editor/controls/file.js @@ -48,7 +48,7 @@ const GcbFileControl = ( props ) => { ? ( <> { mediaSrc.match( fileRegex ) - ? mediaSrc.match( fileRegex )[ 0 ] + ? 
{ mediaSrc.match( fileRegex )[ 0 ] }
: null } -
- ) } - /> + + ( +
+ +
+ ) } + /> + ) } diff --git a/js/src/block-editor/controls/image.js b/js/src/block-editor/controls/image.js index 5225b0c65..55a532ea4 100644 --- a/js/src/block-editor/controls/image.js +++ b/js/src/block-editor/controls/image.js @@ -6,7 +6,10 @@ import * as React from 'react'; /** * WordPress dependencies */ -import { MediaUpload } from '@wordpress/block-editor'; +import { + MediaUpload, + MediaUploadCheck, +} from '@wordpress/block-editor'; import { BaseControl, Button, @@ -87,24 +90,26 @@ const GcbImageControl = ( props ) => { > { __( 'Upload', 'genesis-custom-blocks' ) } - ( -
- -
- ) } - /> + + ( +
+ +
+ ) } + /> + ) } From e798b9e4be98a42f6e9cbc46d726baf3ee6bde8c Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 19 Jul 2021 22:19:32 -0500 Subject: [PATCH 16/16] Bump WP 'Tested up to' to 5.8, forgot earlier This isn't the right PR to do it in, but I forgot in #85. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 20ffc95eb..ad9c01fa9 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Contributors: lukecarbis, ryankienstra, Stino11, rheinardkorf, studiopress, wpengine Tags: gutenberg, blocks, block editor, fields, template Requires at least: 5.4 -Tested up to: 5.7 +Tested up to: 5.8 Requires PHP: 5.6 Stable tag: 1.3.0 License: GPLv2 or later