@wordpress/editor 12.6.0 → 12.9.0

package/src/components/post-featured-image/index.js

@@ -16,8 +16,10 @@ import {
 	withNotices,
 	withFilters,
 } from '@wordpress/components';
+import { isBlobURL } from '@wordpress/blob';
+import { useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
 	MediaUpload,
 	MediaUploadCheck,
@@ -38,63 +40,94 @@ const DEFAULT_FEATURE_IMAGE_LABEL = __( 'Featured image' );
 const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
 const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove image' );
 
+const instructions = (
+	<p>
+		{ __(
+			'To edit the featured image, you need permission to upload media.'
+		) }
+	</p>
+);
+
+function getMediaDetails( media, postId ) {
+	if ( ! media ) {
+		return {};
+	}
+
+	const defaultSize = applyFilters(
+		'editor.PostFeaturedImage.imageSize',
+		'large',
+		media.id,
+		postId
+	);
+	if ( has( media, [ 'media_details', 'sizes', defaultSize ] ) ) {
+		return {
+			mediaWidth: media.media_details.sizes[ defaultSize ].width,
+			mediaHeight: media.media_details.sizes[ defaultSize ].height,
+			mediaSourceUrl: media.media_details.sizes[ defaultSize ].source_url,
+		};
+	}
+
+	// Use fallbackSize when defaultSize is not available.
+	const fallbackSize = applyFilters(
+		'editor.PostFeaturedImage.imageSize',
+		'thumbnail',
+		media.id,
+		postId
+	);
+	if ( has( media, [ 'media_details', 'sizes', fallbackSize ] ) ) {
+		return {
+			mediaWidth: media.media_details.sizes[ fallbackSize ].width,
+			mediaHeight: media.media_details.sizes[ fallbackSize ].height,
+			mediaSourceUrl:
+				media.media_details.sizes[ fallbackSize ].source_url,
+		};
+	}
+
+	// Use full image size when fallbackSize and defaultSize are not available.
+	return {
+		mediaWidth: media.media_details.width,
+		mediaHeight: media.media_details.height,
+		mediaSourceUrl: media.source_url,
+	};
+}
+
 function PostFeaturedImage( {
 	currentPostId,
 	featuredImageId,
 	onUpdateImage,
-	onDropImage,
 	onRemoveImage,
 	media,
 	postType,
 	noticeUI,
+	noticeOperations,
 } ) {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const mediaUpload = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().mediaUpload;
+	}, [] );
 	const postLabel = get( postType, [ 'labels' ], {} );
-	const instructions = (
-		<p>
-			{ __(
-				'To edit the featured image, you need permission to upload media.'
-			) }
-		</p>
+	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
+		media,
+		currentPostId
 	);
 
-	let mediaWidth, mediaHeight, mediaSourceUrl;
-	if ( media ) {
-		const mediaSize = applyFilters(
-			'editor.PostFeaturedImage.imageSize',
-			'post-thumbnail',
-			media.id,
-			currentPostId
-		);
-		if ( has( media, [ 'media_details', 'sizes', mediaSize ] ) ) {
-			// Use mediaSize when available.
-			mediaWidth = media.media_details.sizes[ mediaSize ].width;
-			mediaHeight = media.media_details.sizes[ mediaSize ].height;
-			mediaSourceUrl = media.media_details.sizes[ mediaSize ].source_url;
-		} else {
-			// Get fallbackMediaSize if mediaSize is not available.
-			const fallbackMediaSize = applyFilters(
-				'editor.PostFeaturedImage.imageSize',
-				'thumbnail',
-				media.id,
-				currentPostId
-			);
-			if (
-				has( media, [ 'media_details', 'sizes', fallbackMediaSize ] )
-			) {
-				// Use fallbackMediaSize when mediaSize is not available.
-				mediaWidth =
-					media.media_details.sizes[ fallbackMediaSize ].width;
-				mediaHeight =
-					media.media_details.sizes[ fallbackMediaSize ].height;
-				mediaSourceUrl =
-					media.media_details.sizes[ fallbackMediaSize ].source_url;
-			} else {
-				// Use full image size when mediaFallbackSize and mediaSize are not available.
-				mediaWidth = media.media_details.width;
-				mediaHeight = media.media_details.height;
-				mediaSourceUrl = media.source_url;
-			}
-		}
+	function onDropFiles( filesList ) {
+		mediaUpload( {
+			allowedTypes: [ 'image' ],
+			filesList,
+			onFileChange( [ image ] ) {
+				if ( isBlobURL( image?.url ) ) {
+					setIsLoading( true );
+					return;
+				}
+				onUpdateImage( image );
+				setIsLoading( false );
+			},
+			onError( message ) {
+				noticeOperations.removeAllNotices();
+				noticeOperations.createErrorNotice( message );
+			},
+		} );
 	}
 
 	return (
@@ -165,40 +198,40 @@ function PostFeaturedImage( {
 											/>
 										</ResponsiveWrapper>
 									) }
-									{ !! featuredImageId && ! media && (
-										<Spinner />
-									) }
+									{ isLoading && <Spinner /> }
 									{ ! featuredImageId &&
+										! isLoading &&
 										( postLabel.set_featured_image ||
 											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
 								</Button>
-								<DropZone onFilesDrop={ onDropImage } />
+								<DropZone onFilesDrop={ onDropFiles } />
 							</div>
 						) }
 						value={ featuredImageId }
 					/>
 				</MediaUploadCheck>
-				{ !! featuredImageId && media && ! media.isLoading && (
-					<MediaUploadCheck>
-						<MediaUpload
-							title={
-								postLabel.featured_image ||
-								DEFAULT_FEATURE_IMAGE_LABEL
-							}
-							onSelect={ onUpdateImage }
-							unstableFeaturedImageFlow
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							modalClass="editor-post-featured-image__media-modal"
-							render={ ( { open } ) => (
-								<Button onClick={ open } variant="secondary">
-									{ __( 'Replace Image' ) }
-								</Button>
-							) }
-						/>
-					</MediaUploadCheck>
-				) }
 				{ !! featuredImageId && (
 					<MediaUploadCheck>
+						{ media && (
+							<MediaUpload
+								title={
+									postLabel.featured_image ||
+									DEFAULT_FEATURE_IMAGE_LABEL
+								}
+								onSelect={ onUpdateImage }
+								unstableFeaturedImageFlow
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								modalClass="editor-post-featured-image__media-modal"
+								render={ ( { open } ) => (
+									<Button
+										onClick={ open }
+										variant="secondary"
+									>
+										{ __( 'Replace Image' ) }
+									</Button>
+								) }
+							/>
+						) }
 						<Button
 							onClick={ onRemoveImage }
 							variant="link"

package/src/components/post-saved-state/style.scss

@@ -33,3 +33,12 @@
 		}
 	}
 }
+
+// Overwrite rules from Button component packages/components/src/button/style.scss
+.editor-post-save-draft.has-text.has-icon svg {
+	margin-right: 0;
+}
+
+:root[dir="rtl"] .editor-post-saved-state.has-text.has-icon {
+	justify-content: right;
+}

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

@@ -3,8 +3,8 @@
  */
 import { __experimentalGetSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { DateTimePicker } from '@wordpress/components';
-import { useRef, useState, useMemo } from '@wordpress/element';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -21,7 +21,7 @@ function getDayOfTheMonth( date = new Date(), firstDay = true ) {
 	).toISOString();
 }
 
-export default function PostSchedule() {
+export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -61,7 +61,6 @@ export default function PostSchedule() {
 		[ eventsByPostType ]
 	);
 
-	const ref = useRef();
 	const settings = __experimentalGetSettings();
 
 	// To know if the current timezone is a 12 hour time with look for "a" in the time format
@@ -75,20 +74,14 @@ export default function PostSchedule() {
 			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
 
-	function onChange( newDate ) {
-		onUpdateDate( newDate );
-		const { ownerDocument } = ref.current;
-		ownerDocument.activeElement.blur();
-	}
-
 	return (
-		<DateTimePicker
-			ref={ ref }
+		<PublishDateTimePicker
 			currentDate={ postDate }
-			onChange={ onChange }
+			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
 			onMonthPreviewed={ setPreviewedMonth }
+			onClose={ onClose }
 		/>
 	);
 }

package/src/components/post-slug/test/index.js

@@ -15,11 +15,11 @@ describe( 'PostSlug', () => {
 
 			wrapper.find( 'input' ).simulate( 'change', {
 				target: {
-					value: 'single-post',
+					value: 'single',
 				},
 			} );
 
-			expect( wrapper.state().editedSlug ).toEqual( 'single-post' );
+			expect( wrapper.state().editedSlug ).toEqual( 'single' );
 		} );
 
 		it( 'should update slug', () => {
@@ -30,11 +30,11 @@ describe( 'PostSlug', () => {
 
 			wrapper.find( 'input' ).simulate( 'blur', {
 				target: {
-					value: 'single-post',
+					value: 'single',
 				},
 			} );
 
-			expect( onUpdateSlug ).toHaveBeenCalledWith( 'single-post' );
+			expect( onUpdateSlug ).toHaveBeenCalledWith( 'single' );
 		} );
 	} );
 } );

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

@@ -177,7 +177,7 @@ function FlatTermSelector( { slug } ) {
 	// while core data makes REST API requests.
 	useEffect( () => {
 		if ( hasResolvedTerms ) {
-			const newValues = terms.map( ( term ) =>
+			const newValues = ( terms ?? [] ).map( ( term ) =>
 				unescapeString( term.name )
 			);
 
@@ -202,7 +202,10 @@ function FlatTermSelector( { slug } ) {
 	}
 
 	function onChange( termNames ) {
-		const availableTerms = [ ...terms, ...( searchResults ?? [] ) ];
+		const availableTerms = [
+			...( terms ?? [] ),
+			...( searchResults ?? [] ),
+		];
 		const uniqueTerms = uniqBy( termNames, ( term ) => term.toLowerCase() );
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>

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

@@ -28,7 +28,9 @@ export function PostTaxonomies( {
 	);
 	const visibleTaxonomies = filter(
 		availableTaxonomies,
-		( taxonomy ) => taxonomy.visibility.show_ui
+		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
+		// https://github.com/WordPress/gutenberg/issues/40326
+		( taxonomy ) => taxonomy.visibility?.show_ui
 	);
 	return visibleTaxonomies.map( ( taxonomy ) => {
 		const TaxonomyComponent = taxonomy.hierarchical

package/src/components/post-text-editor/index.js

@@ -7,7 +7,7 @@ import Textarea from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
@@ -29,6 +29,7 @@ export default function PostTextEditor() {
 	const [ value, setValue ] = useState( postContent );
 	const [ isDirty, setIsDirty ] = useState( false );
 	const instanceId = useInstanceId( PostTextEditor );
+	const valueRef = useRef();
 
 	if ( ! isDirty && value !== postContent ) {
 		setValue( postContent );
@@ -50,6 +51,7 @@ export default function PostTextEditor() {
 		editPost( { content: newValue } );
 		setValue( newValue );
 		setIsDirty( true );
+		valueRef.current = newValue;
 	};
 
 	/**
@@ -65,6 +67,16 @@ export default function PostTextEditor() {
 		}
 	};
 
+	// Ensure changes aren't lost when component unmounts.
+	useEffect( () => {
+		return () => {
+			if ( valueRef.current ) {
+				const blocks = parse( valueRef.current );
+				resetEditorBlocks( blocks );
+			}
+		};
+	}, [] );
+
 	return (
 		<>
 			<VisuallyHidden