From 589790553eb277b7b556f975e0e10827ad6bdce2 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Tue, 29 Jan 2019 15:36:14 +0100 Subject: [PATCH 01/15] Implement failed state UI --- packages/block-library/src/image/edit.native.js | 17 ++++++++++------- .../block-library/src/image/styles.native.scss | 11 +++++++++++ 2 files changed, 21 insertions(+), 7 deletions(-) create mode 100644 packages/block-library/src/image/styles.native.scss diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index eb73ef558542d..480401ce8ccd0 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput } from 'react-native'; +import { View, Image, TextInput, Text } from 'react-native'; import { subscribeMediaUpload, onMediaLibraryPressed, @@ -15,7 +15,7 @@ import { * Internal dependencies */ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor'; -import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; +import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; @@ -31,6 +31,7 @@ export default class ImageEdit extends React.Component { this.state = { progress: 0, isUploadInProgress: false, + isUploadFailed: false, }; this.mediaUpload = this.mediaUpload.bind( this ); @@ -62,7 +63,7 @@ export default class ImageEdit extends React.Component { switch ( payload.state ) { case MEDIA_ULOAD_STATE_UPLOADING: - this.setState( { progress: payload.progress, isUploadInProgress: true } ); + this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } ); break; case MEDIA_ULOAD_STATE_SUCCEEDED: this.finishMediaUploadWithSuccess( payload ); @@ -86,9 +87,7 @@ export default class ImageEdit extends React.Component { const { setAttributes } = this.props; setAttributes( { url: payload.mediaUrl, id: payload.mediaId } ); - this.setState( { isUploadInProgress: false } ); - - this.removeMediaUploadListener(); + this.setState( { isUploadInProgress: false, isUploadFailed: true } ); } addMediaUploadListener() { @@ -181,13 +180,17 @@ export default class ImageEdit extends React.Component { } return ( - + + {this.state.isUploadFailed && + + { __( 'Failed to insert media.Please tap for options.' ) } + } ); } } diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss new file mode 100644 index 0000000000000..0e12cbaccbada --- /dev/null +++ b/packages/block-library/src/image/styles.native.scss @@ -0,0 +1,11 @@ +.uploadFailedText { + color: white; + font-size: 14; + margin-top: 5; +} + +.uploadFailedContainer { + position: absolute; + flex-direction: column; + align-items: center; +} \ No newline at end of file From 7022790b69291885d99be64f13a236b457c79e85 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 30 Jan 2019 16:25:32 +0100 Subject: [PATCH 02/15] Move styles to better place --- packages/block-library/src/image/edit.native.js | 7 ++++--- packages/block-library/src/image/styles.native.scss | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 4930e45621fec..e1ddfba409be4 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -19,6 +19,7 @@ import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; +import styles from './styles.scss'; const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -180,16 +181,16 @@ export default class ImageEdit extends React.Component { } return ( - + - {this.state.isUploadFailed && + {this.state.isUploadFailed && - { __( 'Failed to insert media.Please tap for options.' ) } + { __( 'Failed to insert media.Please tap for options.' ) } } ); diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 0e12cbaccbada..0045d9bfa0cb9 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -1,3 +1,9 @@ +.imageContainer { + flex: 1; + justify-content: center; + align-items: center; +} + .uploadFailedText { color: white; font-size: 14; From b577d29544ae4972d8891daab5138178def3c951 Mon Sep 17 00:00:00 2001 From: mzorz Date: Wed, 30 Jan 2019 12:37:33 -0300 Subject: [PATCH 03/15] Support for failed upload retry (#13601) Support for failed upload retry --- .../block-library/src/image/edit.native.js | 121 ++++++++++-------- 1 file changed, 69 insertions(+), 52 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e1ddfba409be4..87b1788bab956 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,13 +2,14 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text } from 'react-native'; +import { View, Image, TextInput, TouchableWithoutFeedback } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, requestMediaPickFromDeviceLibrary, requestMediaPickFromDeviceCamera, mediaUploadSync, + onImageFailedRetry, } from 'react-native-gutenberg-bridge'; /** @@ -40,6 +41,7 @@ export default class ImageEdit extends React.Component { this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this ); this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this ); this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this ); + this.onImagePressed = this.onImagePressed.bind( this ); } componentDidMount() { @@ -55,6 +57,19 @@ export default class ImageEdit extends React.Component { this.removeMediaUploadListener(); } + onImagePressed() { + const { attributes } = this.props; + debugger; + + // TODO here check whether image is failed. If it is, then call onImageFailedRetry + // if it is not, then call onImageUploadCancel + if ( this.state.isUploadInProgress ) { + // TODO call onImageUploadCancel + } else if ( attributes.id && ! isURL( attributes.url ) ) { + onImageFailedRetry( attributes.id ); + } + } + mediaUpload( payload ) { const { attributes } = this.props; @@ -115,7 +130,7 @@ export default class ImageEdit extends React.Component { } ); }; - if ( ! url ) { + if ( ! url && !this.state.isUploadFailed) { const onMediaUploadButtonPressed = () => { requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => { if ( mediaUri ) { @@ -158,56 +173,58 @@ export default class ImageEdit extends React.Component { const progress = this.state.progress * 100; return ( - - { showSpinner && } - - { toolbarEditButton } - - - { ( sizes ) => { - const { - imageWidthWithinContainer, - imageHeightWithinContainer, - } = sizes; - - let finalHeight = imageHeightWithinContainer; - if ( height > 0 && height < imageHeightWithinContainer ) { - finalHeight = height; - } - - let finalWidth = imageWidthWithinContainer; - if ( width > 0 && width < imageWidthWithinContainer ) { - finalWidth = width; - } - - return ( - - - {this.state.isUploadFailed && - - { __( 'Failed to insert media.Please tap for options.' ) } - } - - ); - } } - - { ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && ( - - setAttributes( { caption: newCaption } ) } - /> - - ) } - + + + { showSpinner && } + + { toolbarEditButton } + + + { ( sizes ) => { + const { + imageWidthWithinContainer, + imageHeightWithinContainer, + } = sizes; + + let finalHeight = imageHeightWithinContainer; + if ( height > 0 && height < imageHeightWithinContainer ) { + finalHeight = height; + } + + let finalWidth = imageWidthWithinContainer; + if ( width > 0 && width < imageWidthWithinContainer ) { + finalWidth = width; + } + + return ( + + + {this.state.isUploadFailed && + + { __( 'Failed to insert media.Please tap for options.' ) } + } + + ); + } } + + { ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && ( + + setAttributes( { caption: newCaption } ) } + /> + + ) } + + ); } } From 0e9940b90deafeaaf0ce84ea6ecbac89c35c4746 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 30 Jan 2019 17:15:58 +0100 Subject: [PATCH 04/15] Fixed lint errors --- packages/block-library/src/image/edit.native.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 87b1788bab956..b0736a60d52bf 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, TouchableWithoutFeedback } from 'react-native'; +import { View, Image, TextInput, Text, TouchableWithoutFeedback } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -102,7 +102,7 @@ export default class ImageEdit extends React.Component { finishMediaUploadWithFailure( payload ) { const { setAttributes } = this.props; - setAttributes( { url: payload.mediaUrl, id: payload.mediaId } ); + setAttributes( { id: payload.mediaId } ); this.setState( { isUploadInProgress: false, isUploadFailed: true } ); } @@ -130,7 +130,7 @@ export default class ImageEdit extends React.Component { } ); }; - if ( ! url && !this.state.isUploadFailed) { + if ( ! url ) { const onMediaUploadButtonPressed = () => { requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => { if ( mediaUri ) { @@ -204,10 +204,10 @@ export default class ImageEdit extends React.Component { source={ { uri: url } } key={ url } /> - {this.state.isUploadFailed && + { this.state.isUploadFailed && { __( 'Failed to insert media.Please tap for options.' ) } - } + } ); } } From 17aaf689b974a72122fd7402ff7478ec0aa1cc91 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 30 Jan 2019 17:47:00 +0100 Subject: [PATCH 05/15] Fixed style --- packages/block-library/src/image/edit.native.js | 4 ++-- packages/block-library/src/image/styles.native.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b0736a60d52bf..2df954b5b72e3 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -205,8 +205,8 @@ export default class ImageEdit extends React.Component { key={ url } /> { this.state.isUploadFailed && - - { __( 'Failed to insert media.Please tap for options.' ) } + + { __( 'Failed to insert media.\nPlease tap for options.' ) } } ); diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 0045d9bfa0cb9..f2093a259b1f3 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -7,7 +7,7 @@ .uploadFailedText { color: white; font-size: 14; - margin-top: 5; + margin-top: 5; } .uploadFailedContainer { From 58f9685adf6bd3b22ce63e679338604d6bc914bd Mon Sep 17 00:00:00 2001 From: Mario Zorz Date: Wed, 30 Jan 2019 13:47:16 -0300 Subject: [PATCH 06/15] removed debugger statement --- packages/block-library/src/image/edit.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b0736a60d52bf..764c58b27c147 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -59,7 +59,6 @@ export default class ImageEdit extends React.Component { onImagePressed() { const { attributes } = this.props; - debugger; // TODO here check whether image is failed. If it is, then call onImageFailedRetry // if it is not, then call onImageUploadCancel From 8e08897f309640e226a3d648487f5b48bdbd20d9 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 30 Jan 2019 18:17:35 +0100 Subject: [PATCH 07/15] Added onImageUploadCancel method --- packages/block-library/src/image/edit.native.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 9ab0a644f7225..199e929f2cb78 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -10,6 +10,7 @@ import { requestMediaPickFromDeviceCamera, mediaUploadSync, onImageFailedRetry, + onImageUploadCancel } from 'react-native-gutenberg-bridge'; /** @@ -60,10 +61,8 @@ export default class ImageEdit extends React.Component { onImagePressed() { const { attributes } = this.props; - // TODO here check whether image is failed. If it is, then call onImageFailedRetry - // if it is not, then call onImageUploadCancel if ( this.state.isUploadInProgress ) { - // TODO call onImageUploadCancel + onImageUploadCancel( attributes.id ) } else if ( attributes.id && ! isURL( attributes.url ) ) { onImageFailedRetry( attributes.id ); } From b6bc888d686b3a93d9b319a5519643c9ab781ad3 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 30 Jan 2019 18:31:05 +0100 Subject: [PATCH 08/15] Refactored names of imageFailed and imageCancel methods --- packages/block-library/src/image/edit.native.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 199e929f2cb78..8c54f92a67ead 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -9,8 +9,8 @@ import { requestMediaPickFromDeviceLibrary, requestMediaPickFromDeviceCamera, mediaUploadSync, - onImageFailedRetry, - onImageUploadCancel + requestImageFailedRetryDialog, + requestImageUploadCancelDialog } from 'react-native-gutenberg-bridge'; /** @@ -62,9 +62,9 @@ export default class ImageEdit extends React.Component { const { attributes } = this.props; if ( this.state.isUploadInProgress ) { - onImageUploadCancel( attributes.id ) + requestImageUploadCancelDialog( attributes.id ) } else if ( attributes.id && ! isURL( attributes.url ) ) { - onImageFailedRetry( attributes.id ); + requestImageFailedRetryDialog( attributes.id ); } } From d102ca2c51fbe98c8f3440a14022b1ab0b29f452 Mon Sep 17 00:00:00 2001 From: mzorz Date: Thu, 31 Jan 2019 07:38:15 -0300 Subject: [PATCH 09/15] added new state MEDIA_UPLOAD_STATE_RESET to reset associated mediaUrl and fixed typo (#13610) Added new state MEDIA_UPLOAD_STATE_RESET and fixed typo --- .../block-library/src/image/edit.native.js | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 8c54f92a67ead..73fe2cc79691d 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -23,9 +23,10 @@ import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; import styles from './styles.scss'; -const MEDIA_ULOAD_STATE_UPLOADING = 1; -const MEDIA_ULOAD_STATE_SUCCEEDED = 2; -const MEDIA_ULOAD_STATE_FAILED = 3; +const MEDIA_UPLOAD_STATE_UPLOADING = 1; +const MEDIA_UPLOAD_STATE_SUCCEEDED = 2; +const MEDIA_UPLOAD_STATE_FAILED = 3; +const MEDIA_UPLOAD_STATE_RESET = 4; export default class ImageEdit extends React.Component { constructor( props ) { @@ -76,15 +77,18 @@ export default class ImageEdit extends React.Component { } switch ( payload.state ) { - case MEDIA_ULOAD_STATE_UPLOADING: + case MEDIA_UPLOAD_STATE_UPLOADING: this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } ); break; - case MEDIA_ULOAD_STATE_SUCCEEDED: + case MEDIA_UPLOAD_STATE_SUCCEEDED: this.finishMediaUploadWithSuccess( payload ); break; - case MEDIA_ULOAD_STATE_FAILED: + case MEDIA_UPLOAD_STATE_FAILED: this.finishMediaUploadWithFailure( payload ); break; + case MEDIA_UPLOAD_STATE_RESET: + this.mediaUploadStateReset( payload ); + break; } } @@ -104,6 +108,13 @@ export default class ImageEdit extends React.Component { this.setState( { isUploadInProgress: false, isUploadFailed: true } ); } + mediaUploadStateReset( payload ) { + const { setAttributes } = this.props; + + setAttributes( { id: payload.mediaId, url: null } ); + this.setState( { isUploadInProgress: false, isUploadFailed: false } ); + } + addMediaUploadListener() { this.subscriptionParentMediaUpload = subscribeMediaUpload( ( payload ) => { this.mediaUpload( payload ); From 5149b6fcc5b979f0536d7cb97a38ee84ba2526a7 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Thu, 31 Jan 2019 12:29:23 +0000 Subject: [PATCH 10/15] Implement failed state overlay using ImageBackground. I also needed to fix some lint errors. --- .../block-library/src/image/edit.native.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index bb34a95378edf..30f026ea7dfdc 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableWithoutFeedback } from 'react-native'; +import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -10,7 +10,7 @@ import { requestMediaPickFromDeviceCamera, mediaUploadSync, requestImageFailedRetryDialog, - requestImageUploadCancelDialog + requestImageUploadCancelDialog, } from 'react-native-gutenberg-bridge'; /** @@ -63,7 +63,7 @@ export default class ImageEdit extends React.Component { const { attributes } = this.props; if ( this.state.isUploadInProgress ) { - requestImageUploadCancelDialog( attributes.id ) + requestImageUploadCancelDialog( attributes.id ); } else if ( attributes.id && ! isURL( attributes.url ) ) { requestImageFailedRetryDialog( attributes.id ); } @@ -201,7 +201,7 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } - { inlineToolbarButtons } + { inlineToolbarButtons } { ( sizes ) => { @@ -221,17 +221,20 @@ export default class ImageEdit extends React.Component { } return ( - - + - { this.state.isUploadFailed && - - { __( 'Failed to insert media.\nPlease tap for options.' ) } - } + > + { this.state.isUploadFailed && + + + { __( 'Failed to insert media.\nPlease tap for options.' ) } + + } + ); } } From a75ad32053741d8049e7866515341d02e39c840f Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 31 Jan 2019 14:52:27 +0100 Subject: [PATCH 11/15] Fixed styles --- packages/block-library/src/image/styles.native.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index f2093a259b1f3..e556a2a365a30 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -7,11 +7,11 @@ .uploadFailedText { color: white; font-size: 14; - margin-top: 5; + margin-top: 5; } .uploadFailedContainer { - position: absolute; - flex-direction: column; - align-items: center; -} \ No newline at end of file + position: absolute; + flex-direction: column; + align-items: center; +} From b246604baf01d280cd2a8a688f541cf6ab418830 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 31 Jan 2019 15:30:15 +0100 Subject: [PATCH 12/15] Disable Touchable view if image isn't in focus --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 30f026ea7dfdc..e71bb466041ce 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -194,7 +194,7 @@ export default class ImageEdit extends React.Component { const progress = this.state.progress * 100; return ( - + { showSpinner && } From 090fc1c231b30bb724343c75136c4d2eb39b9723 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 31 Jan 2019 16:43:34 +0100 Subject: [PATCH 13/15] Fixed lint error --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e71bb466041ce..fe3fa7c54d2e1 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -194,7 +194,7 @@ export default class ImageEdit extends React.Component { const progress = this.state.progress * 100; return ( - + { showSpinner && } From e5eaa201f173c7e08ce6ca7bc68fa2c4b9cca33d Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 31 Jan 2019 17:08:16 +0100 Subject: [PATCH 14/15] Fixed lint error --- packages/block-library/src/image/styles.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index e556a2a365a30..0db9b4081788c 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -5,7 +5,7 @@ } .uploadFailedText { - color: white; + color: #ffffff; font-size: 14; margin-top: 5; } From 3270b10a718410afbba21d2b29252cf277784051 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 31 Jan 2019 17:29:38 +0100 Subject: [PATCH 15/15] Fix lint erros --- packages/block-library/src/image/styles.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 0db9b4081788c..833b8126bfc1a 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -5,7 +5,7 @@ } .uploadFailedText { - color: #ffffff; + color: #fff; font-size: 14; margin-top: 5; }