From d317452ebe4c025d635810142e671a0fdc64e631 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 27 Jan 2020 16:55:27 +1000 Subject: [PATCH 01/10] Invoke mediaUploadSync for gallery in React hook --- packages/block-library/src/gallery/gallery.native.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 4cc66c44e68887..60e342ca718cc5 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'; /** * Internal dependencies */ +import { mediaUploadSync } from 'react-native-gutenberg-bridge'; import GalleryImage from './gallery-image'; import { defaultColumnsNumber } from './shared'; import styles from './gallery-styles.scss'; @@ -17,7 +18,7 @@ import Tiles from './tiles'; */ import { __, sprintf } from '@wordpress/i18n'; import { BlockCaption } from '@wordpress/block-editor'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; const TILE_SPACING = 15; @@ -27,6 +28,7 @@ const MAX_DISPLAYED_COLUMNS_NARROW = 2; export const Gallery = ( props ) => { const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); + useEffect( mediaUploadSync, [] ); const { clientId, From cc21065f5e3f5b5ed2dc29044437bdf2935a54e7 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 27 Jan 2020 16:56:44 +1000 Subject: [PATCH 02/10] Use integer type explicitly for gallery image id --- packages/block-library/src/gallery/gallery.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 60e342ca718cc5..146c692bfe7a56 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -92,7 +92,7 @@ export const Gallery = ( props ) => { key={ img.id || img.url } url={ img.url } alt={ img.alt } - id={ img.id } + id={ parseInt( img.id ) } // make id an integer explicitly isCropped={ imageCrop } isFirstItem={ index === 0 } isLastItem={ ( index + 1 ) === images.length } From 4985f3f8abb03a011c83dc38f1db4eabf368a964 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 29 Jan 2020 11:38:28 +1000 Subject: [PATCH 03/10] Set state before attributes on upload success in gallery image --- .../block-library/src/gallery/gallery-image.native.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js index d1976bc42ea2d5..d5a706ef21c1f8 100644 --- a/packages/block-library/src/gallery/gallery-image.native.js +++ b/packages/block-library/src/gallery/gallery-image.native.js @@ -128,15 +128,15 @@ class GalleryImage extends Component { } finishMediaUploadWithSuccess( payload ) { - this.props.setAttributes( { - id: payload.mediaServerId, - url: payload.mediaUrl, - } ); - this.setState( { isUploadInProgress: false, didUploadFail: false, } ); + + this.props.setAttributes( { + id: payload.mediaServerId, + url: payload.mediaUrl, + } ); } finishMediaUploadWithFailure() { From 4aedce8a203da459d8396112845be9a54040a601 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 29 Jan 2020 12:39:31 +1000 Subject: [PATCH 04/10] Use ref hook for concurrency in media placeholder --- .../src/components/media-placeholder/index.native.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index e120c53daf2c01..c051143f23a635 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { useRef } from 'react'; import { View, Text, TouchableWithoutFeedback } from 'react-native'; import { uniqWith } from 'lodash'; @@ -35,9 +36,13 @@ function MediaPlaceholder( props ) { value = [], } = props; + const mediaRef = useRef( value ); + mediaRef.current = value; + const setMedia = multiple && addToGallery ? - ( selected ) => onSelect( uniqWith( [ ...value, ...selected ], ( media1, media2 ) => { - return media1.id === media2.id || media1.url === media2.url; + ( selected ) => onSelect( uniqWith( [ ...mediaRef.current, ...selected ], + ( media1, media2 ) => { + return media1.id === media2.id || media1.url === media2.url; } ) ) : onSelect; From 9effb79bc53464501db8d8ef5eb257e269940779 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 29 Jan 2020 12:56:54 +1000 Subject: [PATCH 05/10] Extract dedup function and add comments in media placeholder --- .../media-placeholder/index.native.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index c051143f23a635..7c1a9f1c2c3536 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -22,6 +22,11 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './styles.scss'; +// remove duplicates after gallery append +const dedupMedia = ( media ) => uniqWith( media, ( media1, media2 ) => { + return media1.id === media2.id || media1.url === media2.url; +} ); + function MediaPlaceholder( props ) { const { addToGallery, @@ -36,15 +41,15 @@ function MediaPlaceholder( props ) { value = [], } = props; + // use ref to keep media array current for callbacks during rerenders const mediaRef = useRef( value ); mediaRef.current = value; - const setMedia = multiple && addToGallery ? - ( selected ) => onSelect( uniqWith( [ ...mediaRef.current, ...selected ], - ( media1, media2 ) => { - return media1.id === media2.id || media1.url === media2.url; - } ) ) : - onSelect; + // append and deduplicate media array for gallery use case + const setMedia = multiple && addToGallery ? ( selected ) => { + return onSelect( dedupMedia ( [ ...mediaRef.current, ...selected ] ) ); + } : + onSelect; const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); From f101c89d597003fc6ffbc4d2b99e7624a104c9a5 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 29 Jan 2020 13:28:16 +1000 Subject: [PATCH 06/10] Fix lint --- .../src/components/media-placeholder/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 7c1a9f1c2c3536..94e233ca2cc28f 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -46,10 +46,10 @@ function MediaPlaceholder( props ) { mediaRef.current = value; // append and deduplicate media array for gallery use case - const setMedia = multiple && addToGallery ? ( selected ) => { - return onSelect( dedupMedia ( [ ...mediaRef.current, ...selected ] ) ); + const setMedia = multiple && addToGallery ? ( selected ) => { + return onSelect( dedupMedia( [ ...mediaRef.current, ...selected ] ) ); } : - onSelect; + onSelect; const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); From e36d4cf75a15073513e86b4923ae1d4ea30bda10 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 31 Jan 2020 22:25:30 +1000 Subject: [PATCH 07/10] Use explicit radix with parseInt Co-Authored-By: Gerardo Pacheco --- packages/block-library/src/gallery/gallery.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 146c692bfe7a56..1adb8f501b8a3b 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -92,7 +92,7 @@ export const Gallery = ( props ) => { key={ img.id || img.url } url={ img.url } alt={ img.alt } - id={ parseInt( img.id ) } // make id an integer explicitly + id={ parseInt( img.id, 10 ) } // make id an integer explicitly isCropped={ imageCrop } isFirstItem={ index === 0 } isLastItem={ ( index + 1 ) === images.length } From a0ba9ce30da65ab18578f63fbc85af9a265ff257 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 31 Jan 2020 22:23:54 +1000 Subject: [PATCH 08/10] Import useRef from @wordpress/element --- .../src/components/media-placeholder/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 94e233ca2cc28f..6c3b9681c5c068 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { useRef } from 'react'; import { View, Text, TouchableWithoutFeedback } from 'react-native'; import { uniqWith } from 'lodash'; @@ -16,6 +15,7 @@ import { } from '@wordpress/block-editor'; import { Dashicon } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies From 617ea83862c54d8549b4395daaac887942691f8c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 31 Jan 2020 23:39:36 +1000 Subject: [PATCH 09/10] Fix lint --- .../src/components/media-placeholder/index.native.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 6249be051dcf2f..6d778bc82e98b9 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -19,9 +19,8 @@ import { useRef } from '@wordpress/element'; import styles from './styles.scss'; // remove duplicates after gallery append -const dedupMedia = ( media ) => uniqWith( media, ( media1, media2 ) => { - return media1.id === media2.id || media1.url === media2.url; -} ); +const dedupMedia = ( media ) => + uniqWith( media, ( media1, media2 ) => media1.id === media2.id || media1.url === media2.url ); function MediaPlaceholder( props ) { const { @@ -42,9 +41,10 @@ function MediaPlaceholder( props ) { mediaRef.current = value; // append and deduplicate media array for gallery use case - const setMedia = multiple && addToGallery - ? ( selected ) => onSelect( dedupMedia( [ ...mediaRef.current, ...selected ] ) ) - : onSelect; + const setMedia = + multiple && addToGallery + ? ( selected ) => onSelect( dedupMedia( [ ...mediaRef.current, ...selected ] ) ) + : onSelect; const isOneType = allowedTypes.length === 1; const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE ); From 09c7fd816416e490a3e0c07e0aa1a5a6eb1d23eb Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 3 Feb 2020 13:09:06 +1000 Subject: [PATCH 10/10] Fix lint / prettier --- .../src/components/media-placeholder/index.native.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 79cc117e9aaca2..c1a4def4e0e8c1 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -24,7 +24,11 @@ import styles from './styles.scss'; // remove duplicates after gallery append const dedupMedia = ( media ) => - uniqWith( media, ( media1, media2 ) => media1.id === media2.id || media1.url === media2.url ); + uniqWith( + media, + ( media1, media2 ) => + media1.id === media2.id || media1.url === media2.url + ); function MediaPlaceholder( props ) { const { @@ -47,7 +51,10 @@ function MediaPlaceholder( props ) { // append and deduplicate media array for gallery use case const setMedia = multiple && addToGallery - ? ( selected ) => onSelect( dedupMedia( [ ...mediaRef.current, ...selected ] ) ) + ? ( selected ) => + onSelect( + dedupMedia( [ ...mediaRef.current, ...selected ] ) + ) : onSelect; const isOneType = allowedTypes.length === 1;