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

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 }

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

@@ -0,0 +1,204 @@
+/**
+ * External dependencies
+ */
+import { renderHook, act, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useDelayedLoading, useMediaResults } from '../hooks';
+
+describe( 'useDelayedLoading', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+	afterEach( () => {
+		jest.useRealTimers();
+	} );
+
+	it( 'does not surface loading before the delay elapses', () => {
+		const { result } = renderHook( () => useDelayedLoading( true, 400 ) );
+		expect( result.current ).toBe( false );
+		act( () => {
+			jest.advanceTimersByTime( 399 );
+		} );
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'surfaces loading once the delay elapses', () => {
+		const { result } = renderHook( () => useDelayedLoading( true, 400 ) );
+		act( () => {
+			jest.advanceTimersByTime( 400 );
+		} );
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'never surfaces loading for an operation that ends before the delay', () => {
+		const { result, rerender } = renderHook(
+			( { isLoading } ) => useDelayedLoading( isLoading, 400 ),
+			{ initialProps: { isLoading: true } }
+		);
+		act( () => {
+			jest.advanceTimersByTime( 200 );
+		} );
+		rerender( { isLoading: false } );
+		act( () => {
+			jest.advanceTimersByTime( 400 );
+		} );
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'resets once loading finishes', () => {
+		const { result, rerender } = renderHook(
+			( { isLoading } ) => useDelayedLoading( isLoading, 400 ),
+			{ initialProps: { isLoading: true } }
+		);
+		act( () => {
+			jest.advanceTimersByTime( 400 );
+		} );
+		expect( result.current ).toBe( true );
+		rerender( { isLoading: false } );
+		expect( result.current ).toBe( false );
+	} );
+} );
+
+describe( 'useMediaResults', () => {
+	const createCategory = ( name, items ) => ( {
+		name,
+		fetch: jest.fn( async () => items ),
+	} );
+
+	it( 'fetches and returns media for the query', async () => {
+		const category = createCategory( 'images', [ { id: 1 } ] );
+		const { result } = renderHook( () =>
+			useMediaResults( category, { search: '' }, 0 )
+		);
+		await waitFor( () => expect( result.current.isLoading ).toBe( false ) );
+		expect( category.fetch ).toHaveBeenCalledWith( { search: '' } );
+		expect( result.current.mediaList ).toEqual( [ { id: 1 } ] );
+	} );
+
+	it( 'clears the previous results when the query changes', async () => {
+		const category = createCategory( 'images', [ { id: 1 } ] );
+		const { result, rerender } = renderHook(
+			( { query } ) => useMediaResults( category, query, 0 ),
+			{ initialProps: { query: { search: 'a' } } }
+		);
+		await waitFor( () =>
+			expect( result.current.mediaList ).toEqual( [ { id: 1 } ] )
+		);
+
+		// Hold the next request open so the intermediate (cleared) state is observable.
+		let resolveFetch;
+		category.fetch.mockImplementationOnce(
+			() =>
+				new Promise( ( resolve ) => {
+					resolveFetch = resolve;
+				} )
+		);
+		rerender( { query: { search: 'b' } } );
+
+		// A query change blanks the grid while the new request is in flight.
+		await waitFor( () => expect( result.current.mediaList ).toEqual( [] ) );
+		await act( async () => {
+			resolveFetch( [ { id: 2 } ] );
+		} );
+		expect( result.current.mediaList ).toEqual( [ { id: 2 } ] );
+	} );
+
+	it( 'keeps the existing results while a refresh (refreshKey bump) refetches', async () => {
+		const category = createCategory( 'attached-images', [ { id: 1 } ] );
+		const { result, rerender } = renderHook(
+			( { refreshKey } ) =>
+				useMediaResults( category, { search: '' }, refreshKey ),
+			{ initialProps: { refreshKey: 0 } }
+		);
+		await waitFor( () =>
+			expect( result.current.mediaList ).toEqual( [ { id: 1 } ] )
+		);
+
+		// Hold the refetch open so we can assert the grid is not blanked.
+		let resolveFetch;
+		category.fetch.mockImplementationOnce(
+			() =>
+				new Promise( ( resolve ) => {
+					resolveFetch = resolve;
+				} )
+		);
+		rerender( { refreshKey: 1 } );
+
+		// Same query, only `refreshKey` changed: existing items stay put.
+		await waitFor( () => expect( result.current.isLoading ).toBe( true ) );
+		expect( result.current.mediaList ).toEqual( [ { id: 1 } ] );
+		await act( async () => {
+			resolveFetch( [ { id: 2 } ] );
+		} );
+		expect( result.current.mediaList ).toEqual( [ { id: 2 } ] );
+	} );
+
+	it( 'clears and refetches when the category source changes with the same name and query', async () => {
+		const firstCategory = createCategory( 'attached-images', [
+			{ id: 1 },
+		] );
+		const { result, rerender } = renderHook(
+			( { category } ) => useMediaResults( category, { search: '' }, 0 ),
+			{ initialProps: { category: firstCategory } }
+		);
+		await waitFor( () =>
+			expect( result.current.mediaList ).toEqual( [ { id: 1 } ] )
+		);
+
+		let resolveFetch;
+		const secondCategory = {
+			name: 'attached-images',
+			fetch: jest.fn(
+				() =>
+					new Promise( ( resolve ) => {
+						resolveFetch = resolve;
+					} )
+			),
+		};
+		rerender( { category: secondCategory } );
+
+		await waitFor( () =>
+			expect( secondCategory.fetch ).toHaveBeenCalledWith( {
+				search: '',
+			} )
+		);
+		expect( result.current.mediaList ).toEqual( [] );
+		expect( result.current.isLoading ).toBe( true );
+
+		await act( async () => {
+			resolveFetch( [ { id: 2 } ] );
+		} );
+		expect( result.current.mediaList ).toEqual( [ { id: 2 } ] );
+	} );
+
+	it( 'does not refetch when only the category wrapper changes', async () => {
+		const fetch = jest.fn( async () => [ { id: 1 } ] );
+		const { result, rerender } = renderHook(
+			( { category } ) => useMediaResults( category, { search: '' }, 0 ),
+			{
+				initialProps: {
+					category: {
+						name: 'images',
+						fetch,
+					},
+				},
+			}
+		);
+		await waitFor( () =>
+			expect( result.current.mediaList ).toEqual( [ { id: 1 } ] )
+		);
+
+		rerender( {
+			category: {
+				name: 'images',
+				fetch,
+			},
+		} );
+
+		expect( fetch ).toHaveBeenCalledTimes( 1 );
+		expect( result.current.mediaList ).toEqual( [ { id: 1 } ] );
+	} );
+} );

package/src/components/inserter/mobile-tab-navigation.js

@@ -41,7 +41,11 @@ function ScreenHeader( { title } ) {
 	);
 }
 
-export default function MobileTabNavigation( { categories, children } ) {
+export default function MobileTabNavigation( {
+	categories,
+	children,
+	screenClassName,
+} ) {
 	return (
 		<Navigator
 			initialPath="/"
@@ -71,6 +75,7 @@ export default function MobileTabNavigation( { categories, children } ) {
 			{ categories.map( ( category ) => (
 				<Navigator.Screen
 					key={ category.name }
+					className={ screenClassName }
 					path={ `/category/${ category.name }` }
 				>
 					<ScreenHeader title={ __( 'Back' ) } />

package/src/components/inserter/no-results.js

@@ -3,10 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 
-function InserterNoResults() {
+function InserterNoResults( { children = __( 'No results found.' ) } ) {
 	return (
 		<div className="block-editor-inserter__no-results">
-			<p>{ __( 'No results found.' ) }</p>
+			<p>{ children }</p>
 		</div>
 	);
 }

package/src/components/inserter/preview-panel.js

@@ -28,6 +28,7 @@ function InserterPreviewPanel( { item } ) {
 				...initialAttributes,
 			},
 			innerBlocks: example.innerBlocks,
+			innerContent: example.innerContent,
 		} );
 	}, [ name, example, initialAttributes ] );
 	// Same as height of BlockPreviewPanel.