@wordpress/block-editor 15.22.1 → 16.0.1-next.v.202607070741.0

package/src/components/inserter/media-tab/hooks.js

@@ -17,11 +17,13 @@ import { unlock } from '../../../lock-unlock';
  * Fetches media items based on the provided category.
  * Each media category is responsible for providing a `fetch` function.
  *
- * @param {Object}               category The media category to fetch results for.
- * @param {InserterMediaRequest} query    The query args to use for the request.
+ * @param {Object}               category   The media category to fetch results for.
+ * @param {InserterMediaRequest} query      The query args to use for the request.
+ * @param {any}                  refreshKey Optional value that, when changed, forces
+ *                                          a refetch (e.g. after attaching/detaching).
  * @return {InserterMediaItem[]} The media results.
  */
-export function useMediaResults( category, query = {} ) {
+export function useMediaResults( category, query = {}, refreshKey ) {
 	const [ mediaList, setMediaList ] = useState();
 	const [ isLoading, setIsLoading ] = useState( false );
 	// We need to keep track of the last request made because
@@ -32,25 +34,70 @@ export function useMediaResults( category, query = {} ) {
 	// requests, but we don't for now as it involves adding support
 	// for this to `core-data` package.
 	const lastRequestRef = useRef();
+	const lastQueryKeyRef = useRef();
+	const lastFetchRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
 				category: category.name,
 				...query,
 			} );
-			lastRequestRef.current = key;
+			// Unique token so identical-query refreshes can't apply stale results.
+			const request = {};
+			lastRequestRef.current = request;
 			setIsLoading( true );
-			setMediaList( [] ); // Empty the previous results.
+			// Only clear the previous results when the category source or query
+			// changes, not on a manual refresh (a `refreshKey` bump after
+			// attach/detach). Keeping them lets the panel dim the existing grid
+			// during the refetch instead of blanking it.
+			if (
+				lastQueryKeyRef.current !== key ||
+				lastFetchRef.current !== category.fetch
+			) {
+				setMediaList( [] );
+			}
+			lastQueryKeyRef.current = key;
+			lastFetchRef.current = category.fetch;
 			const _media = await category.fetch?.( query );
-			if ( key === lastRequestRef.current ) {
+			if ( request === lastRequestRef.current ) {
 				setMediaList( _media );
 				setIsLoading( false );
 			}
 		} )();
-	}, [ category.name, ...Object.values( query ) ] );
+	}, [
+		category.name,
+		category.fetch,
+		...Object.values( query ),
+		refreshKey,
+	] );
 	return { mediaList, isLoading };
 }
 
+/**
+ * Delays surfacing a loading state until a request has been in flight for
+ * `delay` ms, so brief operations (e.g. a quick attach/detach refetch) don't
+ * flash a loading indicator at all. Mirrors the DataViews `useDelayedLoading`
+ * hook.
+ *
+ * @param {boolean} isLoading Whether a request is currently in flight.
+ * @param {number}  delay     Milliseconds to wait before showing the loader.
+ * @return {boolean} Whether the loading state should be shown yet.
+ */
+export function useDelayedLoading( isLoading, delay = 400 ) {
+	const [ showLoading, setShowLoading ] = useState( false );
+	useEffect( () => {
+		if ( ! isLoading ) {
+			return undefined;
+		}
+		const timeout = setTimeout( () => setShowLoading( true ), delay );
+		return () => {
+			clearTimeout( timeout );
+			setShowLoading( false );
+		};
+	}, [ isLoading, delay ] );
+	return showLoading;
+}
+
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
 
@@ -110,7 +157,9 @@ export function useMediaCategories( rootClientId ) {
 			);
 			// We need to filter out categories that don't have any media items or
 			// whose corresponding block type is not allowed to be inserted, based
-			// on the category's `mediaType`.
+			// on the category's `mediaType`. A category that provides an
+			// `emptyMessage` stays in the list even when empty, so it can show
+			// that message (e.g. Attachments, to expose its "Attach" action).
 			const canInsertMediaType = {
 				image: canInsertImage,
 				video: canInsertVideo,
@@ -119,7 +168,8 @@ export function useMediaCategories( rootClientId ) {
 			inserterMediaCategories.forEach( ( category ) => {
 				if (
 					canInsertMediaType[ category.mediaType ] &&
-					categoriesHaveMedia.get( category.name )
+					( categoriesHaveMedia.get( category.name ) ||
+						category.emptyMessage )
 				) {
 					_categories.push( category );
 				}

package/src/components/inserter/media-tab/media-list.js

@@ -13,6 +13,7 @@ function MediaList( {
 	mediaList,
 	category,
 	onClick,
+	onDetach,
 	label = __( 'Media List' ),
 } ) {
 	return (
@@ -27,6 +28,7 @@ function MediaList( {
 					media={ media }
 					category={ category }
 					onClick={ onClick }
+					onDetach={ onDetach }
 				/>
 			) ) }
 		</Composite>

package/src/components/inserter/media-tab/media-panel.js

@@ -1,29 +1,200 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { Spinner, SearchControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Button, Modal, Spinner, SearchControl } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { useDebouncedInput } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import MediaList from './media-list';
-import { useMediaResults } from './hooks';
+import MediaUpload from '../../media-upload';
+import MediaUploadCheck from '../../media-upload/check';
+import { useMediaResults, useDelayedLoading } from './hooks';
 import InserterNoResults from '../no-results';
 
 const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
 
+// The attach flow is image-only, so the picker is constrained to images.
+const ATTACH_ALLOWED_TYPES = [ 'image' ];
+
+/**
+ * Opens the Media Library to attach images to the current post. Only rendered
+ * for media categories that expose an `attach` capability (i.e. the "Attached
+ * images" source); other sources render the panel exactly as before.
+ *
+ * The picker opens fresh each time with no pre-selected value, so it is purely
+ * additive: selecting images attaches them, and it does not imply that
+ * deselecting would detach. Detaching is a separate, explicit per-item action.
+ *
+ * @param {Object}   props
+ * @param {Function} props.onSelect Called with the selected media items.
+ */
+function AttachImagesButton( { onSelect } ) {
+	return (
+		<MediaUploadCheck>
+			<MediaUpload
+				multiple="add"
+				onSelect={ onSelect }
+				allowedTypes={ ATTACH_ALLOWED_TYPES }
+				title={ __( 'Attach images' ) }
+				render={ ( { open } ) => (
+					<Button
+						__next40pxDefaultSize
+						className="block-editor-inserter__media-panel-attach"
+						data-unstable-ignore-focus-outside-for-relatedtarget=".media-modal"
+						onClick={ ( event ) => {
+							event.target.focus();
+							open();
+						} }
+						variant="secondary"
+					>
+						{ __( 'Attach images' ) }
+					</Button>
+				) }
+			/>
+		</MediaUploadCheck>
+	);
+}
+
 export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
-	const { mediaList, isLoading } = useMediaResults( category, {
-		per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
-		search: debouncedSearch,
-	} );
+	const query = useMemo(
+		() => ( {
+			per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
+			search: debouncedSearch,
+		} ),
+		[ debouncedSearch ]
+	);
+	const [ refreshKey, setRefreshKey ] = useState( 0 );
+	const { mediaList, isLoading } = useMediaResults(
+		category,
+		query,
+		refreshKey
+	);
+	const { createErrorNotice, createSuccessNotice, createWarningNotice } =
+		useDispatch( noticesStore );
+	// Dim (rather than blank) the populated grid while a refetch is in flight,
+	// but only once it has run long enough to be worth signalling — quick
+	// attach/detach refetches resolve before this and show nothing.
+	const showRefreshing = useDelayedLoading( isLoading );
+
+	// Invalidate the cached results and force `useMediaResults` to refetch so
+	// the grid reflects images that were just attached or detached.
+	const refresh = useCallback( () => {
+		category.invalidate?.( query );
+		setRefreshKey( ( key ) => key + 1 );
+	}, [ category, query ] );
+
+	const handleAttach = useCallback(
+		async ( selectedMedia ) => {
+			try {
+				const attachedCount = await category.attach( selectedMedia );
+
+				if ( ! attachedCount ) {
+					// This source only attaches images (the picker's "Upload
+					// files" tab otherwise accepts any file type), so a selection
+					// with no images attaches nothing.
+					createWarningNotice( __( 'No images were attached.' ), {
+						type: 'snackbar',
+						id: 'inserter-notice',
+					} );
+					return;
+				}
+
+				refresh();
+				createSuccessNotice(
+					category.postTypeLabel
+						? sprintf(
+								/* translators: %1$d: Number of images attached. %2$s: Name of the post type e.g: "Page". */
+								_n(
+									'%1$d image attached to %2$s.',
+									'%1$d images attached to %2$s.',
+									attachedCount
+								),
+								attachedCount,
+								category.postTypeLabel
+						  )
+						: sprintf(
+								/* translators: %d: Number of images attached to the post. */
+								_n(
+									'%d image attached to post.',
+									'%d images attached to post.',
+									attachedCount
+								),
+								attachedCount
+						  ),
+					{ type: 'snackbar', id: 'inserter-notice' }
+				);
+			} catch {
+				createErrorNotice( __( 'Could not attach images.' ), {
+					type: 'snackbar',
+					id: 'inserter-notice',
+				} );
+			}
+		},
+		[
+			category,
+			refresh,
+			createErrorNotice,
+			createSuccessNotice,
+			createWarningNotice,
+		]
+	);
+
+	const handleDetach = useCallback(
+		async ( media ) => {
+			try {
+				await category.detach( media );
+				refresh();
+				createSuccessNotice(
+					category.postTypeLabel
+						? sprintf(
+								/* translators: %s: Name of the post type e.g: "Page". */
+								__( 'Image detached from %s.' ),
+								category.postTypeLabel
+						  )
+						: __( 'Image detached from post.' ),
+					{ type: 'snackbar', id: 'inserter-notice' }
+				);
+			} catch {
+				createErrorNotice( __( 'Could not detach image.' ), {
+					type: 'snackbar',
+					id: 'inserter-notice',
+				} );
+			}
+		},
+		[ category, refresh, createErrorNotice, createSuccessNotice ]
+	);
+
+	// Detaching is confirmed first: the dropdown sets the pending item, which
+	// opens a modal, and only `confirmDetach` performs the detach.
+	const [ mediaPendingDetach, setMediaPendingDetach ] = useState();
+	const confirmDetach = useCallback( () => {
+		const media = mediaPendingDetach;
+		setMediaPendingDetach( undefined );
+		handleDetach( media );
+	}, [ handleDetach, mediaPendingDetach ] );
+
 	const baseCssClass = 'block-editor-inserter__media-panel';
 	const searchLabel = category.labels.search_items || __( 'Search' );
 	return (
-		<div className={ baseCssClass }>
+		<div
+			className={ clsx( baseCssClass, {
+				// The attach footer supplies the breathing room beneath the
+				// grid, so the list drops its own bottom padding (see styles).
+				'has-attach-footer': !! category.attach,
+			} ) }
+		>
 			<SearchControl
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
@@ -31,19 +202,87 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 				label={ searchLabel }
 				placeholder={ searchLabel }
 			/>
-			{ isLoading && (
+			{ isLoading && ! mediaList?.length && (
 				<div className={ `${ baseCssClass }-spinner` }>
 					<Spinner />
 				</div>
 			) }
-			{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }
-			{ ! isLoading && !! mediaList?.length && (
-				<MediaList
-					rootClientId={ rootClientId }
-					onClick={ onInsert }
-					mediaList={ mediaList }
-					category={ category }
-				/>
+			{ ! isLoading && ! mediaList?.length && (
+				<InserterNoResults>
+					{ category.emptyMessage && ! debouncedSearch
+						? // For a source with a custom empty message (e.g.
+						  // Attachments) and no active search, an empty result
+						  // means nothing is attached yet — clearer than the
+						  // generic "no results found".
+						  category.emptyMessage
+						: __( 'No results found.' ) }
+				</InserterNoResults>
+			) }
+			{ !! mediaList?.length && (
+				// Keep the existing items visible while a refetch is in flight,
+				// dimming (and gently pulsing) them rather than clearing the grid,
+				// so it doesn't flicker or pop.
+				<div
+					className={ clsx( `${ baseCssClass }-results`, {
+						'is-loading': showRefreshing,
+					} ) }
+					aria-busy={ showRefreshing }
+				>
+					<MediaList
+						rootClientId={ rootClientId }
+						onClick={ onInsert }
+						onDetach={
+							category.detach ? setMediaPendingDetach : undefined
+						}
+						mediaList={ mediaList }
+						category={ category }
+					/>
+				</div>
+			) }
+			{ category.attach && (
+				// Pinned to the bottom of the panel as a fixed footer so it lines
+				// up with the "Open Media Library" button in the adjacent column.
+				<AttachImagesButton onSelect={ handleAttach } />
+			) }
+			{ mediaPendingDetach && (
+				// A plain `Modal` (not `ConfirmDialog`) so we can pass
+				// `overlayClassName` and stack it above the options dropdown that
+				// opened it (see the z-index entry in `_z-index.scss`).
+				<Modal
+					title={ __( 'Detach image' ) }
+					onRequestClose={ () => setMediaPendingDetach( undefined ) }
+					overlayClassName={ `${ baseCssClass }-detach-modal` }
+				>
+					<p>
+						{ category.postTypeLabel
+							? sprintf(
+									/* translators: %s: Name of the post type e.g: "Page". */
+									__(
+										'Detach this image from the current %s? The image will remain in the Media Library.'
+									),
+									category.postTypeLabel
+							  )
+							: __(
+									'Detach this image from the current post? The image will remain in the Media Library.'
+							  ) }
+					</p>
+					<div className={ `${ baseCssClass }-detach-actions` }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => setMediaPendingDetach( undefined ) }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ confirmDetach }
+						>
+							{ __( 'Detach' ) }
+						</Button>
+					</div>
+				</Modal>
 			) }
 		</div>
 	);

package/src/components/inserter/media-tab/media-preview.js

@@ -21,7 +21,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useCallback, useState } from '@wordpress/element';
 import { cloneBlock } from '@wordpress/blocks';
-import { moreVertical, external } from '@wordpress/icons';
+import { moreVertical, external, linkOff } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
@@ -43,11 +43,11 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
 
-function MediaPreviewOptions( { category, media } ) {
-	if ( ! category.getReportUrl ) {
+function MediaPreviewOptions( { category, media, onDetach } ) {
+	if ( ! category.getReportUrl && ! onDetach ) {
 		return null;
 	}
-	const reportUrl = category.getReportUrl( media );
+	const reportUrl = category.getReportUrl?.( media );
 	return (
 		<DropdownMenu
 			className="block-editor-inserter__media-list__item-preview-options"
@@ -57,18 +57,34 @@ function MediaPreviewOptions( { category, media } ) {
 		>
 			{ () => (
 				<MenuGroup>
-					<MenuItem
-						onClick={ () =>
-							window.open( reportUrl, '_blank' ).focus()
-						}
-						icon={ external }
-					>
-						{ sprintf(
-							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
-							__( 'Report %s' ),
-							category.mediaType
-						) }
-					</MenuItem>
+					{ reportUrl && (
+						<MenuItem
+							onClick={ () =>
+								window.open( reportUrl, '_blank' ).focus()
+							}
+							icon={ external }
+						>
+							{ sprintf(
+								/* translators: %s: The media type to report e.g: "image", "video", "audio" */
+								__( 'Report %s' ),
+								category.mediaType
+							) }
+						</MenuItem>
+					) }
+					{ onDetach && (
+						<MenuItem
+							onClick={ () => onDetach( media ) }
+							icon={ linkOff }
+						>
+							{ category.postTypeLabel
+								? sprintf(
+										/* translators: %s: Name of the post type e.g: "Page". */
+										__( 'Detach from %s' ),
+										category.postTypeLabel
+								  )
+								: __( 'Detach from post' ) }
+						</MenuItem>
+					) }
 				</MenuGroup>
 			) }
 		</DropdownMenu>
@@ -122,7 +138,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 	);
 }
 
-export function MediaPreview( { media, onClick, category } ) {
+export function MediaPreview( { media, onClick, onDetach, category } ) {
 	const [ showExternalUploadModal, setShowExternalUploadModal ] =
 		useState( false );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -294,6 +310,7 @@ export function MediaPreview( { media, onClick, category } ) {
 								<MediaPreviewOptions
 									category={ category }
 									media={ media }
+									onDetach={ onDetach }
 								/>
 							) }
 						</div>

package/src/components/inserter/media-tab/media-tab.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,6 +54,21 @@ function MediaTab( {
 			} ) ),
 		[ mediaCategories ]
 	);
+	useEffect( () => {
+		if ( ! selectedCategory ) {
+			return;
+		}
+
+		const latestCategory = categories.find(
+			( category ) => category.name === selectedCategory.name
+		);
+
+		if ( latestCategory && latestCategory !== selectedCategory ) {
+			onSelectCategory( latestCategory );
+		} else if ( ! latestCategory ) {
+			onSelectCategory( null );
+		}
+	}, [ categories, onSelectCategory, selectedCategory ] );
 
 	if ( ! categories.length ) {
 		return <InserterNoResults />;
@@ -100,7 +115,10 @@ function MediaTab( {
 				</div>
 			) }
 			{ isMobile && (
-				<MobileTabNavigation categories={ categories }>
+				<MobileTabNavigation
+					categories={ categories }
+					screenClassName="block-editor-inserter__media-mobile-screen"
+				>
 					{ ( category ) => (
 						<MediaCategoryPanel
 							onInsert={ onInsert }