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

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

@@ -1,28 +1,26 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 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 {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { useDebouncedInput, usePrevious } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { getScrollContainer } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
+import { Stack } from '@wordpress/ui';
 import MediaList from './media-list';
 import MediaUpload from '../../media-upload';
 import MediaUploadCheck from '../../media-upload/check';
 import { useMediaResults, useDelayedLoading } from './hooks';
 import InserterNoResults from '../no-results';
+import BlockPatternsPaging from '../../block-patterns-paging';
 
-const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+const MEDIA_ITEMS_PER_PAGE = 20;
 
 // The attach flow is image-only, so the picker is constrained to images.
 const ATTACH_ALLOWED_TYPES = [ 'image' ];
@@ -68,21 +66,74 @@ function AttachImagesButton( { onSelect } ) {
 
 export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const [ page, setPage ] = useState( 1 );
+	// The desktop panel persists across category switches (it's driven by the
+	// selected category, not remounted), so reset paging whenever the source
+	// category or the search term changes. Adjusting state during render (rather
+	// than in an effect) keeps the query on page 1 for the very next fetch,
+	// avoiding a wasted request for the previous page. Mirrors `usePatternsPaging`.
+	const previousCategory = usePrevious( category.name );
+	const previousSearch = usePrevious( debouncedSearch );
+	if (
+		( previousCategory !== category.name ||
+			previousSearch !== debouncedSearch ) &&
+		page !== 1
+	) {
+		setPage( 1 );
+	}
 	const query = useMemo(
 		() => ( {
-			per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
+			per_page: MEDIA_ITEMS_PER_PAGE,
+			page,
 			search: debouncedSearch,
 		} ),
-		[ debouncedSearch ]
+		[ page, debouncedSearch ]
 	);
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
-	const { mediaList, isLoading } = useMediaResults(
+	const { mediaList, isLoading, totalItems, totalPages } = useMediaResults(
 		category,
 		query,
 		refreshKey
 	);
+	const numPages = totalPages || 1;
+	// If the current set shrinks below the active page (e.g. detaching images
+	// empties the last page), clamp back into range so the grid isn't left blank
+	// on a page that no longer exists.
+	if ( typeof totalPages === 'number' && page > numPages ) {
+		setPage( numPages );
+	}
+	// Private to core's media categories, these capabilities act on WordPress
+	// attachments:
+	// - `attach`/`detach`/`invalidate` manage the images attached to this post.
+	// - `subscribe` watches the attachment cache backing them.
+	// An external resource can never own a post's attachments, and every category
+	// registered by an extender through the public `registerInserterMediaCategory`
+	// API is flagged as one — so this guard stops such a category from opting into
+	// the workflow just by setting these props.
+	const supportsAttachments = ! category.isExternalResource;
+	const attach = supportsAttachments ? category.attach : undefined;
+	const detach = supportsAttachments ? category.detach : undefined;
+	const subscribe = supportsAttachments ? category.subscribe : undefined;
+
+	// Only show the pager for multi-page sources. Gating on the page count (not
+	// `mediaList.length`) keeps the footer mounted while paging, since the count
+	// persists across the fetch. It also skips the shared component's stray
+	// single-page item count, which reads oddly here.
+	const showPagination = numPages > 1;
+	// The footer holds the pager and/or the attach button; it exists when either
+	// is present so it can own their shared top/horizontal breathing room.
+	const hasFooter = showPagination || !! attach;
+	const scrollContainerRef = useRef();
+	const changePage = useCallback( ( nextPage ) => {
+		const scrollContainer = getScrollContainer(
+			scrollContainerRef.current
+		);
+		scrollContainer?.scrollTo( 0, 0 );
+		setPage( nextPage );
+	}, [] );
 	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.
@@ -91,14 +142,27 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	// 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 );
+		if ( supportsAttachments ) {
+			category.invalidate?.( query );
+		}
 		setRefreshKey( ( key ) => key + 1 );
-	}, [ category, query ] );
+	}, [ category, query, supportsAttachments ] );
+
+	// A media modal opened anywhere in the editor (a canvas block, the featured
+	// image panel, the "Attach images" button) attaches its uploads to the current
+	// post, and invalidates the cached attachment queries when it closes. Refetch
+	// so the grid reflects the newly attached images.
+	useEffect( () => {
+		if ( ! subscribe ) {
+			return;
+		}
+		return subscribe( () => setRefreshKey( ( key ) => key + 1 ), query );
+	}, [ subscribe, query ] );
 
 	const handleAttach = useCallback(
 		async ( selectedMedia ) => {
 			try {
-				const attachedCount = await category.attach( selectedMedia );
+				const attachedCount = await attach( selectedMedia );
 
 				if ( ! attachedCount ) {
 					// This source only attaches images (the picker's "Upload
@@ -143,6 +207,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 			}
 		},
 		[
+			attach,
 			category,
 			refresh,
 			createErrorNotice,
@@ -154,7 +219,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const handleDetach = useCallback(
 		async ( media ) => {
 			try {
-				await category.detach( media );
+				await detach( media );
 				refresh();
 				createSuccessNotice(
 					category.postTypeLabel
@@ -173,7 +238,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 				} );
 			}
 		},
-		[ category, refresh, createErrorNotice, createSuccessNotice ]
+		[ detach, category, refresh, createErrorNotice, createSuccessNotice ]
 	);
 
 	// Detaching is confirmed first: the dropdown sets the pending item, which
@@ -189,10 +254,11 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const searchLabel = category.labels.search_items || __( 'Search' );
 	return (
 		<div
+			ref={ scrollContainerRef }
 			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,
+				// The footer supplies the breathing room beneath the grid, so the
+				// list drops its own bottom padding (see styles).
+				'has-footer': hasFooter,
 			} ) }
 		>
 			<SearchControl
@@ -231,18 +297,37 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 					<MediaList
 						rootClientId={ rootClientId }
 						onClick={ onInsert }
-						onDetach={
-							category.detach ? setMediaPendingDetach : undefined
-						}
+						onDetach={ 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 } />
+			{ hasFooter && (
+				// A single footer wrapper owns the top and horizontal breathing
+				// room, so the pager and attach button don't span the full width
+				// and sit clear of the grid above (see styles).
+				<Stack
+					direction="column"
+					gap="sm"
+					className={ `${ baseCssClass }-footer` }
+				>
+					{ showPagination && (
+						// Reuse the Patterns tab pager (presentational only); only
+						// rendered for multi-page sources (see `showPagination`).
+						<BlockPatternsPaging
+							currentPage={ page }
+							numPages={ numPages }
+							changePage={ changePage }
+							totalItems={ totalItems }
+						/>
+					) }
+					{ attach && (
+						// Lines up with the "Open Media Library" button in the
+						// adjacent column.
+						<AttachImagesButton onSelect={ handleAttach } />
+					) }
+				</Stack>
 			) }
 			{ mediaPendingDetach && (
 				// A plain `Modal` (not `ConfirmDialog`) so we can pass

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -26,12 +19,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
 import { getFilename } from '@wordpress/url';
-
 import { Tooltip } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';

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

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { useCallback, useEffect, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { MediaCategoryPanel } from './media-panel';
 import MediaUploadCheck from '../../media-upload/check';
 import MediaUpload from '../../media-upload';

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { renderHook, act, waitFor } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useDelayedLoading, useMediaResults } from '../hooks';
 
 describe( 'useDelayedLoading', () => {
@@ -78,6 +71,69 @@ describe( 'useMediaResults', () => {
 		expect( result.current.mediaList ).toEqual( [ { id: 1 } ] );
 	} );
 
+	it( 'omits the default first page from the fetch query', async () => {
+		const category = createCategory( 'images', [ { id: 1 } ] );
+		renderHook( () =>
+			useMediaResults(
+				category,
+				{ per_page: 20, page: 1, search: '' },
+				0
+			)
+		);
+		await waitFor( () =>
+			expect( category.fetch ).toHaveBeenCalledWith( {
+				per_page: 20,
+				search: '',
+			} )
+		);
+	} );
+
+	it( 'passes `page` to the fetch query when paging past the first page', async () => {
+		const category = createCategory( 'images', [ { id: 1 } ] );
+		renderHook( () =>
+			useMediaResults(
+				category,
+				{ per_page: 20, page: 2, search: '' },
+				0
+			)
+		);
+		await waitFor( () =>
+			expect( category.fetch ).toHaveBeenCalledWith( {
+				per_page: 20,
+				page: 2,
+				search: '',
+			} )
+		);
+	} );
+
+	it( 'leaves paging totals undefined for an array-returning source', async () => {
+		const category = createCategory( 'images', [ { id: 1 } ] );
+		const { result } = renderHook( () =>
+			useMediaResults( category, { search: '' }, 0 )
+		);
+		await waitFor( () => expect( result.current.isLoading ).toBe( false ) );
+		expect( result.current.totalItems ).toBeUndefined();
+		expect( result.current.totalPages ).toBeUndefined();
+	} );
+
+	it( 'surfaces paging totals from a source that returns them', async () => {
+		const category = {
+			name: 'images',
+			fetch: jest.fn( async () => ( {
+				mediaItems: [ { id: 1 } ],
+				totalItems: 42,
+				totalPages: 3,
+			} ) ),
+		};
+		const { result } = renderHook( () =>
+			useMediaResults( category, { search: '' }, 0 )
+		);
+		await waitFor( () => expect( result.current.isLoading ).toBe( false ) );
+		expect( result.current.mediaList ).toEqual( [ { id: 1 } ] );
+		expect( result.current.totalItems ).toBe( 42 );
+		expect( result.current.totalPages ).toBe( 3 );
+	} );
+
 	it( 'clears the previous results when the query changes', async () => {
 		const category = createCategory( 'images', [ { id: 1 } ] );
 		const { result, rerender } = renderHook(

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

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/react';
+import { MediaCategoryPanel } from '../media-panel';
+
+// Keep the panel's data + async surface out of the test: return a small,
+// non-empty result set so the grid (and the detach affordance) render.
+jest.mock( '../hooks', () => ( {
+	useMediaResults: () => ( {
+		mediaList: [
+			{ id: 1, title: 'Example', url: 'https://example.com/1' },
+		],
+		isLoading: false,
+	} ),
+	useDelayedLoading: () => false,
+} ) );
+
+// Replace `MediaList` with a marker that only reports whether it was wired for
+// detach, so the gate can be asserted without the full preview/dropdown tree.
+jest.mock( '../media-list', () => ( {
+	__esModule: true,
+	default: ( { onDetach } ) => (
+		<div
+			data-testid="media-list"
+			data-has-detach={ String( !! onDetach ) }
+		/>
+	),
+} ) );
+
+// The attach button renders through MediaUpload's render prop behind a
+// capability check; stub both so the real Button (and its label) render.
+jest.mock( '../../../media-upload', () => ( {
+	__esModule: true,
+	default: ( { render: renderProp } ) => renderProp( { open: () => {} } ),
+} ) );
+jest.mock( '../../../media-upload/check', () => ( {
+	__esModule: true,
+	default: ( { children } ) => children,
+} ) );
+
+const baseCategory = {
+	name: 'attached-images',
+	labels: { name: 'Attached images', search_items: 'Search attachments' },
+	mediaType: 'image',
+	fetch: jest.fn(),
+	attach: jest.fn(),
+	detach: jest.fn(),
+	invalidate: jest.fn(),
+};
+
+function renderPanel( category ) {
+	return render(
+		<MediaCategoryPanel
+			rootClientId=""
+			onInsert={ jest.fn() }
+			category={ category }
+		/>
+	);
+}
+
+describe( 'MediaCategoryPanel attach/detach gating', () => {
+	it( 'exposes attach/detach for the built-in Attachments source', () => {
+		renderPanel( baseCategory );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Attach images' } )
+		).toBeInTheDocument();
+		expect( screen.getByTestId( 'media-list' ) ).toHaveAttribute(
+			'data-has-detach',
+			'true'
+		);
+	} );
+
+	it( 'ignores attach/detach when the source is an external resource', () => {
+		// Every category registered by an extender through the public
+		// `registerInserterMediaCategory` API is forced to `isExternalResource:
+		// true`, so an extender-registered source cannot opt into the workflow
+		// even if it sets `attach`/`detach`.
+		renderPanel( { ...baseCategory, isExternalResource: true } );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Attach images' } )
+		).not.toBeInTheDocument();
+		expect( screen.getByTestId( 'media-list' ) ).toHaveAttribute(
+			'data-has-detach',
+			'false'
+		);
+	} );
+} );
+
+describe( 'MediaCategoryPanel subscription gating', () => {
+	it( 'subscribes a local source to media changes and unsubscribes on unmount', () => {
+		const unsubscribe = jest.fn();
+		const subscribe = jest.fn( () => unsubscribe );
+
+		const { unmount } = renderPanel( { ...baseCategory, subscribe } );
+
+		// The panel hands its own query over, so the source can watch the exact
+		// results the grid is showing.
+		expect( subscribe ).toHaveBeenCalledTimes( 1 );
+		expect( subscribe ).toHaveBeenCalledWith(
+			expect.any( Function ),
+			expect.objectContaining( { per_page: expect.any( Number ) } )
+		);
+		expect( unsubscribe ).not.toHaveBeenCalled();
+
+		unmount();
+
+		expect( unsubscribe ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'ignores subscribe when the source is an external resource', () => {
+		// `subscribe` is core-only, gated like `attach`/`detach`: an
+		// extender-registered source is always external, so it cannot hook into
+		// the panel's refresh cycle just by setting the prop.
+		const subscribe = jest.fn();
+
+		renderPanel( { ...baseCategory, subscribe, isExternalResource: true } );
+
+		expect( subscribe ).not.toHaveBeenCalled();
+	} );
+} );

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };

package/src/components/inserter/menu.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	forwardRef,
 	useState,
@@ -20,10 +13,6 @@ import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 
 function InserterNoResults( { children = __( 'No results found.' ) } ) {

package/src/components/inserter/panel.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Icon as WCIcon } from '@wordpress/components';
 
 function InserterPanel( { title, icon, children } ) {

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	isReusableBlock,
 	createBlock,
@@ -8,10 +5,6 @@ import {
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';
 

package/src/components/inserter/quick-inserter.js

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, SearchControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import useBlockTypesState from './hooks/use-block-types-state';

package/src/components/inserter/search-items.js

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import removeAccents from 'remove-accents';
 import { noCase } from 'change-case';
 

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

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/ui';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import BlockTypesList from '../block-types-list';
 import BlockPatternsList from '../block-patterns-list';
 import __unstableInserterMenuExtension from '../inserter-menu-extension';

package/src/components/inserter/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { registerCoreBlocks } from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
 import BlockLibrary from '../library';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';

package/src/components/inserter/style.scss

@@ -163,7 +163,7 @@ $block-inserter-tabs-height: 44px;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
@@ -456,7 +456,7 @@ $block-inserter-tabs-height: 44px;
 }
 
 .components-heading.block-editor-inserter__patterns-category-panel-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-inserter__patterns-explore-button,
@@ -518,6 +518,19 @@ $block-inserter-tabs-height: 44px;
 		flex-grow: 1;
 	}
 
+	.block-editor-inserter__media-panel-footer {
+		// Keeps the footer at its natural height rather than collapsing to make
+		// room for the scrolling grid above.
+		flex-shrink: 0;
+		padding-top: $grid-unit-20;
+		padding-bottom: $grid-unit-20;
+		@include break-medium() {
+			// Align with the search field and grid gutters.
+			padding-left: $grid-unit-30;
+			padding-right: $grid-unit-30;
+		}
+	}
+
 	.block-editor-inserter__media-panel-attach {
 		// Match the padding (and so the height) of the "Open Media Library"
 		// footer button in the adjacent column, so the two line up.
@@ -525,16 +538,6 @@ $block-inserter-tabs-height: 44px;
 			justify-content: center;
 			padding: $grid-unit-20;
 		}
-		// Balanced breathing room above and below the footer button.
-		// `flex-shrink: 0` keeps it full height as a flex child rather than
-		// collapsing to its content.
-		flex-shrink: 0;
-		margin-top: $grid-unit-20;
-		margin-bottom: $grid-unit-20;
-		@include break-medium() {
-			margin-left: $grid-unit-30;
-			margin-right: $grid-unit-30;
-		}
 	}
 
 	.block-editor-inserter__media-panel-results {
@@ -561,10 +564,10 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	// When the attach footer is present it supplies the breathing room beneath
-	// the grid, so drop the list's own bottom padding — otherwise scrolling to
-	// the end leaves a doubled gap before the footer.
-	&.has-attach-footer .block-editor-inserter__media-list {
+	// When the footer is present it supplies the breathing room beneath the grid,
+	// so drop the list's own bottom padding — otherwise scrolling to the end
+	// leaves a doubled gap before the footer.
+	&.has-footer .block-editor-inserter__media-list {
 		padding-bottom: 0;
 	}
 }