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

package/src/components/image-editor/style.scss

@@ -0,0 +1,33 @@
+// `wp-block-image` class prefixes are used for back compat.
+// This component was previously in the block library package.
+.wp-block-image__crop-area {
+	position: relative;
+	max-width: 100%;
+	width: 100%;
+	overflow: hidden;
+
+	// stylelint-disable selector-class-pattern -- react-easy-crop library class names.
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
+	}
+
+	// stylelint-enable selector-class-pattern
+}
+
+.wp-block-image__zoom {
+	.components-popover__content {
+		min-width: 260px;
+		overflow: visible !important;
+	}
+}

package/src/components/image-size-control/index.js

@@ -108,7 +108,6 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
-							size="__unstable-large"
 						/>
 						<NumberControl
 							label={ __( 'Height' ) }
@@ -117,7 +116,6 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
-							size="__unstable-large"
 						/>
 					</HStack>
 					<ToggleGroupControl

package/src/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InnerBlocks should force serialize for invalid block with inner blocks 1`] = `
 "<!-- wp:test-block -->

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

@@ -12,6 +12,27 @@ import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
 /** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaResponse} InserterMediaResponse */
+
+/**
+ * Normalizes the result of a media category's `fetch`, which may be either a
+ * plain array of media items or an `InserterMediaResponse` carrying pagination
+ * totals. Sources that don't report totals leave them `undefined`, which is how
+ * the panel knows to hide the pager.
+ *
+ * @param {InserterMediaItem[]|InserterMediaResponse|undefined} result The raw `fetch` result.
+ * @return {{ mediaItems: InserterMediaItem[], totalItems: number|undefined, totalPages: number|undefined }} The normalized result.
+ */
+function normalizeFetchResult( result ) {
+	if ( Array.isArray( result ) ) {
+		return { mediaItems: result };
+	}
+	return {
+		mediaItems: result?.mediaItems ?? [],
+		totalItems: result?.totalItems,
+		totalPages: result?.totalPages,
+	};
+}
 
 /**
  * Fetches media items based on the provided category.
@@ -21,10 +42,11 @@ import { unlock } from '../../../lock-unlock';
  * @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.
+ * @return {{ mediaList: InserterMediaItem[], isLoading: boolean, totalItems: number|undefined, totalPages: number|undefined }} The media results and paging totals.
  */
 export function useMediaResults( category, query = {}, refreshKey ) {
 	const [ mediaList, setMediaList ] = useState();
+	const [ totals, setTotals ] = useState( {} );
 	const [ isLoading, setIsLoading ] = useState( false );
 	// We need to keep track of the last request made because
 	// multiple request can be fired without knowing the order
@@ -36,6 +58,7 @@ export function useMediaResults( category, query = {}, refreshKey ) {
 	const lastRequestRef = useRef();
 	const lastQueryKeyRef = useRef();
 	const lastFetchRef = useRef();
+	const lastSourceRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
@@ -56,11 +79,30 @@ export function useMediaResults( category, query = {}, refreshKey ) {
 			) {
 				setMediaList( [] );
 			}
+			// Reset paging totals only when the source (category or its `fetch`)
+			// changes, so switching to an array-returning source doesn't leave a
+			// stale pager showing. A mere page change keeps the previous totals,
+			// which is what holds the footer mounted while the next page loads.
+			if (
+				lastSourceRef.current !== category.name ||
+				lastFetchRef.current !== category.fetch
+			) {
+				setTotals( {} );
+			}
 			lastQueryKeyRef.current = key;
 			lastFetchRef.current = category.fetch;
-			const _media = await category.fetch?.( query );
+			lastSourceRef.current = category.name;
+			// Omit the default first page so sources that forward the query to a
+			// strict external API don't receive an unexpected `page` arg.
+			const { page, ...queryWithoutPage } = query;
+			const fetchQuery = page > 1 ? query : queryWithoutPage;
+			const { mediaItems, totalItems, totalPages } = normalizeFetchResult(
+				await category.fetch?.( fetchQuery )
+			);
 			if ( request === lastRequestRef.current ) {
-				setMediaList( _media );
+				// Set together so the grid and the pager never disagree.
+				setMediaList( mediaItems );
+				setTotals( { totalItems, totalPages } );
 				setIsLoading( false );
 			}
 		} )();
@@ -70,7 +112,12 @@ export function useMediaResults( category, query = {}, refreshKey ) {
 		...Object.values( query ),
 		refreshKey,
 	] );
-	return { mediaList, isLoading };
+	return {
+		mediaList,
+		isLoading,
+		totalItems: totals.totalItems,
+		totalPages: totals.totalPages,
+	};
 }
 
 /**
@@ -144,9 +191,10 @@ export function useMediaCategories( rootClientId ) {
 						}
 						let results = [];
 						try {
-							results = await category.fetch( {
-								per_page: 1,
-							} );
+							const { mediaItems } = normalizeFetchResult(
+								await category.fetch( { per_page: 1 } )
+							);
+							results = mediaItems;
 						} catch {
 							// If the request fails, we shallow the error and just don't show
 							// the category, in order to not break the media tab.

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

@@ -8,10 +8,18 @@ import clsx from 'clsx';
  */
 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';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -21,8 +29,9 @@ 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 +77,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 +153,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 +218,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 			}
 		},
 		[
+			attach,
 			category,
 			refresh,
 			createErrorNotice,
@@ -154,7 +230,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 +249,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 +265,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 +308,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/test/hooks.js

@@ -78,6 +78,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,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/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;
 	}
 }

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);
-		}
 	}
 }