@wordpress/editor 14.48.0 → 14.48.1

package/src/components/provider/test/use-network-reconnect.js

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useNetworkReconnect from '../use-network-reconnect';
+
+const mockPauseQueue = jest.fn();
+const mockResumeQueue = jest.fn();
+
+jest.mock( '@wordpress/data', () => ( {
+	useRegistry: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/upload-media', () => ( {
+	store: 'core/upload-media',
+} ) );
+
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: jest.fn( () => ( {
+		pauseQueue: mockPauseQueue,
+		resumeQueue: mockResumeQueue,
+	} ) ),
+} ) );
+
+describe( 'useNetworkReconnect', () => {
+	const originalAddEventListener = window.addEventListener;
+	const originalRemoveEventListener = window.removeEventListener;
+	let listeners;
+
+	beforeEach( () => {
+		mockPauseQueue.mockClear();
+		mockResumeQueue.mockClear();
+		listeners = {};
+		window.addEventListener = jest.fn( ( event, cb ) => {
+			listeners[ event ] = cb;
+		} );
+		window.removeEventListener = jest.fn( ( event ) => {
+			delete listeners[ event ];
+		} );
+		useRegistry.mockReturnValue( {
+			dispatch: jest.fn( () => ( {} ) ),
+		} );
+	} );
+
+	afterEach( () => {
+		window.addEventListener = originalAddEventListener;
+		window.removeEventListener = originalRemoveEventListener;
+		delete window.__clientSideMediaProcessing;
+	} );
+
+	it( 'does nothing when client-side media processing is disabled', () => {
+		window.__clientSideMediaProcessing = false;
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).not.toHaveBeenCalled();
+	} );
+
+	it( 'does nothing when the flag is undefined', () => {
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).not.toHaveBeenCalled();
+	} );
+
+	it( 'registers offline and online listeners when enabled', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).toHaveBeenCalledWith(
+			'offline',
+			expect.any( Function )
+		);
+		expect( window.addEventListener ).toHaveBeenCalledWith(
+			'online',
+			expect.any( Function )
+		);
+	} );
+
+	it( 'pauses the queue when the offline event fires', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.offline();
+
+		expect( mockPauseQueue ).toHaveBeenCalledTimes( 1 );
+		expect( mockResumeQueue ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resumes the queue when the online event fires', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.online();
+
+		expect( mockResumeQueue ).toHaveBeenCalledTimes( 1 );
+		expect( mockPauseQueue ).not.toHaveBeenCalled();
+	} );
+
+	it( 'handles multiple offline/online cycles', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.offline();
+		listeners.online();
+		listeners.offline();
+		listeners.online();
+
+		expect( mockPauseQueue ).toHaveBeenCalledTimes( 2 );
+		expect( mockResumeQueue ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'removes the listeners on unmount', () => {
+		window.__clientSideMediaProcessing = true;
+		const { unmount } = renderHook( () => useNetworkReconnect() );
+
+		unmount();
+
+		expect( window.removeEventListener ).toHaveBeenCalledWith(
+			'offline',
+			expect.any( Function )
+		);
+		expect( window.removeEventListener ).toHaveBeenCalledWith(
+			'online',
+			expect.any( Function )
+		);
+		expect( listeners.offline ).toBeUndefined();
+		expect( listeners.online ).toBeUndefined();
+	} );
+} );

package/src/components/provider/use-network-reconnect.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
+import { store as uploadStore } from '@wordpress/upload-media';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * A hook that pauses the media upload queue when the browser goes offline
+ * and resumes it when connectivity is restored.
+ *
+ * Only active when client-side media processing is enabled.
+ */
+export default function useNetworkReconnect() {
+	const isEnabled = window.__clientSideMediaProcessing;
+	const registry = useRegistry();
+
+	useEffect( () => {
+		if ( ! isEnabled ) {
+			return;
+		}
+
+		const handleOffline = () => {
+			unlock( registry.dispatch( uploadStore ) ).pauseQueue();
+		};
+
+		const handleOnline = () => {
+			unlock( registry.dispatch( uploadStore ) ).resumeQueue();
+		};
+
+		window.addEventListener( 'offline', handleOffline );
+		window.addEventListener( 'online', handleOnline );
+
+		return () => {
+			window.removeEventListener( 'offline', handleOffline );
+			window.removeEventListener( 'online', handleOnline );
+		};
+	}, [ isEnabled, registry ] );
+}

package/src/components/revision-fields-diff/index.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { diffWords } from 'diff/lib/diff/word';
+/*
+ * `diffWordsWithSpace` preserves the v4-style per-word output. v6+
+ * stopped treating whitespace as a token in `diffWords`, which coalesces
+ * adjacent word changes into a single removed/added pair.
+ */
+import { diffWordsWithSpace } from 'diff';
 
 /**
  * WordPress dependencies
@@ -71,7 +76,7 @@ export default function RevisionFieldsDiffPanel() {
 				continue;
 			}
 
-			result[ key ] = diffWords( prevStr, revStr );
+			result[ key ] = diffWordsWithSpace( prevStr, revStr );
 		}
 
 		if ( Object.keys( result ).length === 0 ) {

package/src/components/sidebar/index.js

@@ -6,13 +6,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Platform,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
+import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { isRTL, __, _x } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -47,10 +41,7 @@ import {
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
-	web: true,
-	native: false,
-} );
+const SIDEBAR_ACTIVE_BY_DEFAULT = true;
 
 const SidebarContent = ( {
 	tabName,

package/src/components/template-actions-panel/block-theme-content.js

@@ -17,6 +17,7 @@ import {
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 // eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
@@ -127,7 +128,15 @@ export default function TemplateActionsPanelContent() {
 								tabIndex={ 0 }
 								aria-label={ tooltipText }
 								onClick={ () => setIsSwapModalOpen( true ) }
-								onKeyPress={ () => setIsSwapModalOpen( true ) }
+								onKeyDown={ ( event ) => {
+									if (
+										event.keyCode === ENTER ||
+										event.keyCode === SPACE
+									) {
+										event.preventDefault();
+										setIsSwapModalOpen( true );
+									}
+								} }
 							>
 								{ previewContent }
 							</div>

package/src/components/upload-progress-snackbar/README.md

@@ -0,0 +1,26 @@
+# UploadProgressSnackbar
+
+`UploadProgressSnackbar` manages a snackbar notice that shows media upload progress. It creates and updates a notice via the notices store, so the snackbar positions and stacks with every other snackbar in the editor.
+
+The component reads from two sources so it works for both upload paths:
+
+-   **`@wordpress/upload-media`** — the client-side media processing (CSM) path. Only counts original user-uploaded files, ignoring generated subsizes and thumbnails (items with a `parentId`).
+-   **Editor-local tracker** — populated by the editor's `mediaUpload` wrapper for the traditional (non-CSM) upload path (e.g. Safari, or when a filter disables CSM).
+
+While uploads are in progress the snackbar shows a spinner to the left of the text. When the last upload finishes, the spinner is replaced with a green checkmark for a brief moment before the snackbar dismisses.
+
+The component renders nothing itself — it is a controller that manages a notice.
+
+## Usage
+
+```jsx
+import { UploadProgressSnackbar } from '@wordpress/editor';
+
+// Mount anywhere in the editor — it doesn't render DOM, just manages a notice.
+<UploadProgressSnackbar />
+```
+
+## Accessibility
+
+-   The component calls `wp.a11y.speak()` once when uploads start and once when they complete, avoiding per-tick chatter.
+-   The snackbar is created with `speak: false` to prevent the notices store from re-announcing on every text update.

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