@wordpress/block-editor 15.23.0 → 16.0.0

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

@@ -0,0 +1,267 @@
+/**
+ * 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( '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(
+			( { 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/media-tab/test/media-panel.js

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+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/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.

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,
@@ -469,14 +469,31 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+// On mobile the media category renders inside a `Navigator.Screen`. The screen
+// is a grid item the navigator aligns to the start (so it's content-height by
+// default); stretch it to full height and make it a flex column so the panel
+// below the back-button header fills the remaining space rather than overflowing.
+.block-editor-inserter__media-mobile-screen {
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+}
+
 .block-editor-inserter__media-panel {
-	min-height: 100%;
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
+	// Mobile: fill the height left below the screen's back-button header so the
+	// results scroll internally and the attach footer stays on-screen.
+	flex: 1;
+	min-height: 0;
 
 	@include break-medium {
 		padding: 0;
+		// Desktop: the panel lives in the absolutely-positioned category panel,
+		// so fill its height directly instead.
+		flex: 0 1 auto;
+		min-height: 100%;
 	}
 
 	.block-editor-inserter__media-panel-spinner {
@@ -494,6 +511,93 @@ $block-inserter-tabs-height: 44px;
 			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
 		}
 	}
+
+	// The empty state grows to fill, alongside `-results`/`-spinner`, so the
+	// attach footer below stays pinned to the bottom in every state.
+	.block-editor-inserter__no-results {
+		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.
+		&.components-button {
+			justify-content: center;
+			padding: $grid-unit-20;
+		}
+	}
+
+	.block-editor-inserter__media-panel-results {
+		// Take over the scroll host role the media list had when it was a direct
+		// flex child of the panel: grow to fill and constrain height
+		// (`min-height: 0` lets the inner list's `overflow-y: auto` engage).
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+
+		// While an attach/detach refetch is in flight, dim the existing grid (and
+		// gently pulse it) rather than clearing it or blocking it with a spinner.
+		// Mirrors the DataViews "refreshing" treatment; the delayed `is-loading`
+		// class (see `useDelayedLoading`) means quick refetches show nothing.
+		&.is-loading .block-editor-inserter__media-list {
+			opacity: 0.5;
+			pointer-events: none;
+
+			@media not ( prefers-reduced-motion ) {
+				opacity: 1;
+				animation: inserter-media-panel-pulse 1s ease-in-out infinite;
+			}
+		}
+	}
+
+	// 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;
+	}
+}
+
+@keyframes inserter-media-panel-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.block-editor-inserter__media-panel-detach-modal {
+	// Render above the ellipsis dropdown (a `.components-popover`) it opens from,
+	// which otherwise stacks over the modal. Matches other dropdown-triggered
+	// modals (e.g. block rename).
+	z-index: z-index(".block-editor-inserter__media-panel-detach-modal");
+
+	p {
+		margin-top: 0;
+	}
+}
+
+.block-editor-inserter__media-panel-detach-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: $grid-unit-10;
+	margin-top: $grid-unit-20;
 }
 
 .block-editor-inserter__media-list__list-item {
@@ -513,7 +617,15 @@ $block-inserter-tabs-height: 44px;
 		.block-editor-inserter__media-list__item-preview > * {
 			outline-color: rgba($black, 0.3);
 		}
+	}
 
+	// Reveal the per-item options button on hover, and — so keyboard users can
+	// reach it — whenever focus is within the item (e.g. its preview is
+	// focused). The button is `display: none` by default, which can never
+	// receive focus, so without `:focus-within` the detach/report action is
+	// unreachable by keyboard.
+	&.is-hovered,
+	&:focus-within {
 		.block-editor-inserter__media-list__item-preview-options > button {
 			display: block;
 		}

package/src/components/inserter-list-item/index.js

@@ -44,10 +44,16 @@ function InserterListItem( {
 			createBlock(
 				item.name,
 				item.initialAttributes,
-				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
+				createBlocksFromInnerBlocksTemplate( item.innerBlocks ),
+				item.innerContent
 			),
 		],
-		[ item.name, item.initialAttributes, item.innerBlocks ]
+		[
+			item.name,
+			item.initialAttributes,
+			item.innerBlocks,
+			item.innerContent,
+		]
 	);
 
 	const isSynced =

package/src/components/inserter-list-item/style.scss

@@ -82,21 +82,6 @@
 				pointer-events: none;
 			}
 		}
-
-		&.is-active {
-			color: $white;
-			background: $gray-900;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-			outline-offset: -2px;
-		}
-	}
-
-	&:not(:disabled) {
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
 	}
 }