@wordpress/editor 14.48.0 → 14.48.1

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/private-apis.js

@@ -29,6 +29,7 @@ import GlobalStylesUIWrapper from './components/global-styles';
 import { StyleBookPreview } from './components/style-book';
 import { useGlobalStyles, useStyle } from './components/global-styles/hooks';
 import { GlobalStylesActionMenu } from './components/global-styles/menu';
+import UploadProgressSnackbar from './components/upload-progress-snackbar';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -48,6 +49,7 @@ lock( privateApis, {
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,
+	UploadProgressSnackbar,
 	registerCoreBlockBindingsSources,
 	getTemplateInfo,
 	// Global Styles

package/src/store/selectors.js

@@ -11,7 +11,6 @@ import { isInTheFuture, getDate } from '@wordpress/date';
 import { addQueryArgs, cleanForSlug } from '@wordpress/url';
 import { createSelector, createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { Platform } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -524,8 +523,7 @@ export function isEditedPostSaveable( state ) {
 	return (
 		!! getEditedPostAttribute( state, 'title' ) ||
 		!! getEditedPostAttribute( state, 'excerpt' ) ||
-		! isEditedPostEmpty( state ) ||
-		Platform.OS === 'native'
+		! isEditedPostEmpty( state )
 	);
 }
 

package/src/style.scss

@@ -68,6 +68,7 @@
 @use "./components/styles-canvas/style.scss" as *;
 @use "./components/table-of-contents/style.scss" as *;
 @use "./components/text-editor/style.scss" as *;
+@use "./components/upload-progress-snackbar/style.scss" as *;
 @use "./components/visual-editor/style.scss" as *;
 @use "./dataviews/fields/content-preview/style.scss" as *;
 @use "./hooks/push-changes-to-global-styles/style.scss" as *;

package/src/utils/media-upload/index.js

@@ -15,6 +15,10 @@ import { isClientSideMediaSupported } from '@wordpress/upload-media';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import {
+	addFiles as trackStart,
+	advance as trackAdvance,
+} from '../../components/upload-progress-snackbar/tracker';
 
 const noop = () => {};
 
@@ -78,6 +82,18 @@ export default function mediaUpload( {
 
 	const postData = currentPostId ? { post: currentPostId } : {};
 
+	// Track this batch for the upload progress snackbar. Only applies to the
+	// non-CSM path — when CSM is enabled, the block-editor provider intercepts
+	// mediaUpload and dispatches to the upload-media store, so this wrapper is
+	// not called.
+	if ( ! isClientSideMediaActive ) {
+		const trackingFiles = Array.from( filesList ).map(
+			( f ) => f?.name || ''
+		);
+		trackStart( trackingFiles );
+	}
+	let lastCompletedCount = 0;
+
 	uploadMedia( {
 		allowedTypes,
 		filesList,
@@ -106,6 +122,15 @@ export default function mediaUpload( {
 			) {
 				clearSaveLock();
 			}
+
+			// Advance the snackbar tracker for newly-completed files.
+			if ( ! isClientSideMediaActive ) {
+				const completedCount = entityFiles.length;
+				if ( completedCount > lastCompletedCount ) {
+					trackAdvance( completedCount - lastCompletedCount );
+					lastCompletedCount = completedCount;
+				}
+			}
 		},
 		onSuccess,
 		additionalData: {
@@ -116,6 +141,8 @@ export default function mediaUpload( {
 		onError: ( { message } ) => {
 			if ( ! isClientSideMediaActive ) {
 				clearSaveLock();
+				// Failed files still count as "done" for the snackbar.
+				trackAdvance( 1 );
 			}
 			onError( message );
 		},

package/src/components/commands/index.native.js

@@ -1,2 +0,0 @@
-// Commands are disabled in the mobile native version.
-export default function useCommands() {}

package/src/components/deprecated.native.js

@@ -1,47 +0,0 @@
-// Block Creation Components.
-/**
- * WordPress dependencies
- */
-import {
-	BlockControls,
-	BlockEdit,
-	BlockFormatControls,
-	DefaultBlockAppender,
-	createCustomColorsHOC,
-	getColorClassName,
-	getColorObjectByAttributeValues,
-	getColorObjectByColorValue,
-	InspectorControls,
-	PlainText,
-	RichText,
-	RichTextShortcut,
-	RichTextToolbarButton,
-	RichTextInserterItem,
-	__unstableRichTextInputEvent,
-	MediaPlaceholder,
-	URLInput,
-	withColors,
-	withFontSizes,
-} from '@wordpress/block-editor';
-
-export {
-	BlockControls,
-	BlockEdit,
-	BlockFormatControls,
-	DefaultBlockAppender,
-	createCustomColorsHOC,
-	getColorClassName,
-	getColorObjectByAttributeValues,
-	getColorObjectByColorValue,
-	InspectorControls,
-	PlainText,
-	RichText,
-	RichTextShortcut,
-	RichTextToolbarButton,
-	RichTextInserterItem,
-	__unstableRichTextInputEvent,
-	MediaPlaceholder,
-	URLInput,
-	withColors,
-	withFontSizes,
-};

package/src/components/editor-help/add-blocks.native.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
-
-const AddBlocks = () => {
-	return (
-		<>
-			<HelpDetailImage
-				source={ require( './images/add-light.png' ) }
-				sourceDarkMode={ require( './images/add-dark.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<HelpDetailBodyText
-					text={ __(
-						'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left.'
-					) }
-				/>
-				<HelpDetailBodyText
-					text={ __(
-						'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'
-					) }
-				/>
-			</View>
-		</>
-	);
-};
-
-export default AddBlocks;

package/src/components/editor-help/customize-blocks.native.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
-
-const CustomizeBlocks = () => {
-	return (
-		<>
-			<HelpDetailImage
-				source={ require( './images/settings-light.png' ) }
-				sourceDarkMode={ require( './images/settings-dark.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<HelpDetailBodyText
-					text={ __(
-						'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
-					) }
-				/>
-				<HelpDetailBodyText
-					text={ __(
-						'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'
-					) }
-				/>
-			</View>
-		</>
-	);
-};
-
-export default CustomizeBlocks;

package/src/components/editor-help/help-detail-navigation-screen.native.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	ScrollView,
-	StyleSheet,
-	TouchableWithoutFeedback,
-	View,
-} from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { BottomSheet, BottomSheetContext } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const HelpDetailNavigationScreen = ( { content, label } ) => {
-	const navigation = useNavigation();
-
-	const { listProps } = useContext( BottomSheetContext );
-	const contentContainerStyle = StyleSheet.flatten(
-		listProps.contentContainerStyle
-	);
-
-	return (
-		<BottomSheet.NavigationScreen isScrollable fullScreen>
-			<View style={ styles.container }>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton
-						onPress={ navigation.goBack }
-					/>
-					<BottomSheet.NavBar.Heading>
-						{ label }
-					</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<ScrollView
-					{ ...listProps }
-					contentContainerStyle={ {
-						...contentContainerStyle,
-						paddingBottom: Math.max(
-							listProps.safeAreaBottomInset,
-							contentContainerStyle.paddingBottom
-						),
-						/**
-						 * Remove margin set via `hideHeader`. Combining a header
-						 * and navigation in this bottom sheet is at odds with the
-						 * current `BottomSheet` implementation.
-						 */
-						marginTop: 0,
-					} }
-				>
-					<TouchableWithoutFeedback accessible={ false }>
-						<View>{ content }</View>
-					</TouchableWithoutFeedback>
-				</ScrollView>
-			</View>
-		</BottomSheet.NavigationScreen>
-	);
-};
-
-export default HelpDetailNavigationScreen;

package/src/components/editor-help/help-get-support-button.native.js

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { Pressable, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const HelpGetSupportButton = ( { onPress, title } ) => {
-	const buttonStyle = usePreferredColorSchemeStyle(
-		styles.button,
-		styles.buttonDark
-	);
-
-	const textStyle = usePreferredColorSchemeStyle(
-		styles.buttonText,
-		styles.buttonTextDark
-	);
-
-	return (
-		<Pressable
-			style={ buttonStyle }
-			onPress={ onPress }
-			accessibilityRole="button"
-		>
-			<Text style={ textStyle }>{ title }</Text>
-		</Pressable>
-	);
-};
-
-export default HelpGetSupportButton;

package/src/components/editor-help/help-section-title.native.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const HelpSectionTitle = ( { children } ) => {
-	const helpSectionTitle = usePreferredColorSchemeStyle(
-		styles.helpSectionTitle,
-		styles.helpSectionTitleDark
-	);
-
-	return (
-		<View style={ styles.helpSectionTitleContainer }>
-			<Text style={ helpSectionTitle }>{ children }</Text>
-		</View>
-	);
-};
-
-export default HelpSectionTitle;