@wordpress/editor 14.48.0 → 14.48.2-next.v.202606191442.0

package/src/components/upload-progress-snackbar/index.js

@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import { store as uploadStore } from '@wordpress/upload-media';
+import { store as noticesStore } from '@wordpress/notices';
+import { Icon as WCIcon, Spinner } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useTracker } from './tracker';
+
+const NOTICE_ID = 'upload-progress';
+
+// How long the completion checkmark is shown before the snackbar dismisses.
+const COMPLETION_DISPLAY_MS = 3000;
+
+// Longest filename shown before it is middle-truncated. Long names (e.g. the
+// UUID-style names some sources produce) would otherwise stretch the snackbar.
+const MAX_FILENAME_LENGTH = 40;
+
+/**
+ * Middle-truncates a filename that exceeds `MAX_FILENAME_LENGTH`, keeping the
+ * start and the end (so the file extension stays visible).
+ *
+ * @param {string} filename The filename to truncate.
+ * @return {string} The original or middle-truncated filename.
+ */
+function truncateFilename( filename ) {
+	if ( filename.length <= MAX_FILENAME_LENGTH ) {
+		return filename;
+	}
+	const ellipsis = '…';
+	const visible = MAX_FILENAME_LENGTH - ellipsis.length;
+	const front = Math.ceil( visible / 2 );
+	const back = Math.floor( visible / 2 );
+	return (
+		filename.slice( 0, front ) +
+		ellipsis +
+		filename.slice( filename.length - back )
+	);
+}
+
+// Exported so the Storybook story can render the exact icon markup the notice
+// uses, keeping the visual review faithful to what ships.
+export const UPLOAD_SPINNER = (
+	<span
+		className="editor-upload-progress-snackbar__spinner"
+		aria-hidden="true"
+	>
+		<Spinner />
+	</span>
+);
+
+export const UPLOAD_DONE = (
+	<span className="editor-upload-progress-snackbar__check" aria-hidden="true">
+		<WCIcon icon={ check } />
+	</span>
+);
+
+/**
+ * Manages a snackbar notice that shows media upload progress while uploads are
+ * in progress. It creates/updates a notice via the notices store so that it
+ * positions and stacks with every other snackbar in the editor.
+ *
+ * Reads from two sources to cover both upload paths:
+ *  - `@wordpress/upload-media` store (client-side media processing path).
+ *  - An editor-local tracker populated by the traditional `mediaUpload`
+ *    wrapper (non-CSM path — e.g. Safari, or when a filter disables CSM).
+ *
+ * Only counts original user-uploaded files (items without a `parentId`),
+ * ignoring generated subsizes/thumbnails.
+ *
+ * @return {null} This component renders nothing — it only manages a notice.
+ */
+export default function UploadProgressSnackbar() {
+	const items = useSelect(
+		( select ) => select( uploadStore ).getItems(),
+		[]
+	);
+	const tracker = useTracker();
+
+	// CSM path: originals in the upload-media queue (subsizes excluded). Memoized
+	// so its reference is stable across renders where `items` is unchanged, since
+	// it's a dependency of the effect below.
+	const csmOriginals = useMemo(
+		() => items.filter( ( item ) => ! item.parentId ),
+		[ items ]
+	);
+	const csmRemaining = csmOriginals.length;
+
+	// Non-CSM path: files tracked by the editor's mediaUpload wrapper.
+	const trackedRemaining = tracker ? tracker.total - tracker.completed : 0;
+
+	const remaining = csmRemaining + trackedRemaining;
+
+	// Track peak total across sources during a session. The CSM queue removes
+	// items on completion, and the tracker tops out at its recorded total, so
+	// `total` has to be tracked as the high-water mark.
+	const [ peak, setPeak ] = useState( 0 );
+	const sessionTotal = csmRemaining + ( tracker ? tracker.total : 0 );
+	if ( sessionTotal > peak ) {
+		setPeak( sessionTotal );
+	}
+
+	const { createNotice, removeNotice } = useDispatch( noticesStore );
+
+	// Track whether the user has dismissed the notice. If so, don't re-create
+	// it until the current batch finishes and a new one starts.
+	const dismissedRef = useRef( false );
+	const wasUploadingRef = useRef( false );
+
+	// Timeout that removes the completion-state (checkmark) notice after a
+	// brief display. Held so a new upload can cancel it.
+	const completionTimeoutRef = useRef( null );
+	useEffect( () => {
+		return () => {
+			if ( completionTimeoutRef.current ) {
+				clearTimeout( completionTimeoutRef.current );
+			}
+		};
+	}, [] );
+
+	useEffect( () => {
+		const isUploading = remaining > 0;
+
+		if ( isUploading && ! wasUploadingRef.current ) {
+			dismissedRef.current = false;
+			speak( __( 'Media upload started' ), 'polite' );
+			// A new batch started during the completion display: cancel the
+			// pending dismissal so the snackbar transitions straight back
+			// into the uploading state, and reset the peak so the new batch
+			// counts from `1 of N` rather than resuming the previous total.
+			if ( completionTimeoutRef.current ) {
+				clearTimeout( completionTimeoutRef.current );
+				completionTimeoutRef.current = null;
+				setPeak( 0 );
+			}
+		} else if ( ! isUploading && wasUploadingRef.current ) {
+			speak( __( 'Media upload complete' ), 'polite' );
+
+			if ( ! dismissedRef.current ) {
+				createNotice( 'info', __( 'Upload complete' ), {
+					id: NOTICE_ID,
+					type: 'snackbar',
+					isDismissible: false,
+					explicitDismiss: false,
+					speak: false,
+					icon: UPLOAD_DONE,
+					onDismiss: () => {
+						dismissedRef.current = true;
+					},
+				} );
+
+				completionTimeoutRef.current = setTimeout( () => {
+					removeNotice( NOTICE_ID );
+					completionTimeoutRef.current = null;
+					setPeak( 0 );
+				}, COMPLETION_DISPLAY_MS );
+			} else {
+				setPeak( 0 );
+			}
+		}
+
+		wasUploadingRef.current = isUploading;
+
+		if ( ! isUploading || dismissedRef.current ) {
+			return;
+		}
+
+		const total = peak;
+		const current = total - remaining + 1;
+
+		// Prefer the CSM queue's first original filename, then fall back to
+		// the tracker's first pending filename.
+		const filename = truncateFilename(
+			csmOriginals[ 0 ]?.sourceFile?.name ||
+				tracker?.pending[ 0 ] ||
+				__( 'Uploading' )
+		);
+
+		const content =
+			total === 1
+				? sprintf(
+						/* translators: %s: filename. */
+						__( 'Uploading — %s' ),
+						filename
+				  )
+				: sprintf(
+						/* translators: 1: current upload number, 2: total uploads, 3: filename. */
+						__( 'Uploading %1$d of %2$d — %3$s' ),
+						current,
+						total,
+						filename
+				  );
+
+		createNotice( 'info', content, {
+			id: NOTICE_ID,
+			type: 'snackbar',
+			isDismissible: false,
+			explicitDismiss: true,
+			speak: false,
+			icon: UPLOAD_SPINNER,
+			onDismiss: () => {
+				dismissedRef.current = true;
+			},
+		} );
+	}, [ remaining, peak, csmOriginals, tracker, createNotice, removeNotice ] );
+
+	return null;
+}

package/src/components/upload-progress-snackbar/stories/index.story.tsx

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+/**
+ * WordPress dependencies
+ */
+import { Snackbar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { UPLOAD_DONE, UPLOAD_SPINNER } from '../index';
+
+/**
+ * The `UploadProgressSnackbar` component itself renders no UI: it manages a
+ * snackbar notice via the notices store while media uploads are in progress.
+ *
+ * These stories render the `Snackbar` with the same icon markup and text the
+ * notice produces, so the in-progress and completed states can be reviewed
+ * visually without running an actual upload.
+ */
+const meta: Meta< typeof Snackbar > = {
+	title: 'Editor/UploadProgressSnackbar',
+	component: Snackbar,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	argTypes: {
+		icon: { control: false },
+		children: { control: false },
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof Snackbar >;
+
+export const Uploading: Story = {
+	args: {
+		icon: UPLOAD_SPINNER,
+		children: 'Uploading — sunset-over-the-bay.jpg',
+		explicitDismiss: true,
+	},
+};
+
+export const UploadingMultiple: Story = {
+	args: {
+		icon: UPLOAD_SPINNER,
+		children: 'Uploading 1 of 3 — sunset-over-the-bay.jpg',
+		explicitDismiss: true,
+	},
+};
+
+export const Complete: Story = {
+	args: {
+		icon: UPLOAD_DONE,
+		children: 'Upload complete',
+	},
+};
+
+/**
+ * All states shown together for quick comparison of the icon alignment and
+ * sizing between the spinner and the completion checkmark.
+ */
+export const AllStates: Story = {
+	render: () => (
+		<div
+			style={ {
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'flex-start',
+				gap: '12px',
+			} }
+		>
+			<Snackbar icon={ UPLOAD_SPINNER } explicitDismiss>
+				Uploading — sunset-over-the-bay.jpg
+			</Snackbar>
+			<Snackbar icon={ UPLOAD_SPINNER } explicitDismiss>
+				Uploading 1 of 3 — sunset-over-the-bay.jpg
+			</Snackbar>
+			<Snackbar icon={ UPLOAD_DONE }>Upload complete</Snackbar>
+		</div>
+	),
+};

package/src/components/upload-progress-snackbar/style.scss

@@ -0,0 +1,30 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-upload-progress-snackbar__spinner,
+.editor-upload-progress-snackbar__check {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	// Size the slot to $icon-size to match the icon dimensions the Snackbar's
+	// absolute positioning is tuned for, so the spinner and checkmark sit
+	// vertically centered against the notice text.
+	width: $icon-size;
+	height: $icon-size;
+}
+
+.editor-upload-progress-snackbar__spinner .components-spinner {
+	// The Spinner ships with an asymmetric default margin (top, not bottom),
+	// which offsets it within the centered icon slot. Reset it so the flex
+	// centering above keeps the spinner vertically centered against the text.
+	margin: 0;
+}
+
+.editor-upload-progress-snackbar__check svg {
+	// Render at the full icon size: the check glyph only occupies the center of
+	// its viewBox, so a smaller size makes the mark look faint next to the text.
+	width: $icon-size;
+	height: $icon-size;
+	// The icon ships without a fill, which renders black and disappears against
+	// the dark snackbar. Inherit the snackbar's white text color instead.
+	fill: currentColor;
+}

package/src/components/upload-progress-snackbar/test/index.js

@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+import { render, act } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import UploadProgressSnackbar from '../';
+import { addFiles, advance, reset } from '../tracker';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	const mock = jest.fn();
+	return mock;
+} );
+
+const mockCreateNotice = jest.fn();
+const mockRemoveNotice = jest.fn();
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
+	return {
+		useDispatch: jest.fn( () => ( {
+			createNotice: mockCreateNotice,
+			removeNotice: mockRemoveNotice,
+		} ) ),
+		useDispatchWithMap: jest.fn(),
+	};
+} );
+
+jest.mock( '@wordpress/a11y', () => ( {
+	speak: jest.fn(),
+} ) );
+
+function mockQueue( items ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getItems: () => items,
+			isUploading: () => items.length > 0,
+		} ) )
+	);
+}
+
+function makeItem( id, name, { parentId } = {} ) {
+	return {
+		id,
+		sourceFile: { name },
+		status: 'PROCESSING',
+		parentId,
+	};
+}
+
+describe( 'UploadProgressSnackbar', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		reset();
+	} );
+
+	it( 'does not create a notice when both sources are empty', () => {
+		mockQueue( [] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice ).not.toHaveBeenCalled();
+	} );
+
+	it( 'creates a notice with the filename when a single CSM upload is in progress', () => {
+		mockQueue( [ makeItem( '1', 'photo.jpg' ) ] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice ).toHaveBeenCalledWith(
+			'info',
+			expect.stringContaining( 'photo.jpg' ),
+			expect.objectContaining( {
+				id: 'upload-progress',
+				type: 'snackbar',
+			} )
+		);
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toBe(
+			'Uploading — photo.jpg'
+		);
+	} );
+
+	it( 'shows batch count for CSM uploads', () => {
+		mockQueue( [
+			makeItem( '1', 'a.jpg' ),
+			makeItem( '2', 'b.jpg' ),
+			makeItem( '3', 'c.jpg' ),
+		] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toMatch( /1 of 3/ );
+	} );
+
+	it( 'excludes subsizes from the CSM count', () => {
+		mockQueue( [
+			makeItem( '1', 'photo.jpg' ),
+			makeItem( '1-thumb', 'photo-150x150.jpg', { parentId: '1' } ),
+			makeItem( '1-medium', 'photo-300x300.jpg', { parentId: '1' } ),
+		] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toBe(
+			'Uploading — photo.jpg'
+		);
+	} );
+
+	it( 'shows non-CSM uploads tracked by the editor mediaUpload wrapper', () => {
+		mockQueue( [] );
+		act( () => {
+			addFiles( [ 'traditional.jpg' ] );
+		} );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toBe(
+			'Uploading — traditional.jpg'
+		);
+	} );
+
+	it( 'shows batch count for non-CSM uploads', () => {
+		mockQueue( [] );
+		act( () => {
+			addFiles( [ 'a.jpg', 'b.jpg', 'c.jpg' ] );
+		} );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toMatch( /1 of 3/ );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toMatch( /a\.jpg/ );
+	} );
+
+	it( 'shows a completion notice and then removes it when uploads finish', () => {
+		jest.useFakeTimers();
+		try {
+			mockQueue( [] );
+			act( () => {
+				addFiles( [ 'a.jpg' ] );
+			} );
+			render( <UploadProgressSnackbar /> );
+			expect( mockCreateNotice ).toHaveBeenCalled();
+			mockCreateNotice.mockClear();
+
+			act( () => {
+				advance( 1 );
+			} );
+
+			// Completion notice replaces the progress notice (same ID).
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Upload complete',
+				expect.objectContaining( {
+					id: 'upload-progress',
+					type: 'snackbar',
+					icon: expect.anything(),
+				} )
+			);
+			expect( mockRemoveNotice ).not.toHaveBeenCalled();
+
+			act( () => {
+				jest.runAllTimers();
+			} );
+
+			expect( mockRemoveNotice ).toHaveBeenCalledWith(
+				'upload-progress'
+			);
+		} finally {
+			jest.useRealTimers();
+		}
+	} );
+
+	it( 'middle-truncates a long filename while keeping the extension', () => {
+		const longName =
+			'a-really-long-uuid-like-filename-1234567890-abcdefghij.jpg';
+		mockQueue( [ makeItem( '1', longName ) ] );
+		render( <UploadProgressSnackbar /> );
+		const content = mockCreateNotice.mock.calls[ 0 ][ 1 ];
+		// Truncated: shorter than the original, marked with an ellipsis, and the
+		// extension is still visible.
+		expect( content ).toContain( '…' );
+		expect( content ).not.toContain( longName );
+		expect( content ).toMatch( /\.jpg$/ );
+	} );
+
+	it( 'does not truncate a short filename', () => {
+		mockQueue( [ makeItem( '1', 'photo.jpg' ) ] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice.mock.calls[ 0 ][ 1 ] ).toBe(
+			'Uploading — photo.jpg'
+		);
+	} );
+
+	it( 'includes a spinner icon on the in-progress notice', () => {
+		mockQueue( [ makeItem( '1', 'photo.jpg' ) ] );
+		render( <UploadProgressSnackbar /> );
+		expect( mockCreateNotice ).toHaveBeenCalledWith(
+			'info',
+			expect.any( String ),
+			expect.objectContaining( {
+				icon: expect.anything(),
+			} )
+		);
+	} );
+} );

package/src/components/upload-progress-snackbar/tracker.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * A minimal in-memory tracker for in-flight media uploads that happen outside
+ * the `@wordpress/upload-media` store (i.e. the traditional / non-CSM upload
+ * path). The editor's `mediaUpload` wrapper writes to it; the
+ * `UploadProgressSnackbar` reads from it.
+ *
+ * State shape: { total, completed, pending: string[] }
+ * - `total`: total files registered in the current session.
+ * - `completed`: files that have finished (succeeded OR errored).
+ * - `pending`: remaining filenames in submission order.
+ *
+ * The tracker holds at most one "session" at a time — if a new batch starts
+ * while one is in progress, its files are appended to the existing session.
+ */
+
+let state = null;
+const listeners = new Set();
+
+function notify() {
+	listeners.forEach( ( listener ) => listener() );
+}
+
+/**
+ * Registers a new batch of files that have started uploading.
+ *
+ * @param {string[]} filenames Filenames in submission order.
+ */
+export function addFiles( filenames ) {
+	if ( ! filenames.length ) {
+		return;
+	}
+	if ( ! state ) {
+		state = { total: 0, completed: 0, pending: [] };
+	}
+	state = {
+		total: state.total + filenames.length,
+		completed: state.completed,
+		pending: [ ...state.pending, ...filenames ],
+	};
+	notify();
+}
+
+/**
+ * Advances the tracker by a number of finished files (success or error).
+ *
+ * @param {number} count Number of files that finished since the last call.
+ */
+export function advance( count ) {
+	if ( ! state || count <= 0 ) {
+		return;
+	}
+	const completed = Math.min( state.total, state.completed + count );
+	const pending = state.pending.slice( count );
+	if ( completed >= state.total ) {
+		state = null;
+	} else {
+		state = { total: state.total, completed, pending };
+	}
+	notify();
+}
+
+/**
+ * Resets the tracker to its empty state.
+ *
+ * Test-only helper: `state` is a module-level singleton, so tests call this in
+ * `beforeEach` to isolate cases from one another. Not used in production -
+ * `advance` clears the state on its own once every file in a batch finishes.
+ */
+export function reset() {
+	if ( state === null ) {
+		return;
+	}
+	state = null;
+	notify();
+}
+
+/**
+ * Returns the current tracker state, or `null` when idle.
+ *
+ * @return {?{total: number, completed: number, pending: string[]}} Tracker state.
+ */
+export function getState() {
+	return state;
+}
+
+function subscribe( listener ) {
+	listeners.add( listener );
+	return () => {
+		listeners.delete( listener );
+	};
+}
+
+/**
+ * React hook that subscribes to the tracker.
+ *
+ * @return {?{total: number, completed: number, pending: string[]}} Tracker state.
+ */
+export function useTracker() {
+	return useSyncExternalStore( subscribe, getState, getState );
+}

package/src/dataviews/fields/revisions/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import type { BasePost } from '@wordpress/fields';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionsView from './revisions-view';
+
+const revisionsField: Field< BasePost > = {
+	id: 'revisions',
+	label: __( 'Revisions' ),
+	readOnly: true,
+	enableSorting: false,
+	render: RevisionsView,
+	isVisible: ( item ) => {
+		const revisionsCount =
+			item._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		const lastRevisionId =
+			item._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		return !! lastRevisionId && revisionsCount >= 2;
+	},
+};
+
+export default revisionsField;