Migrating block editor media tab components

- Removes `__unstableComposite` imports from `@wordpress/components` - Adds private `Composite*` exports from `@wordpress/components` - Refactors `MediaList` and `MediaPreview` to use updated `Composite` components
WordPress · Nov 16, 2023 · c429c36 · c429c36
1 parent e131e6e
commit c429c36
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-list.js b/packages/block-editor/src/components/inserter/media-tab/media-list.js
@@ -1,27 +1,28 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { MediaPreview } from './media-preview';
+import { unlock } from '../../../lock-unlock';
+
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
 
 function MediaList( {
 	mediaList,
 	category,
 	onClick,
 	label = __( 'Media List' ),
 } ) {
-	const composite = useCompositeState();
+	const compositeStore = useCompositeStore();
 	return (
 		<Composite
-			{ ...composite }
+			store={ compositeStore }
 			role="listbox"
 			className="block-editor-inserter__media-list"
 			aria-label={ label }
@@ -32,7 +33,6 @@ function MediaList( {
 					media={ media }
 					category={ category }
 					onClick={ onClick }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>

diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
 	DropdownMenu,
 	MenuGroup,
@@ -17,6 +16,7 @@ import {
 	Flex,
 	FlexItem,
 	Button,
+	privateApis as componentsPrivateApis,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -33,6 +33,7 @@ import { isBlobURL } from '@wordpress/blob';
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MAXIMUM_TITLE_LENGTH = 25;
@@ -42,6 +43,8 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
 
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
+
 function MediaPreviewOptions( { category, media } ) {
 	if ( ! category.getReportUrl ) {
 		return null;
@@ -113,7 +116,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 	);
 }
 
-export function MediaPreview( { media, onClick, composite, category } ) {
+export function MediaPreview( { media, onClick, category } ) {
 	const [ showExternalUploadModal, setShowExternalUploadModal ] =
 		useState( false );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -216,20 +219,22 @@ export function MediaPreview( { media, onClick, composite, category } ) {
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
 					>
-						<Tooltip text={ truncatedTitle || title }>
-							{ /* Adding `is-hovered` class to the wrapper element is needed
-							because the options Popover is rendered outside of this node. */ }
-							<div
-								onMouseEnter={ onMouseEnter }
-								onMouseLeave={ onMouseLeave }
-							>
+						{ /* Adding `is-hovered` class to the wrapper element is needed
+						because the options Popover is rendered outside of this node. */ }
+						<div
+							onMouseEnter={ onMouseEnter }
+							onMouseLeave={ onMouseLeave }
+						>
+							<Tooltip text={ truncatedTitle || title }>
 								<CompositeItem
-									role="option"
-									as="div"
-									{ ...composite }
-									className="block-editor-inserter__media-list__item"
+									render={
+										<div
+											aria-label={ title }
+											role="option"
+											className="block-editor-inserter__media-list__item"
+										/>
+									}
 									onClick={ () => onMediaInsert( block ) }
-									aria-label={ title }
 								>
 									<div className="block-editor-inserter__media-list__item-preview">
 										{ preview }
@@ -240,14 +245,14 @@ export function MediaPreview( { media, onClick, composite, category } ) {
 										) }
 									</div>
 								</CompositeItem>
-								{ ! isInserting && (
-									<MediaPreviewOptions
-										category={ category }
-										media={ media }
-									/>
-								) }
-							</div>
-						</Tooltip>
+							</Tooltip>
+							{ ! isInserting && (
+								<MediaPreviewOptions
+									category={ category }
+									media={ media }
+								/>
+							) }
+						</div>
 					</div>
 				) }
 			</InserterDraggableBlocks>