diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index 60e5b0cb1d88a..21478b517c597 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useRef } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; import { @@ -55,7 +55,6 @@ const MediaReplaceFlow = ( { addToGallery, handleUpload = true, } ) => { - const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL ); const mediaUpload = useSelect( ( select ) => { return select( blockEditorStore ).getSettings().mediaUpload; }, [] ); @@ -88,7 +87,6 @@ const MediaReplaceFlow = ( { onToggleFeaturedImage(); } closeMenu(); - setMediaURLValue( media?.url ); // Calling `onSelect` after the state update since it might unmount the component. onSelect( media ); speak( __( 'The media file has been replaced' ) ); @@ -213,14 +211,13 @@ const MediaReplaceFlow = ( { { __( 'Current media URL:' ) } - +
{ - setMediaURLValue( url ); onSelectURL( url ); editMediaButtonRef.current.focus(); } } diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js index 18219daf0acf9..5e686386de60c 100644 --- a/packages/block-editor/src/components/media-replace-flow/test/index.js +++ b/packages/block-editor/src/components/media-replace-flow/test/index.js @@ -3,6 +3,11 @@ */ import { render, fireEvent } from '@testing-library/react'; +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + /** * Internal dependencies */ @@ -10,19 +15,24 @@ import MediaReplaceFlow from '../'; const noop = () => {}; -function setUpMediaReplaceFlow() { - const { container } = render( +function TestWrapper() { + const [ mediaURL, setMediaURL ] = useState( 'https://example.media' ); + return ( ); +} + +function setUpMediaReplaceFlow() { + const { container } = render( ); return container; }