@wordpress/block-library 8.28.5 → 8.30.0

package/build-style/editor-rtl.css

@@ -1248,7 +1248,6 @@ figure.wp-block-gallery .components-spinner {
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -1275,6 +1274,7 @@ figure.wp-block-gallery .components-spinner {
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
@@ -1311,6 +1311,9 @@ figure.wp-block-gallery .components-spinner {
   outline: 2px solid transparent !important;
 }
 
+.wp-block-image.wp-block-image:not(.is-selected) .components-placeholder__fieldset {
+  display: none;
+}
 .wp-block-image.wp-block-image.is-selected .components-placeholder {
   color: #1e1e1e;
   background-color: #fff;

package/build-style/editor.css

@@ -1256,7 +1256,6 @@ figure.wp-block-gallery .components-spinner {
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -1283,6 +1282,7 @@ figure.wp-block-gallery .components-spinner {
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
@@ -1319,6 +1319,9 @@ figure.wp-block-gallery .components-spinner {
   outline: 2px solid transparent !important;
 }
 
+.wp-block-image.wp-block-image:not(.is-selected) .components-placeholder__fieldset {
+  display: none;
+}
 .wp-block-image.wp-block-image.is-selected .components-placeholder {
   color: #1e1e1e;
   background-color: #fff;

package/build-style/group/editor-rtl.css

@@ -150,7 +150,6 @@
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -177,6 +176,7 @@
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {

package/build-style/group/editor.css

@@ -150,7 +150,6 @@
   margin: 0;
 }
 .wp-block-group__placeholder .components-placeholder__instructions {
-  text-align: center;
   margin-bottom: 18px;
 }
 .wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
@@ -177,6 +176,7 @@
 .wp-block-group__placeholder .components-placeholder {
   min-height: auto;
   padding: 24px;
+  align-items: center;
 }
 .wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
 .wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {

package/build-style/image/editor-rtl.css

@@ -86,6 +86,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-image.wp-block-image:not(.is-selected) .components-placeholder__fieldset {
+  display: none;
+}
 .wp-block-image.wp-block-image.is-selected .components-placeholder {
   color: #1e1e1e;
   background-color: #fff;

package/build-style/image/editor.css

@@ -86,6 +86,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-image.wp-block-image:not(.is-selected) .components-placeholder__fieldset {
+  display: none;
+}
 .wp-block-image.wp-block-image.is-selected .components-placeholder {
   color: #1e1e1e;
   background-color: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.28.5",
+	"version": "8.30.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/autop": "^3.51.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/block-editor": "^12.19.5",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/components": "^26.0.4",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-data": "^6.28.5",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/interactivity": "^5.0.3",
-		"@wordpress/interactivity-router": "^1.1.3",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.5",
-		"@wordpress/primitives": "^3.49.1",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.5",
-		"@wordpress/rich-text": "^6.28.3",
-		"@wordpress/server-side-render": "^4.28.5",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/viewport": "^5.28.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/autop": "^3.53.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/block-editor": "^12.21.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/core-data": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/interactivity": "^5.2.0",
+		"@wordpress/interactivity-router": "^1.3.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/patterns": "^1.14.0",
+		"@wordpress/primitives": "^3.51.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/reusable-blocks": "^4.30.0",
+		"@wordpress/rich-text": "^6.30.0",
+		"@wordpress/server-side-render": "^4.30.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/viewport": "^5.30.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -80,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/audio/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
 	PanelBody,
@@ -21,11 +21,9 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -33,6 +31,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
@@ -47,22 +46,13 @@ function AudioEdit( {
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
 	const isTemporaryAudio = ! id && isBlobURL( src );
-	const { getSettings } = useSelect( blockEditorStore );
 
-	useEffect( () => {
-		if ( ! id && isBlobURL( src ) ) {
-			const file = getBlobByURL( src );
-
-			if ( file ) {
-				getSettings().mediaUpload( {
-					filesList: [ file ],
-					onFileChange: ( [ media ] ) => onSelectAudio( media ),
-					onError: ( e ) => onUploadError( e ),
-					allowedTypes: ALLOWED_MEDIA_TYPES,
-				} );
-			}
-		}
-	}, [] );
+	useUploadMediaFromBlobURL( {
+		url: src,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectAudio,
+		onError: onUploadError,
+	} );
 
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {

package/src/audio/edit.native.js

@@ -212,13 +212,13 @@ function AudioEdit( {
 									label: _x( 'None', '"Preload" value' ),
 								},
 							] }
-							hideCancelButton={ true }
+							hideCancelButton
 						/>
 					</PanelBody>
 				</InspectorControls>
 				<MediaUpload
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ onSelectAudio }
 					onSelectURL={ onSelectURL }
 					render={ ( { open, getMediaOptions } ) => {
@@ -226,7 +226,7 @@ function AudioEdit( {
 					} }
 				/>
 				<BlockCaption
-					accessible={ true }
+					accessible
 					accessibilityLabelCreator={ ( caption ) =>
 						RichText.isEmpty( caption )
 							? /* translators: accessibility text. Empty Audio caption. */

package/src/avatar/edit.js

@@ -187,7 +187,7 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	return (
 		<>
 			<AvatarInspectorControls
-				selectUser={ true }
+				selectUser
 				attributes={ attributes }
 				avatar={ avatar }
 				setAttributes={ setAttributes }

package/src/avatar/index.php

@@ -31,7 +31,18 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		: '';
 
 	if ( ! isset( $block->context['commentId'] ) ) {
-		$author_id   = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] );
+		if ( isset( $attributes['userId'] ) ) {
+			$author_id = $attributes['userId'];
+		} elseif ( isset( $block->context['postId'] ) ) {
+			$author_id = get_post_field( 'post_author', $block->context['postId'] );
+		} else {
+			$author_id = get_query_var( 'author' );
+		}
+
+		if ( empty( $author_id ) ) {
+			return '';
+		}
+
 		$author_name = get_the_author_meta( 'display_name', $author_id );
 		// translators: %s is the Author name.
 		$alt          = sprintf( __( '%s Avatar' ), $author_name );

package/src/block/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/block` block on server.
  *
+ * @global WP_Embed $wp_embed
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Rendered HTML of the referenced block.

package/src/button/edit.js

@@ -124,7 +124,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Width settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ButtonGroup aria-label={ __( 'Button width' ) }>
 				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 					return (
@@ -329,7 +329,7 @@ function ButtonEdit( props ) {
 						title={ __( 'Unlink' ) }
 						shortcut={ displayShortcut.primaryShift( 'k' ) }
 						onClick={ unlink }
-						isActive={ true }
+						isActive
 					/>
 				) }
 			</BlockControls>

package/src/buttons/edit.js

@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
@@ -36,16 +32,12 @@ function ButtonsEdit( { attributes, className } ) {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const { preferredStyle, hasButtonVariations } = useSelect( ( select ) => {
-		const preferredStyleVariations =
-			select( blockEditorStore ).getSettings()
-				.__experimentalPreferredStyleVariations;
+	const { hasButtonVariations } = useSelect( ( select ) => {
 		const buttonVariations = select( blocksStore ).getBlockVariations(
 			'core/button',
 			'inserter'
 		);
 		return {
-			preferredStyle: preferredStyleVariations?.value?.[ 'core/button' ],
 			hasButtonVariations: buttonVariations.length > 0,
 		};
 	}, [] );
@@ -54,12 +46,7 @@ function ButtonsEdit( { attributes, className } ) {
 		defaultBlock: DEFAULT_BLOCK,
 		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
 		directInsert: ! hasButtonVariations,
-		template: [
-			[
-				'core/button',
-				{ className: preferredStyle && `is-style-${ preferredStyle }` },
-			],
-		],
+		template: [ [ 'core/button' ] ],
 		templateInsertUpdatesSelection: true,
 		orientation: layout?.orientation ?? 'horizontal',
 	} );

package/src/buttons/edit.native.js

@@ -69,13 +69,6 @@ export default function ButtonsEdit( {
 		[ clientId ]
 	);
 
-	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations =
-			select( blockEditorStore ).getSettings()
-				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ 'core/button' ];
-	}, [] );
-
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { insertBlock, removeBlock, selectBlock } =
 		useDispatch( blockEditorStore );
@@ -113,7 +106,7 @@ export default function ButtonsEdit( {
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
-				isFloating={ true }
+				isFloating
 				onAddBlock={ onAddNextButton }
 			/>
 		</View>
@@ -144,16 +137,7 @@ export default function ButtonsEdit( {
 			) }
 			{ resizeObserver }
 			<InnerBlocks
-				template={ [
-					[
-						'core/button',
-						{
-							className:
-								preferredStyle &&
-								`is-style-${ preferredStyle }`,
-						},
-					],
-				] }
+				template={ [ [ 'core/button' ] ] }
 				renderFooterAppender={
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}

package/src/calendar/index.php

@@ -8,6 +8,9 @@
 /**
  * Renders the `core/calendar` block on server.
  *
+ * @global int $monthnum.
+ * @global int $year.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content.
@@ -117,6 +120,8 @@ function block_core_calendar_has_published_posts() {
  * Queries the database for any published post and saves
  * a flag whether any published post exists or not.
  *
+ * @global wpdb $wpdb WordPress database abstraction object.
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_update_has_published_posts() {

package/src/columns/edit.js

@@ -40,6 +40,10 @@ import {
 	toWidthPrecision,
 } from './utils';
 
+const DEFAULT_BLOCK = {
+	name: 'core/column',
+};
+
 function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
 	const { count, canInsertColumnBlock, minCount } = useSelect(
@@ -90,6 +94,8 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 		className: classes,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
 		templateLock,
@@ -133,18 +139,19 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			// If adding a new column, assign width to the new column equal to
 			// as if it were `1 / columns` of the total available space.
 			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			const newlyAddedColumns = newColumns - previousColumns;
 
 			// Redistribute in consideration of pending block insertion as
 			// constraining the available working width.
 			const widths = getRedistributedColumnWidths(
 				innerBlocks,
-				100 - newColumnWidth
+				100 - newColumnWidth * newlyAddedColumns
 			);
 
 			innerBlocks = [
 				...getMappedColumnWidths( innerBlocks, widths ),
 				...Array.from( {
-					length: newColumns - previousColumns,
+					length: newlyAddedColumns,
 				} ).map( () => {
 					return createBlock( 'core/column', {
 						width: `${ newColumnWidth }%`,

package/src/comment-author-avatar/edit.js

@@ -48,7 +48,7 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Avatar Settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize

package/src/comments/index.php

@@ -16,6 +16,8 @@
  * the block is in legacy mode. If not, the HTML generated in the editor is
  * returned instead.
  *
+ * @global WP_Post  $post     Global post object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/cover/edit/index.js

@@ -464,7 +464,7 @@ function CoverEdit( {
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
-								disableCustomColors={ true }
+								disableCustomColors
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }
 								clearable={ false }
@@ -525,7 +525,7 @@ function CoverEdit( {
 				{ ! url && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-cover__image--placeholder-image"
-						withIllustration={ true }
+						withIllustration
 					/>
 				) }
 

package/src/cover/edit/inspector-controls.js

@@ -304,7 +304,7 @@ export default function CoverInspectorControls( {
 						minHeight: undefined,
 						minHeightUnit: undefined,
 					} ) }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ clientId }
 				>
 					<CoverHeightInput

package/src/cover/edit/resizable-cover-popover.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -40,10 +40,6 @@ export default function ResizableCoverPopover( {
 	...props
 } ) {
 	const [ isResizing, setIsResizing ] = useState( false );
-	const dimensions = useMemo(
-		() => ( { height, minHeight, width } ),
-		[ minHeight, height, width ]
-	);
 
 	const resizableBoxProps = {
 		className: classnames( className, { 'is-resizing': isResizing } ),
@@ -75,7 +71,6 @@ export default function ResizableCoverPopover( {
 	return (
 		<ResizableBoxPopover
 			className="block-library-cover__resizable-box-popover"
-			__unstableRefreshSize={ dimensions }
 			resizableBoxProps={ resizableBoxProps }
 			{ ...props }
 		/>

package/src/cover/edit.native.js

@@ -538,7 +538,7 @@ const Cover = ( {
 						<BottomSheetConsumer>
 							{ ( { shouldEnableBottomSheetScroll } ) => (
 								<ColorPalette
-									enableCustomColor={ true }
+									enableCustomColor
 									customColorIndicatorStyles={
 										styles.paletteColorIndicator
 									}

package/src/details/block.json

@@ -19,6 +19,7 @@
 		}
 	},
 	"supports": {
+		"__experimentalOnEnter": true,
 		"align": [ "wide", "full" ],
 		"color": {
 			"gradients": true,

package/src/file/deprecated.js

@@ -131,7 +131,7 @@ const v3 = {
 								'wp-block-file__button',
 								__experimentalGetElementClassName( 'button' )
 							) }
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -259,7 +259,7 @@ const v2 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -372,7 +372,7 @@ const v1 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 						>
 							<RichText.Content value={ downloadButtonText } />
 						</a>

package/src/file/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	ResizableBox,
@@ -36,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
 import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -72,7 +73,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const { getSettings } = useSelect( blockEditorStore );
 	const { media } = useSelect(
 		( select ) => ( {
 			media:
@@ -86,20 +86,13 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
-	useEffect( () => {
-		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
-
-			getSettings().mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
-			} );
-
-			revokeBlobURL( href );
-		}
+	useUploadMediaFromBlobURL( {
+		url: href,
+		onChange: onSelectFile,
+		onError: onUploadError,
+	} );
 
+	useEffect( () => {
 		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),