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

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.

package/src/components/inserter/style.scss

@@ -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,90 @@ $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-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;
+		}
+		// 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 {
+		// 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 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 {
+		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 +614,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/letter-spacing-control/README.md

@@ -19,7 +19,6 @@ const MyLetterSpacingControl = () => (
 		value={ value }
 		onChange={ onChange }
 		__unstableInputWidth="auto"
-		__next40pxDefaultSize
 	/>
 );
 ```
@@ -46,13 +45,6 @@ A callback function invoked when the value is changed.
 
 Input width to pass through to inner UnitControl. Should be a valid CSS value.
 
-#### `__next40pxDefaultSize`
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/letter-spacing-control/index.js

@@ -5,7 +5,6 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -16,16 +15,15 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}                  props                       Component props.
- * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
- * @param {string}                  props.value                 Currently selected letter-spacing.
- * @param {Function}                props.onChange              Handles change in letter-spacing selection.
- * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {Object}                  props                         Component props.
+ * @param {boolean}                 [props.__next40pxDefaultSize] Start opting into the larger default height that will become the default size in a future version.
+ * @param {string}                  props.value                   Currently selected letter-spacing.
+ * @param {Function}                props.onChange                Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth    Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
  * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
-	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -37,24 +35,8 @@ export default function LetterSpacingControl( {
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalLetterSpacingControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		<UnitControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }

package/src/components/letter-spacing-control/stories/index.story.jsx

@@ -46,24 +46,12 @@ const meta = {
 				defaultValue: { summary: '60px' },
 			},
 		},
-		__next40pxDefaultSize: {
-			control: 'boolean',
-			description:
-				'Start opting into the larger default height that will become the default size in a future version.',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-			},
-		},
 	},
 };
 
 export default meta;
 
 export const Default = {
-	args: {
-		__next40pxDefaultSize: true,
-	},
 	render: function Template( { onChange, ...args } ) {
 		const [ value, setValue ] = useState( '' );
 		return (

package/src/components/line-height-control/README.md

@@ -18,7 +18,6 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__next40pxDefaultSize
 	/>
 );
 ```
@@ -37,13 +36,6 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
-#### `__next40pxDefaultSize`
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/line-height-control/index.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -17,8 +16,12 @@ import {
 } from './utils';
 
 const LineHeightControl = ( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next40pxDefaultSize = false,
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 */
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	value: lineHeight,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -90,23 +93,11 @@ const LineHeightControl = ( {
 		onChange( `${ nextValue }` );
 	};
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated( `36px default size for wp.blockEditor.LineHeightControl`, {
-			since: '6.8',
-			version: '7.1',
-			hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-		} );
-	}
-
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
-				__shouldNotWarnDeprecated36pxSize
-				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__next40pxDefaultSize
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }

package/src/components/line-height-control/stories/index.story.jsx

@@ -22,7 +22,6 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	__unstableInputWidth: '100px',
 };
 

package/src/components/line-height-control/test/index.js

@@ -19,13 +19,7 @@ const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl
-			value={ value }
-			onChange={ setValue }
-			__next40pxDefaultSize
-		/>
-	);
+	return <LineHeightControl value={ value } onChange={ setValue } />;
 };
 
 describe( 'LineHeightControl', () => {

package/src/components/link-picker/test/index.js

@@ -141,7 +141,9 @@ describe( 'LinkPicker', () => {
 			);
 
 			const button = screen.getByRole( 'button' );
-			const image = within( button ).getByRole( 'img', { hidden: true } );
+			const image = within( button ).getByRole( 'presentation', {
+				hidden: true,
+			} );
 
 			expect( image ).toHaveAttribute(
 				'src',

package/src/components/list-view/block-select-button.js

@@ -46,6 +46,7 @@ function ListViewBlockSelectButton(
 		isExpanded,
 		ariaDescribedBy,
 		visibilityLabel,
+		isDisabled = false,
 	},
 	ref
 ) {
@@ -79,6 +80,8 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
+		// Disabled list view items intentionally omit href so TreeGrid skips them.
+		// eslint-disable-next-line jsx-a11y/anchor-is-valid
 		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
@@ -94,7 +97,8 @@ function ListViewBlockSelectButton(
 			onDragStart={ onDragStartHandler }
 			onDragEnd={ onDragEnd }
 			draggable={ draggable }
-			href={ `#block-${ clientId }` }
+			href={ isDisabled ? undefined : `#block-${ clientId }` }
+			aria-disabled={ isDisabled ? true : undefined }
 			aria-describedby={ ariaDescribedBy }
 			aria-expanded={ isExpanded }
 		>