@wordpress/editor 14.35.1-next.16d95556a.0 → 14.35.2-next.dc3f6d3c1.0

package/src/components/post-featured-image/index.js

@@ -25,19 +25,15 @@ import {
 	MediaUpload,
 	MediaUploadCheck,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import PostFeaturedImageCheck from './check';
 import { store as editorStore } from '../../store';
 
-const { MediaUploadModal } = unlock( blockEditorPrivateApis );
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
@@ -52,45 +48,6 @@ const instructions = (
 	</p>
 );
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 function getMediaDetails( media, postId ) {
 	if ( ! media ) {
 		return {};
@@ -224,7 +181,7 @@ function PostFeaturedImage( {
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
-					<ConditionalMediaUpload
+					<MediaUpload
 						title={
 							postType?.labels?.featured_image ||
 							DEFAULT_FEATURE_IMAGE_LABEL

package/src/components/provider/use-block-editor-settings.js

@@ -96,6 +96,7 @@ const {
 	reusableBlocksSelectKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
+	getMediaSelectKey,
 } = unlock( privateApis );
 
 /**
@@ -293,6 +294,13 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
+			[ getMediaSelectKey ]: ( select, attachmentId ) => {
+				return select( coreStore ).getEntityRecord(
+					'postType',
+					'attachment',
+					attachmentId
+				);
+			},
 			[ mediaEditKey ]: hasUploadPermissions
 				? editMediaEntity
 				: undefined,

package/src/hooks/media-upload.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import deprecated from '@wordpress/deprecated';
 import {
 	MediaUpload,
 	privateApis as mediaUtilsPrivateApis,
@@ -16,16 +18,82 @@ const { MediaUploadModal: MediaUploadModalComponent } = unlock(
 	mediaUtilsPrivateApis
 );
 
+/**
+ * Class component wrapper for MediaUploadModal to maintain compatibility
+ * with the stable MediaUpload component API (render prop pattern).
+ */
+class MediaUploadModalWrapper extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			isOpen: false,
+		};
+		this.openModal = this.openModal.bind( this );
+		this.closeModal = this.closeModal.bind( this );
+	}
+
+	openModal() {
+		this.setState( { isOpen: true } );
+	}
+
+	closeModal() {
+		this.setState( { isOpen: false } );
+		this.props.onClose?.();
+	}
+
+	render() {
+		const {
+			allowedTypes,
+			multiple,
+			value,
+			onSelect,
+			title,
+			modalClass,
+			render,
+		} = this.props;
+		const { isOpen } = this.state;
+
+		return (
+			<>
+				{ render( { open: this.openModal } ) }
+				<MediaUploadModalComponent
+					allowedTypes={ allowedTypes }
+					multiple={ multiple }
+					value={ value }
+					onSelect={ ( media ) => {
+						onSelect( media );
+						this.closeModal();
+					} }
+					onClose={ this.closeModal }
+					title={ title }
+					isOpen={ isOpen }
+					modalClass={ modalClass }
+				/>
+			</>
+		);
+	}
+}
+
 if ( window.__experimentalDataViewsMediaModal ) {
-	// Create a new filter for the MediaUploadModal component
+	// Use the wrapper component for editor.MediaUpload when the experimental flag is enabled
+	addFilter(
+		'editor.MediaUpload',
+		'core/editor/components/media-upload',
+		() => {
+			deprecated( 'Extending MediaUpload as a class component', {
+				since: '7.0',
+				version: '7.2',
+				hint: 'MediaUpload will become a function component in WordPress 7.2 Please update any custom implementations to use function components instead.',
+			} );
+			return MediaUploadModalWrapper;
+		}
+	);
+} else {
 	addFilter(
-		'editor.MediaUploadModal',
-		'core/editor/components/media-upload-modal',
+		'editor.MediaUpload',
+		'core/editor/components/media-upload',
 		() => {
-			return MediaUploadModalComponent;
+			return MediaUpload;
 		}
 	);
 }
-addFilter( 'editor.MediaUpload', 'core/editor/components/media-upload', () => {
-	return MediaUpload;
-} );