From 5950495d551f04dec93f6c3be23a2f01233eb971 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 20 Jun 2018 00:11:10 +0100 Subject: [PATCH] Fix bug where server side upload errors may disapear automatically --- core-blocks/audio/edit.js | 15 ++++++++--- core-blocks/cover-image/index.js | 16 +++++++++--- core-blocks/gallery/edit.js | 3 +-- core-blocks/image/edit.js | 6 ++++- core-blocks/video/edit.js | 15 ++++++++--- editor/components/media-placeholder/index.js | 27 +++++--------------- 6 files changed, 48 insertions(+), 34 deletions(-) diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js index 9379870d39080..4d1a21d32a577 100644 --- a/core-blocks/audio/edit.js +++ b/core-blocks/audio/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { IconButton, Toolbar } from '@wordpress/components'; +import { IconButton, Toolbar, withNotices } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { MediaPlaceholder, @@ -15,7 +15,7 @@ import { */ import './editor.scss'; -export default class AudioEdit extends Component { +class AudioEdit extends Component { constructor() { super( ...arguments ); // edit component has its own src in the state so it can be edited @@ -27,7 +27,7 @@ export default class AudioEdit extends Component { render() { const { caption, src } = this.props.attributes; - const { setAttributes, isSelected, className } = this.props; + const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props; const { editing } = this.state; const switchToEditing = () => { this.setState( { editing: true } ); @@ -38,7 +38,12 @@ export default class AudioEdit extends Component { // selected media, then switches off the editing UI setAttributes( { src: media.url, id: media.id } ); this.setState( { src: media.url, editing: false } ); + return; } + // in this case there was an error and we should continue in the editing state + // previous attributes should be removed because they may be temporary blob urls + setAttributes( { src: undefined, id: undefined } ); + switchToEditing(); }; const onSelectUrl = ( newSrc ) => { // set the block's src from the edit component's state, and switch off the editing UI @@ -62,6 +67,8 @@ export default class AudioEdit extends Component { accept="audio/*" type="audio" value={ this.props.attributes } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } /> ); } @@ -96,3 +103,5 @@ export default class AudioEdit extends Component { /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } } + +export default withNotices( AudioEdit ); diff --git a/core-blocks/cover-image/index.js b/core-blocks/cover-image/index.js index be5c94471eec6..fa5b0d8840bc2 100644 --- a/core-blocks/cover-image/index.js +++ b/core-blocks/cover-image/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components'; +import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar, withNotices } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; @@ -99,10 +99,16 @@ export const settings = { } }, - edit( { attributes, setAttributes, isSelected, className } ) { + edit: withNotices( ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI } ) => { const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes; const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); - const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } ); + const onSelectImage = ( media ) => { + if ( media ) { + setAttributes( { url: media.url, id: media.id } ); + return; + } + setAttributes( { url: undefined, id: undefined } ); + }; const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } ); const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } ); @@ -193,6 +199,8 @@ export const settings = { onSelect={ onSelectImage } accept="image/*" type="image" + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } /> ); @@ -219,7 +227,7 @@ export const settings = { ); - }, + } ), save( { attributes, className } ) { const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes; diff --git a/core-blocks/gallery/edit.js b/core-blocks/gallery/edit.js index 8790c5b669d78..215692d2e4fd1 100644 --- a/core-blocks/gallery/edit.js +++ b/core-blocks/gallery/edit.js @@ -211,9 +211,8 @@ class GalleryEdit extends Component { onSelect={ this.onSelectImages } accept="image/*" type="image" - disableMaxUploadErrorMessages multiple - additionalNotices={ noticeUI } + notices={ noticeUI } onError={ noticeOperations.createErrorNotice } /> diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js index a7f29db06264b..f694f28ae02f6 100644 --- a/core-blocks/image/edit.js +++ b/core-blocks/image/edit.js @@ -26,6 +26,7 @@ import { TextControl, TextareaControl, Toolbar, + withNotices, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { @@ -177,7 +178,7 @@ class ImageEdit extends Component { } render() { - const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, toggleSelection } = this.props; + const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection } = this.props; const { url, alt, caption, align, id, href, width, height } = attributes; const controls = ( @@ -220,6 +221,8 @@ class ImageEdit extends Component { } } className={ className } onSelect={ this.onSelectImage } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } accept="image/*" type="image" /> @@ -415,4 +418,5 @@ export default compose( [ }; } ), withViewportMatch( { isLargeViewport: 'medium' } ), + withNotices, ] )( ImageEdit ); diff --git a/core-blocks/video/edit.js b/core-blocks/video/edit.js index d7a2410272086..885d1ab8c46e8 100644 --- a/core-blocks/video/edit.js +++ b/core-blocks/video/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { IconButton, Toolbar } from '@wordpress/components'; +import { IconButton, Toolbar, withNotices } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { MediaPlaceholder, @@ -15,7 +15,7 @@ import { */ import './editor.scss'; -export default class VideoEdit extends Component { +class VideoEdit extends Component { constructor() { super( ...arguments ); // edit component has its own src in the state so it can be edited @@ -27,7 +27,7 @@ export default class VideoEdit extends Component { render() { const { caption, src } = this.props.attributes; - const { setAttributes, isSelected, className } = this.props; + const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props; const { editing } = this.state; const switchToEditing = () => { this.setState( { editing: true } ); @@ -38,7 +38,12 @@ export default class VideoEdit extends Component { // selected media, then switches off the editing UI setAttributes( { src: media.url, id: media.id } ); this.setState( { src: media.url, editing: false } ); + return; } + // in this case there was an error and we should continue in the editing state + // previous attributes should be removed because they may be temporary blob urls + setAttributes( { src: undefined, id: undefined } ); + switchToEditing(); }; const onSelectUrl = ( newSrc ) => { // set the block's src from the edit component's state, and switch off the editing UI @@ -62,6 +67,8 @@ export default class VideoEdit extends Component { accept="video/*" type="video" value={ this.props.attributes } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } /> ); } @@ -96,3 +103,5 @@ export default class VideoEdit extends Component { /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } } + +export default withNotices( VideoEdit ); diff --git a/editor/components/media-placeholder/index.js b/editor/components/media-placeholder/index.js index 42ac87f42e752..de4b76c93907b 100644 --- a/editor/components/media-placeholder/index.js +++ b/editor/components/media-placeholder/index.js @@ -12,10 +12,9 @@ import { FormFileUpload, Placeholder, DropZone, - withNotices, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; +import { Component } from '@wordpress/element'; /** * Internal dependencies @@ -64,26 +63,13 @@ class MediaPlaceholder extends Component { } onFilesUpload( files ) { - /** - * We use a prop named `disable`, set to `false` by default, because it makes for a nicer - * component prop API. eg: - * - * - * instead of: - * - */ - const { onSelect, type, multiple, onError = noop, disableMaxUploadErrorMessages = false, noticeOperations } = this.props; + const { onSelect, type, multiple, onError } = this.props; const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media ); editorMediaUpload( { allowedType: type, filesList: files, onFileChange: setMedia, - onError: ( errorMessage ) => { - onError( errorMessage ); - if ( disableMaxUploadErrorMessages === false ) { - noticeOperations.createErrorNotice( errorMessage ); - } - }, + onError, } ); } @@ -99,8 +85,7 @@ class MediaPlaceholder extends Component { onSelectUrl, onHTMLDrop = noop, multiple = false, - additionalNotices, - noticeUI, + notices, } = this.props; return ( @@ -109,7 +94,7 @@ class MediaPlaceholder extends Component { label={ labels.title } instructions={ sprintf( __( 'Drag %s, upload a new one or select a file from your library.' ), labels.name ) } className={ classnames( 'editor-media-placeholder', className ) } - notices={ { additionalNotices }{ noticeUI } } + notices={ notices } >