From 758a5bce39cd47c28345fd9cf2e78a3e5520b919 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 13 Oct 2020 15:45:01 +0300 Subject: [PATCH 1/2] File block: use hooks --- packages/block-library/src/file/edit.js | 344 ++++++++++-------------- 1 file changed, 148 insertions(+), 196 deletions(-) diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 0eded60708117..76ba8ce3697aa 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -8,8 +8,7 @@ import classnames from 'classnames'; */ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { Animate, ClipboardButton, withNotices } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { BlockControls, BlockIcon, @@ -17,7 +16,7 @@ import { MediaReplaceFlow, RichText, } from '@wordpress/block-editor'; -import { Component } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; import { file as icon } from '@wordpress/icons'; @@ -26,46 +25,45 @@ import { file as icon } from '@wordpress/icons'; */ import FileBlockInspector from './inspector'; -class FileEdit extends Component { - constructor() { - super( ...arguments ); - - this.onSelectFile = this.onSelectFile.bind( this ); - this.confirmCopyURL = this.confirmCopyURL.bind( this ); - this.resetCopyConfirmation = this.resetCopyConfirmation.bind( this ); - this.changeLinkDestinationOption = this.changeLinkDestinationOption.bind( - this - ); - this.changeOpenInNewWindow = this.changeOpenInNewWindow.bind( this ); - this.changeShowDownloadButton = this.changeShowDownloadButton.bind( - this - ); - this.onUploadError = this.onUploadError.bind( this ); - - this.state = { - hasError: false, - showCopyConfirmation: false, - }; - } - - componentDidMount() { - const { - attributes, - mediaUpload, - noticeOperations, - setAttributes, - } = this.props; - const { downloadButtonText, href } = attributes; - +function FileEdit( { + className, + isSelected, + attributes, + setAttributes, + noticeUI, + noticeOperations, +} ) { + const { + id, + fileName, + href, + textLinkHref, + textLinkTarget, + showDownloadButton, + downloadButtonText, + } = attributes; + const [ hasError, setHasError ] = useState( false ); + const [ showCopyConfirmation, setShowCopyConfirmation ] = useState( false ); + const { media, mediaUpload } = useSelect( + ( select ) => ( { + media: + id === undefined ? undefined : select( 'core' ).getMedia( id ), + mediaUpload: select( 'core/block-editor' ).getSettings() + .mediaUpload, + } ), + [ id ] + ); + + useEffect( () => { // Upload a file drag-and-dropped into the editor if ( isBlobURL( href ) ) { const file = getBlobByURL( href ); mediaUpload( { filesList: [ file ], - onFileChange: ( [ media ] ) => this.onSelectFile( media ), + onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ), onError: ( message ) => { - this.setState( { hasError: true } ); + setHasError( true ); noticeOperations.createErrorNotice( message ); }, } ); @@ -78,200 +76,154 @@ class FileEdit extends Component { downloadButtonText: _x( 'Download', 'button label' ), } ); } - } + }, [] ); - componentDidUpdate( prevProps ) { - // Reset copy confirmation state when block is deselected - if ( prevProps.isSelected && ! this.props.isSelected ) { - this.setState( { showCopyConfirmation: false } ); - } - } + useEffect( () => { + setShowCopyConfirmation( false ); + }, [ isSelected ] ); - onSelectFile( media ) { - if ( media && media.url ) { - this.setState( { hasError: false } ); - this.props.setAttributes( { - href: media.url, - fileName: media.title, - textLinkHref: media.url, - id: media.id, + function onSelectFile( newMedia ) { + if ( newMedia && newMedia.url ) { + setHasError( false ); + setAttributes( { + href: newMedia.url, + fileName: newMedia.title, + textLinkHref: newMedia.url, + id: newMedia.id, } ); } } - onUploadError( message ) { - const { noticeOperations } = this.props; - this.setState( { hasError: true } ); + function onUploadError( message ) { + setHasError( true ); noticeOperations.removeAllNotices(); noticeOperations.createErrorNotice( message ); } - confirmCopyURL() { - this.setState( { showCopyConfirmation: true } ); + function confirmCopyURL() { + setShowCopyConfirmation( true ); } - resetCopyConfirmation() { - this.setState( { showCopyConfirmation: false } ); + function resetCopyConfirmation() { + setShowCopyConfirmation( false ); } - changeLinkDestinationOption( newHref ) { + function changeLinkDestinationOption( newHref ) { // Choose Media File or Attachment Page (when file is in Media Library) - this.props.setAttributes( { textLinkHref: newHref } ); + setAttributes( { textLinkHref: newHref } ); } - changeOpenInNewWindow( newValue ) { - this.props.setAttributes( { + function changeOpenInNewWindow( newValue ) { + setAttributes( { textLinkTarget: newValue ? '_blank' : false, } ); } - changeShowDownloadButton( newValue ) { - this.props.setAttributes( { showDownloadButton: newValue } ); + function changeShowDownloadButton( newValue ) { + setAttributes( { showDownloadButton: newValue } ); } - render() { - const { - className, - isSelected, - attributes, - setAttributes, - noticeUI, - media, - } = this.props; - const { - id, - fileName, - href, - textLinkHref, - textLinkTarget, - showDownloadButton, - downloadButtonText, - } = attributes; - const { hasError, showCopyConfirmation } = this.state; - const attachmentPage = media && media.link; - - if ( ! href || hasError ) { - return ( - } - labels={ { - title: __( 'File' ), - instructions: __( - 'Upload a file or pick one from your media library.' - ), - } } - onSelect={ this.onSelectFile } - notices={ noticeUI } - onError={ this.onUploadError } - accept="*" - /> - ); - } - - const classes = classnames( className, { - 'is-transient': isBlobURL( href ), - } ); + const attachmentPage = media && media.link; + if ( ! href || hasError ) { return ( - <> - } + labels={ { + title: __( 'File' ), + instructions: __( + 'Upload a file or pick one from your media library.' + ), + } } + onSelect={ onSelectFile } + notices={ noticeUI } + onError={ onUploadError } + accept="*" + /> + ); + } + + const classes = classnames( className, { + 'is-transient': isBlobURL( href ), + } ); + + return ( + <> + + + - - - - - { ( { className: animateClassName } ) => ( -
-
-
+ + + { ( { className: animateClassName } ) => ( +
+
+
+ + setAttributes( { fileName: text } ) + } + /> +
+ { showDownloadButton && ( +
+ { /* Using RichText here instead of PlainText so that it can be styled like a button */ } - setAttributes( { fileName: text } ) + setAttributes( { + downloadButtonText: text, + } ) } />
- { showDownloadButton && ( -
- { /* Using RichText here instead of PlainText so that it can be styled like a button */ } - - setAttributes( { - downloadButtonText: text, - } ) - } - /> -
- ) } -
- { isSelected && ( - - { showCopyConfirmation - ? __( 'Copied!' ) - : __( 'Copy URL' ) } - ) }
- ) } -
- - ); - } + { isSelected && ( + + { showCopyConfirmation + ? __( 'Copied!' ) + : __( 'Copy URL' ) } + + ) } +
+ ) } + + + ); } -export default compose( [ - withSelect( ( select, props ) => { - const { getMedia } = select( 'core' ); - const { getSettings } = select( 'core/block-editor' ); - const { mediaUpload } = getSettings(); - const { id } = props.attributes; - return { - media: id === undefined ? undefined : getMedia( id ), - mediaUpload, - }; - } ), - withNotices, -] )( FileEdit ); +export default withNotices( FileEdit ); From a3f2dbc7c30050b0252d0946b3dcdd8337a50939 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 13 Oct 2020 16:28:15 +0300 Subject: [PATCH 2/2] API v2 --- packages/block-library/src/file/block.json | 1 + packages/block-library/src/file/edit.js | 149 +++++++++++---------- packages/block-library/src/file/save.js | 4 +- packages/components/src/animate/index.js | 40 +++--- packages/components/src/index.js | 5 +- 5 files changed, 103 insertions(+), 96 deletions(-) diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index c19ba5f714300..230942f76a6c3 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -1,4 +1,5 @@ { + "apiVersion": 2, "name": "core/file", "category": "media", "attributes": { diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 76ba8ce3697aa..0b645fb9bcb24 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -7,7 +7,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { Animate, ClipboardButton, withNotices } from '@wordpress/components'; +import { + __unstableUseAnimate as useAnimate, + ClipboardButton, + withNotices, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { BlockControls, @@ -15,6 +19,7 @@ import { MediaPlaceholder, MediaReplaceFlow, RichText, + useBlockProps, } from '@wordpress/block-editor'; import { useEffect, useState } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; @@ -26,7 +31,6 @@ import { file as icon } from '@wordpress/icons'; import FileBlockInspector from './inspector'; function FileEdit( { - className, isSelected, attributes, setAttributes, @@ -125,28 +129,35 @@ function FileEdit( { const attachmentPage = media && media.link; + const blockProps = useBlockProps( { + className: classnames( + useAnimate( { type: isBlobURL( href ) ? 'loading' : null } ), + { + 'is-transient': isBlobURL( href ), + } + ), + } ); + if ( ! href || hasError ) { return ( - } - labels={ { - title: __( 'File' ), - instructions: __( - 'Upload a file or pick one from your media library.' - ), - } } - onSelect={ onSelectFile } - notices={ noticeUI } - onError={ onUploadError } - accept="*" - /> +
+ } + labels={ { + title: __( 'File' ), + instructions: __( + 'Upload a file or pick one from your media library.' + ), + } } + onSelect={ onSelectFile } + notices={ noticeUI } + onError={ onUploadError } + accept="*" + /> +
); } - const classes = classnames( className, { - 'is-transient': isBlobURL( href ), - } ); - return ( <> - - { ( { className: animateClassName } ) => ( -
-
-
- - setAttributes( { fileName: text } ) - } - /> -
- { showDownloadButton && ( -
- { /* Using RichText here instead of PlainText so that it can be styled like a button */ } - - setAttributes( { - downloadButtonText: text, - } ) - } - /> -
- ) } -
- { isSelected && ( - - { showCopyConfirmation - ? __( 'Copied!' ) - : __( 'Copy URL' ) } - - ) } +
+
+
+ + setAttributes( { fileName: text } ) + } + />
+ { showDownloadButton && ( +
+ { /* Using RichText here instead of PlainText so that it can be styled like a button */ } + + setAttributes( { + downloadButtonText: text, + } ) + } + /> +
+ ) } +
+ { isSelected && ( + + { showCopyConfirmation + ? __( 'Copied!' ) + : __( 'Copy URL' ) } + ) } - +
); } diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js index 25102dfd0f92d..b578300197a03 100644 --- a/packages/block-library/src/file/save.js +++ b/packages/block-library/src/file/save.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { RichText, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { @@ -15,7 +15,7 @@ export default function save( { attributes } ) { return ( href && ( -
+
{ ! RichText.isEmpty( fileName ) && (