@wordpress/editor 14.6.0 → 14.7.1-next.5368f64a9.0

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -17,7 +17,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
+import { fetchMedia } from './media-util';
 
 function flattenBlocks( blocks ) {
 	const result = [];
@@ -30,7 +30,53 @@ function flattenBlocks( blocks ) {
 	return result;
 }
 
-function Image( block ) {
+/**
+ * Determine whether a block has external media.
+ *
+ * Different blocks use different attribute names (and potentially
+ * different logic as well) in determining whether the media is
+ * present, and whether it's external.
+ *
+ * @param {{name: string, attributes: Object}} block The block.
+ * @return {boolean?} Whether the block has external media
+ */
+function hasExternalMedia( block ) {
+	if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+		return block.attributes.url && ! block.attributes.id;
+	}
+
+	if ( block.name === 'core/media-text' ) {
+		return block.attributes.mediaUrl && ! block.attributes.mediaId;
+	}
+
+	return undefined;
+}
+
+/**
+ * Retrieve media info from a block.
+ *
+ * Different blocks use different attribute names, so we need this
+ * function to normalize things into a consistent naming scheme.
+ *
+ * @param {{name: string, attributes: Object}} block The block.
+ * @return {{url: ?string, alt: ?string, id: ?number}} The media info for the block.
+ */
+function getMediaInfo( block ) {
+	if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+		const { url, alt, id } = block.attributes;
+		return { url, alt, id };
+	}
+
+	if ( block.name === 'core/media-text' ) {
+		const { mediaUrl: url, mediaAlt: alt, mediaId: id } = block.attributes;
+		return { url, alt, id };
+	}
+
+	return {};
+}
+
+// Image component to represent a single image in the upload dialog.
+function Image( { clientId, alt, url } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 	return (
 		<motion.img
@@ -38,17 +84,17 @@ function Image( block ) {
 			role="button"
 			aria-label={ __( 'Select image block.' ) }
 			onClick={ () => {
-				selectBlock( block.clientId );
+				selectBlock( clientId );
 			} }
 			onKeyDown={ ( event ) => {
 				if ( event.key === 'Enter' || event.key === ' ' ) {
-					selectBlock( block.clientId );
+					selectBlock( clientId );
 					event.preventDefault();
 				}
 			} }
-			key={ block.clientId }
-			alt={ block.attributes.alt }
-			src={ block.attributes.url }
+			key={ clientId }
+			alt={ alt }
+			src={ url }
 			animate={ { opacity: 1 } }
 			exit={ { opacity: 0, scale: 0 } }
 			style={ {
@@ -63,24 +109,25 @@ function Image( block ) {
 	);
 }
 
-export default function PostFormatPanel() {
+export default function MaybeUploadMediaPanel() {
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ isAnimating, setIsAnimating ] = useState( false );
+	const [ hadUploadError, setHadUploadError ] = useState( false );
 	const { editorBlocks, mediaUpload } = useSelect(
 		( select ) => ( {
-			editorBlocks: select( editorStore ).getEditorBlocks(),
+			editorBlocks: select( blockEditorStore ).getBlocks(),
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[]
 	);
-	const externalImages = flattenBlocks( editorBlocks ).filter(
-		( block ) =>
-			block.name === 'core/image' &&
-			block.attributes.url &&
-			! block.attributes.id
+
+	// Get a list of blocks with external media.
+	const blocksWithExternalMedia = flattenBlocks( editorBlocks ).filter(
+		( block ) => hasExternalMedia( block )
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	if ( ! mediaUpload || ! externalImages.length ) {
+	if ( ! mediaUpload || ! blocksWithExternalMedia.length ) {
 		return null;
 	}
 
@@ -91,18 +138,51 @@ export default function PostFormatPanel() {
 		</span>,
 	];
 
+	/**
+	 * Update an individual block to point to newly-added library media.
+	 *
+	 * Different blocks use different attribute names, so we need this
+	 * function to ensure we modify the correct attributes for each type.
+	 *
+	 * @param {{name: string, attributes: Object}} block The block.
+	 * @param {{id: number, url: string}}          media Media library file info.
+	 */
+	function updateBlockWithUploadedMedia( block, media ) {
+		if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+			updateBlockAttributes( block.clientId, {
+				id: media.id,
+				url: media.url,
+			} );
+		}
+
+		if ( block.name === 'core/media-text' ) {
+			updateBlockAttributes( block.clientId, {
+				mediaId: media.id,
+				mediaUrl: media.url,
+			} );
+		}
+	}
+
+	// Handle fetching and uploading all external media in the post.
 	function uploadImages() {
 		setIsUploading( true );
-		Promise.all(
-			externalImages.map( ( image ) =>
-				window
-					.fetch(
-						image.attributes.url.includes( '?' )
-							? image.attributes.url
-							: image.attributes.url + '?'
-					)
-					.then( ( response ) => response.blob() )
-					.then(
+		setHadUploadError( false );
+
+		// Multiple blocks can be using the same URL, so we
+		// should ensure we only fetch and upload each of them once.
+		const mediaUrls = new Set(
+			blocksWithExternalMedia.map( ( block ) => {
+				const { url } = getMediaInfo( block );
+				return url;
+			} )
+		);
+
+		// Create an upload promise for each URL, that we can wait for in all
+		// blocks that make use of that media.
+		const uploadPromises = Object.fromEntries(
+			Object.entries( fetchMedia( [ ...mediaUrls ] ) ).map(
+				( [ url, filePromise ] ) => {
+					const uploadPromise = filePromise.then(
 						( blob ) =>
 							new Promise( ( resolve, reject ) => {
 								mediaUpload( {
@@ -112,19 +192,32 @@ export default function PostFormatPanel() {
 											return;
 										}
 
-										updateBlockAttributes( image.clientId, {
-											id: media.id,
-											url: media.url,
-										} );
-										resolve();
+										resolve( media );
 									},
 									onError() {
 										reject();
 									},
 								} );
 							} )
-					)
+					);
+
+					return [ url, uploadPromise ];
+				}
 			)
+		);
+
+		// Wait for all blocks to be updated with library media.
+		Promise.allSettled(
+			blocksWithExternalMedia.map( ( block ) => {
+				const { url } = getMediaInfo( block );
+
+				return uploadPromises[ url ]
+					.then( ( media ) =>
+						updateBlockWithUploadedMedia( block, media )
+					)
+					.then( () => setIsAnimating( true ) )
+					.catch( () => setHadUploadError( true ) );
+			} )
 		).finally( () => {
 			setIsUploading( false );
 		} );
@@ -144,19 +237,35 @@ export default function PostFormatPanel() {
 					gap: '8px',
 				} }
 			>
-				<AnimatePresence>
-					{ externalImages.map( ( image ) => {
-						return <Image key={ image.clientId } { ...image } />;
+				<AnimatePresence
+					onExitComplete={ () => setIsAnimating( false ) }
+				>
+					{ blocksWithExternalMedia.map( ( block ) => {
+						const { url, alt } = getMediaInfo( block );
+						return (
+							<Image
+								key={ block.clientId }
+								clientId={ block.clientId }
+								url={ url }
+								alt={ alt }
+							/>
+						);
 					} ) }
 				</AnimatePresence>
-				{ isUploading ? (
+				{ isUploading || isAnimating ? (
 					<Spinner />
 				) : (
-					<Button variant="primary" onClick={ uploadImages }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ uploadImages }
+					>
 						{ __( 'Upload' ) }
 					</Button>
 				) }
 			</div>
+			{ hadUploadError && <p>{ __( 'Upload failed, try again.' ) }</p> }
 		</PanelBody>
 	);
 }

package/src/components/post-publish-panel/media-util.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Generate a list of unique basenames given a list of URLs.
+ *
+ * We want all basenames to be unique, since sometimes the extension
+ * doesn't reflect the mime type, and may end up getting changed by
+ * the server, on upload.
+ *
+ * @param {string[]} urls The list of URLs
+ * @return {Record< string, string >} A URL => basename record.
+ */
+export function generateUniqueBasenames( urls ) {
+	const basenames = new Set();
+
+	return Object.fromEntries(
+		urls.map( ( url ) => {
+			// We prefer to match the remote filename, if possible.
+			const filename = getFilename( url );
+			let basename = '';
+
+			if ( filename ) {
+				const parts = filename.split( '.' );
+				if ( parts.length > 1 ) {
+					// Assume the last part is the extension.
+					parts.pop();
+				}
+				basename = parts.join( '.' );
+			}
+
+			if ( ! basename ) {
+				// It looks like we don't have a basename, so let's use a UUID.
+				basename = uuid();
+			}
+
+			if ( basenames.has( basename ) ) {
+				// Append a UUID to deduplicate the basename.
+				// The server will try to deduplicate on its own if we don't do this,
+				// but it may run into a race condition
+				// (see https://github.com/WordPress/gutenberg/issues/64899).
+				// Deduplicating the filenames before uploading is safer.
+				basename = `${ basename }-${ uuid() }`;
+			}
+
+			basenames.add( basename );
+
+			return [ url, basename ];
+		} )
+	);
+}
+
+/**
+ * Fetch a list of URLs, turning those into promises for files with
+ * unique filenames.
+ *
+ * @param {string[]} urls The list of URLs
+ * @return {Record< string, Promise< File > >} A URL => File promise record.
+ */
+export function fetchMedia( urls ) {
+	return Object.fromEntries(
+		Object.entries( generateUniqueBasenames( urls ) ).map(
+			( [ url, basename ] ) => {
+				const filePromise = window
+					.fetch( url.includes( '?' ) ? url : url + '?' )
+					.then( ( response ) => response.blob() )
+					.then( ( blob ) => {
+						// The server will reject the upload if it doesn't have an extension,
+						// even though it'll rewrite the file name to match the mime type.
+						// Here we provide it with a safe extension to get it past that check.
+						return new File( [ blob ], `${ basename }.png`, {
+							type: blob.type,
+						} );
+					} );
+
+				return [ url, filePromise ];
+			}
+		)
+	);
+}

package/src/components/post-publish-panel/style.scss

@@ -37,8 +37,9 @@
 
 .components-site-icon {
 	border: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-right: $grid-unit-15;
+	flex-shrink: 0;
 
 	// Same size as in the Site menu.
 	height: 36px;
@@ -54,6 +55,7 @@
 	display: block;
 	color: $gray-700;
 	font-size: $helptext-font-size;
+	word-break: break-word;
 }
 
 .editor-post-publish-panel__header-publish-button,

package/src/components/post-publish-panel/test/media-util.js

@@ -0,0 +1,118 @@
+/**
+ * Internal dependencies
+ */
+import { generateUniqueBasenames } from '../media-util';
+
+describe( 'generateUniqueBasenames', () => {
+	it( 'should prefer the original basenames', () => {
+		const urls = [
+			'https://example.com/images/image1.jpg',
+			'https://example.com/images/image2.jpg',
+			'https://example.com/images/image3.jpg',
+			'https://example.com/images/image4.jpg',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1.jpg': 'image1',
+			'https://example.com/images/image2.jpg': 'image2',
+			'https://example.com/images/image3.jpg': 'image3',
+			'https://example.com/images/image4.jpg': 'image4',
+		} );
+	} );
+
+	it( 'should handle filenames with no extensions', () => {
+		const urls = [
+			'https://example.com/images/image1',
+			'https://example.com/images/image2',
+			'https://example.com/images/image3',
+			'https://example.com/images/image4',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1': 'image1',
+			'https://example.com/images/image2': 'image2',
+			'https://example.com/images/image3': 'image3',
+			'https://example.com/images/image4': 'image4',
+		} );
+	} );
+
+	it( 'should handle query parameters correctly', () => {
+		const urls = [
+			'https://example.com/images/image1.jpg?a=notafile.npg',
+			'https://example.com/images/image2.jpg?a=notafile.npg',
+			'https://example.com/images/image3.jpg?a=notafile.npg',
+			'https://example.com/images/image4.jpg?a=notafile.npg',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1.jpg?a=notafile.npg': 'image1',
+			'https://example.com/images/image2.jpg?a=notafile.npg': 'image2',
+			'https://example.com/images/image3.jpg?a=notafile.npg': 'image3',
+			'https://example.com/images/image4.jpg?a=notafile.npg': 'image4',
+		} );
+	} );
+
+	it( 'should deduplicate identical filenames', () => {
+		const urls = [
+			'https://example.com/image1/image.jpg',
+			'https://example.com/image2/image.jpg',
+			'https://example.com/image3/image.jpg',
+			'https://example.com/image4/image.jpg',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate identical basenames', () => {
+		const urls = [
+			'https://example.com/images/image.jpg',
+			'https://example.com/images/image.png',
+			'https://example.com/images/image.webp',
+			'https://example.com/images/image.avif',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate filenames without extensions', () => {
+		const urls = [
+			'https://example.com/image1/image',
+			'https://example.com/image2/image',
+			'https://example.com/image3/image',
+			'https://example.com/image4/image',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate paths with no filename', () => {
+		const urls = [
+			'https://example.com/image1/dir/',
+			'https://example.com/image2/dir/',
+			'https://example.com/image3/dir/',
+			'https://example.com/image4/dir/',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+} );

package/src/components/post-status/index.js

@@ -171,7 +171,7 @@ export default function PostStatus() {
 					contentClassName="editor-change-status__content"
 					popoverProps={ popoverProps }
 					focusOnMount
-					renderToggle={ ( { onToggle } ) => (
+					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
 							variant="tertiary"
 							size="compact"
@@ -179,9 +179,10 @@ export default function PostStatus() {
 							icon={ postStatusesInfo[ status ]?.icon }
 							aria-label={ sprintf(
 								// translators: %s: Current post status.
-								__( 'Change post status: %s' ),
+								__( 'Change status: %s' ),
 								postStatusesInfo[ status ]?.label
 							) }
+							aria-expanded={ isOpen }
 						>
 							{ postStatusesInfo[ status ]?.label }
 						</Button>

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -428,6 +428,8 @@ export function HierarchicalTermSelector( { slug } ) {
 			{ ! loading && hasCreateAction && (
 				<FlexItem>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						onClick={ onToggleForm }
 						className="editor-post-taxonomies__hierarchical-terms-add"
 						aria-expanded={ showForm }

package/src/components/post-taxonomies/most-used-terms.js

@@ -62,6 +62,8 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 				{ terms.map( ( term ) => (
 					<li key={ term.id }>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="link"
 							onClick={ () => onSelect( term ) }
 						>

package/src/components/post-template/block-theme.js

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -43,6 +44,8 @@ export default function BlockThemeControl( { id } ) {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+
 	const { editedRecord: template, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_template',
@@ -75,6 +78,17 @@ export default function BlockThemeControl( { id } ) {
 				},
 		  ]
 		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
 	return (
 		<DropdownMenu
 			popoverProps={ POPOVER_PROPS }
@@ -99,15 +113,7 @@ export default function BlockThemeControl( { id } ) {
 										postType: 'wp_template',
 									} );
 									onClose();
-									createSuccessNotice(
-										__(
-											'Editing template. Changes made here affect all posts and pages that use the template.'
-										),
-										{
-											type: 'snackbar',
-											actions: notificationAction,
-										}
-									);
+									mayShowTemplateEditNotice();
 								} }
 							>
 								{ __( 'Edit template' ) }

package/src/components/post-template/classic-theme.js

@@ -177,6 +177,8 @@ function PostTemplateDropdownContent( { onClose } ) {
 			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="link"
 						onClick={ () => {
 							onNavigateToEntityRecord( {

package/src/components/post-title/index.js

@@ -15,7 +15,6 @@ import { pasteHandler } from '@wordpress/blocks';
 import {
 	__unstableUseRichText as useRichText,
 	create,
-	toHTMLString,
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
@@ -50,9 +49,35 @@ function PostTitle( _, forwardedRef ) {
 	const { clearSelectedBlock, insertBlocks, insertDefaultBlock } =
 		useDispatch( blockEditorStore );
 
-	function onChange( value ) {
-		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
-	}
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
+		value: title,
+		onChange( newValue ) {
+			onUpdate( newValue.replace( REGEXP_NEWLINES, ' ' ) );
+		},
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: false,
+	} );
 
 	function onInsertBlockAfter( blocks ) {
 		insertBlocks( blocks, 0 );
@@ -130,49 +155,14 @@ function PostTitle( _, forwardedRef ) {
 				onInsertBlockAfter( content );
 			}
 		} else {
-			const value = {
-				...create( { html: title } ),
-				...selection,
-			};
-
 			// Strip HTML to avoid unwanted HTML being added to the title.
 			// In the majority of cases it is assumed that HTML in the title
 			// is undesirable.
 			const contentNoHTML = stripHTML( content );
-
-			const newValue = insert( value, create( { html: contentNoHTML } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-			setSelection( {
-				start: newValue.start,
-				end: newValue.end,
-			} );
+			onChange( insert( value, create( { html: contentNoHTML } ) ) );
 		}
 	}
 
-	const decodedPlaceholder =
-		decodeEntities( placeholder ) || __( 'Add title' );
-
-	const { ref: richTextRef } = useRichText( {
-		value: title,
-		onChange,
-		placeholder: decodedPlaceholder,
-		selectionStart: selection.start,
-		selectionEnd: selection.end,
-		onSelectionChange( newStart, newEnd ) {
-			setSelection( ( sel ) => {
-				const { start, end } = sel;
-				if ( start === newStart && end === newEnd ) {
-					return sel;
-				}
-				return {
-					start: newStart,
-					end: newEnd,
-				};
-			} );
-		},
-		__unstableDisableFormats: false,
-	} );
-
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
 	const className = clsx( DEFAULT_CLASSNAMES, {
@@ -192,7 +182,6 @@ function PostTitle( _, forwardedRef ) {
 				onFocus={ onSelect }
 				onBlur={ onUnselect }
 				onKeyDown={ onKeyDown }
-				onKeyPress={ onUnselect }
 				onPaste={ onPaste }
 			/>
 		</PostTypeSupportCheck>