API v2

WordPress · Oct 14, 2020 · a3f2dbc · a3f2dbc
1 parent 758a5bc
commit a3f2dbc
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 96 deletions.
diff --git 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
@@ -7,14 +7,19 @@ 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,
 	BlockIcon,
 	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 (
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				labels={ {
-					title: __( 'File' ),
-					instructions: __(
-						'Upload a file or pick one from your media library.'
-					),
-				} }
-				onSelect={ onSelectFile }
-				notices={ noticeUI }
-				onError={ onUploadError }
-				accept="*"
-			/>
+			<div { ...blockProps }>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					labels={ {
+						title: __( 'File' ),
+						instructions: __(
+							'Upload a file or pick one from your media library.'
+						),
+					} }
+					onSelect={ onSelectFile }
+					notices={ noticeUI }
+					onError={ onUploadError }
+					accept="*"
+				/>
+			</div>
 		);
 	}
 
-	const classes = classnames( className, {
-		'is-transient': isBlobURL( href ),
-	} );
-
 	return (
 		<>
 			<FileBlockInspector
@@ -168,60 +179,56 @@ function FileEdit( {
 					onError={ onUploadError }
 				/>
 			</BlockControls>
-			<Animate type={ isBlobURL( href ) ? 'loading' : null }>
-				{ ( { className: animateClassName } ) => (
-					<div className={ classnames( classes, animateClassName ) }>
-						<div className={ 'wp-block-file__content-wrapper' }>
-							<div className="wp-block-file__textlink">
-								<RichText
-									tagName="div" // must be block-level or else cursor disappears
-									value={ fileName }
-									placeholder={ __( 'Write file name…' ) }
-									withoutInteractiveFormatting
-									onChange={ ( text ) =>
-										setAttributes( { fileName: text } )
-									}
-								/>
-							</div>
-							{ showDownloadButton && (
-								<div
-									className={
-										'wp-block-file__button-richtext-wrapper'
-									}
-								>
-									{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
-									<RichText
-										tagName="div" // must be block-level or else cursor disappears
-										className={ 'wp-block-file__button' }
-										value={ downloadButtonText }
-										withoutInteractiveFormatting
-										placeholder={ __( 'Add text…' ) }
-										onChange={ ( text ) =>
-											setAttributes( {
-												downloadButtonText: text,
-											} )
-										}
-									/>
-								</div>
-							) }
-						</div>
-						{ isSelected && (
-							<ClipboardButton
-								isSecondary
-								text={ href }
-								className={ 'wp-block-file__copy-url-button' }
-								onCopy={ confirmCopyURL }
-								onFinishCopy={ resetCopyConfirmation }
-								disabled={ isBlobURL( href ) }
-							>
-								{ showCopyConfirmation
-									? __( 'Copied!' )
-									: __( 'Copy URL' ) }
-							</ClipboardButton>
-						) }
+			<div { ...blockProps }>
+				<div className={ 'wp-block-file__content-wrapper' }>
+					<div className="wp-block-file__textlink">
+						<RichText
+							tagName="div" // must be block-level or else cursor disappears
+							value={ fileName }
+							placeholder={ __( 'Write file name…' ) }
+							withoutInteractiveFormatting
+							onChange={ ( text ) =>
+								setAttributes( { fileName: text } )
+							}
+						/>
 					</div>
+					{ showDownloadButton && (
+						<div
+							className={
+								'wp-block-file__button-richtext-wrapper'
+							}
+						>
+							{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
+							<RichText
+								tagName="div" // must be block-level or else cursor disappears
+								className={ 'wp-block-file__button' }
+								value={ downloadButtonText }
+								withoutInteractiveFormatting
+								placeholder={ __( 'Add text…' ) }
+								onChange={ ( text ) =>
+									setAttributes( {
+										downloadButtonText: text,
+									} )
+								}
+							/>
+						</div>
+					) }
+				</div>
+				{ isSelected && (
+					<ClipboardButton
+						isSecondary
+						text={ href }
+						className={ 'wp-block-file__copy-url-button' }
+						onCopy={ confirmCopyURL }
+						onFinishCopy={ resetCopyConfirmation }
+						disabled={ isBlobURL( href ) }
+					>
+						{ showCopyConfirmation
+							? __( 'Copied!' )
+							: __( 'Copy URL' ) }
+					</ClipboardButton>
 				) }
-			</Animate>
+			</div>
 		</>
 	);
 }

diff --git 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 && (
-			<div>
+			<div { ...useBlockProps.save() }>
 				{ ! RichText.isEmpty( fileName ) && (
 					<a
 						href={ textLinkHref }

diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js
@@ -3,37 +3,33 @@
  */
 import classnames from 'classnames';
 
-function Animate( { type, options = {}, children } ) {
+function getDefaultOrigin( type ) {
+	return type === 'appear' ? 'top' : 'left';
+}
+
+export function useAnimate( { type, origin = getDefaultOrigin( type ) } ) {
 	if ( type === 'appear' ) {
-		const { origin = 'top' } = options;
 		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-
-		return children( {
-			className: classnames( 'components-animate__appear', {
-				[ 'is-from-' + xAxis ]: xAxis !== 'center',
-				[ 'is-from-' + yAxis ]: yAxis !== 'middle',
-			} ),
+		return classnames( 'components-animate__appear', {
+			[ 'is-from-' + xAxis ]: xAxis !== 'center',
+			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
 		} );
 	}
 
 	if ( type === 'slide-in' ) {
-		const { origin = 'left' } = options;
-
-		return children( {
-			className: classnames(
-				'components-animate__slide-in',
-				'is-from-' + origin
-			),
-		} );
+		return classnames(
+			'components-animate__slide-in',
+			'is-from-' + origin
+		);
 	}
 
 	if ( type === 'loading' ) {
-		return children( {
-			className: classnames( 'components-animate__loading' ),
-		} );
+		return classnames( 'components-animate__loading' );
 	}
-
-	return children( {} );
 }
 
-export default Animate;
+export default function Animate( { type, options = {}, children } ) {
+	return children( {
+		className: useAnimate( { type, ...options } ),
+	} );
+}
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -12,7 +12,10 @@ export {
 
 // Components
 export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
-export { default as Animate } from './animate';
+export {
+	default as Animate,
+	useAnimate as __unstableUseAnimate,
+} from './animate';
 export { default as AnglePickerControl } from './angle-picker-control';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';