@wordpress/editor 12.5.7 → 12.8.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-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-text-editor/index.js

@@ -51,6 +51,7 @@ export default function PostTextEditor() {
 		editPost( { content: newValue } );
 		setValue( newValue );
 		setIsDirty( true );
+		valueRef.current = newValue;
 	};
 
 	/**
@@ -66,15 +67,13 @@ export default function PostTextEditor() {
 		}
 	};
 
-	useEffect( () => {
-		valueRef.current = value;
-	}, [ value ] );
-
 	// Ensure changes aren't lost when component unmounts.
 	useEffect( () => {
 		return () => {
-			const blocks = parse( valueRef.current );
-			resetEditorBlocks( blocks );
+			if ( valueRef.current ) {
+				const blocks = parse( valueRef.current );
+				resetEditorBlocks( blocks );
+			}
 		};
 	}, [] );
 

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

@@ -7,7 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -27,7 +33,7 @@ import { store as editorStore } from '../../store';
  */
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
-export default function PostTitle() {
+function PostTitle( _, forwardedRef ) {
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
@@ -63,6 +69,12 @@ export default function PostTitle() {
 		};
 	}, [] );
 
+	useImperativeHandle( forwardedRef, () => ( {
+		focus: () => {
+			ref?.current?.focus();
+		},
+	} ) );
+
 	useEffect( () => {
 		if ( ! ref.current ) {
 			return;
@@ -219,3 +231,5 @@ export default function PostTitle() {
 	);
 	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 }
+
+export default forwardRef( PostTitle );

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

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
+	Button,
 } from '@wordpress/components';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { close as closeIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,172 +18,150 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-export class PostVisibility extends Component {
-	constructor( props ) {
-		super( ...arguments );
+export default function PostVisibility( { onClose } ) {
+	const instanceId = useInstanceId( PostVisibility );
 
-		this.setPublic = this.setPublic.bind( this );
-		this.setPrivate = this.setPrivate.bind( this );
-		this.setPasswordProtected = this.setPasswordProtected.bind( this );
-		this.updatePassword = this.updatePassword.bind( this );
+	const { status, visibility, password } = useSelect( ( select ) => ( {
+		status: select( editorStore ).getEditedPostAttribute( 'status' ),
+		visibility: select( editorStore ).getEditedPostVisibility(),
+		password: select( editorStore ).getEditedPostAttribute( 'password' ),
+	} ) );
 
-		this.state = {
-			hasPassword: !! props.password,
-			showPrivateConfirmDialog: false,
-		};
-	}
+	const { editPost, savePost } = useDispatch( editorStore );
 
-	setPublic() {
-		const { visibility, onUpdateVisibility, status } = this.props;
+	const [ hasPassword, setHasPassword ] = useState( !! password );
+	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] = useState(
+		false
+	);
 
-		onUpdateVisibility( visibility === 'private' ? 'draft' : status );
-		this.setState( { hasPassword: false } );
-	}
-
-	setPrivate() {
-		this.setState( { showPrivateConfirmDialog: true } );
-	}
-
-	confirmPrivate = () => {
-		const { onUpdateVisibility, onSave } = this.props;
-
-		onUpdateVisibility( 'private' );
-		this.setState( {
-			hasPassword: false,
-			showPrivateConfirmDialog: false,
+	const setPublic = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: '',
 		} );
-		onSave();
+		setHasPassword( false );
 	};
 
-	handleDialogCancel = () => {
-		this.setState( { showPrivateConfirmDialog: false } );
+	const setPrivate = () => {
+		setShowPrivateConfirmDialog( true );
 	};
 
-	setPasswordProtected() {
-		const { visibility, onUpdateVisibility, status, password } = this.props;
-
-		onUpdateVisibility(
-			visibility === 'private' ? 'draft' : status,
-			password || ''
-		);
-		this.setState( { hasPassword: true } );
-	}
+	const confirmPrivate = () => {
+		editPost( { status: 'private', password: '' } );
+		setHasPassword( false );
+		setShowPrivateConfirmDialog( false );
+		savePost();
+	};
 
-	updatePassword( event ) {
-		const { status, onUpdateVisibility } = this.props;
-		onUpdateVisibility( status, event.target.value );
-	}
+	const handleDialogCancel = () => {
+		setShowPrivateConfirmDialog( false );
+	};
 
-	render() {
-		const { visibility, password, instanceId } = this.props;
+	const setPasswordProtected = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: password || '',
+		} );
+		setHasPassword( true );
+	};
 
-		const visibilityHandlers = {
-			public: {
-				onSelect: this.setPublic,
-				checked: visibility === 'public' && ! this.state.hasPassword,
-			},
-			private: {
-				onSelect: this.setPrivate,
-				checked: visibility === 'private',
-			},
-			password: {
-				onSelect: this.setPasswordProtected,
-				checked: this.state.hasPassword,
-			},
-		};
+	const updatePassword = ( event ) => {
+		editPost( { password: event.target.value } );
+	};
 
-		return [
-			<fieldset
-				key="visibility-selector"
-				className="editor-post-visibility__dialog-fieldset"
-			>
-				<legend className="editor-post-visibility__dialog-legend">
-					{ __( 'Post Visibility' ) }
+	return (
+		<>
+			<Button
+				className="editor-post-visibility__close"
+				isSmall
+				icon={ closeIcon }
+				onClick={ onClose }
+			/>
+			<fieldset className="editor-post-visibility__fieldset">
+				<legend className="editor-post-visibility__legend">
+					{ __( 'Visibility' ) }
 				</legend>
-				{ visibilityOptions.map( ( { value, label, info } ) => (
-					<div
-						key={ value }
-						className="editor-post-visibility__choice"
-					>
+				<p className="editor-post-visibility__description">
+					{ __( 'Control how this post is viewed.' ) }
+				</p>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="public"
+					label={ visibilityOptions.public.label }
+					info={ visibilityOptions.public.info }
+					checked={ visibility === 'public' && ! hasPassword }
+					onChange={ setPublic }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="private"
+					label={ visibilityOptions.private.label }
+					info={ visibilityOptions.private.info }
+					checked={ visibility === 'private' }
+					onChange={ setPrivate }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="password"
+					label={ visibilityOptions.password.label }
+					info={ visibilityOptions.password.info }
+					checked={ hasPassword }
+					onChange={ setPasswordProtected }
+				/>
+				{ hasPassword && (
+					<div className="editor-post-visibility__password">
+						<VisuallyHidden
+							as="label"
+							htmlFor={ `editor-post-visibility__password-input-${ instanceId }` }
+						>
+							{ __( 'Create password' ) }
+						</VisuallyHidden>
 						<input
-							type="radio"
-							name={ `editor-post-visibility__setting-${ instanceId }` }
-							value={ value }
-							onChange={ visibilityHandlers[ value ].onSelect }
-							checked={ visibilityHandlers[ value ].checked }
-							id={ `editor-post-${ value }-${ instanceId }` }
-							aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-							className="editor-post-visibility__dialog-radio"
+							className="editor-post-visibility__password-input"
+							id={ `editor-post-visibility__password-input-${ instanceId }` }
+							type="text"
+							onChange={ updatePassword }
+							value={ password }
+							placeholder={ __( 'Use a secure password' ) }
 						/>
-						<label
-							htmlFor={ `editor-post-${ value }-${ instanceId }` }
-							className="editor-post-visibility__dialog-label"
-						>
-							{ label }
-						</label>
-						{
-							<p
-								id={ `editor-post-${ value }-${ instanceId }-description` }
-								className="editor-post-visibility__dialog-info"
-							>
-								{ info }
-							</p>
-						}
 					</div>
-				) ) }
-			</fieldset>,
-			this.state.hasPassword && (
-				<div
-					className="editor-post-visibility__dialog-password"
-					key="password-selector"
-				>
-					<VisuallyHidden
-						as="label"
-						htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-					>
-						{ __( 'Create password' ) }
-					</VisuallyHidden>
-					<input
-						className="editor-post-visibility__dialog-password-input"
-						id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-						type="text"
-						onChange={ this.updatePassword }
-						value={ password }
-						placeholder={ __( 'Use a secure password' ) }
-					/>
-				</div>
-			),
+				) }
+			</fieldset>
 			<ConfirmDialog
-				key="private-publish-confirmation"
-				isOpen={ this.state.showPrivateConfirmDialog }
-				onConfirm={ this.confirmPrivate }
-				onCancel={ this.handleDialogCancel }
+				isOpen={ showPrivateConfirmDialog }
+				onConfirm={ confirmPrivate }
+				onCancel={ handleDialogCancel }
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
-			</ConfirmDialog>,
-		];
-	}
+			</ConfirmDialog>
+		</>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostVisibility } = select(
-			editorStore
-		);
-		return {
-			status: getEditedPostAttribute( 'status' ),
-			visibility: getEditedPostVisibility(),
-			password: getEditedPostAttribute( 'password' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { savePost, editPost } = dispatch( editorStore );
-		return {
-			onSave: savePost,
-			onUpdateVisibility( status, password = '' ) {
-				editPost( { status, password } );
-			},
-		};
-	} ),
-	withInstanceId,
-] )( PostVisibility );
+function PostVisibilityChoice( { instanceId, value, label, info, ...props } ) {
+	return (
+		<div className="editor-post-visibility__choice">
+			<input
+				type="radio"
+				name={ `editor-post-visibility__setting-${ instanceId }` }
+				value={ value }
+				id={ `editor-post-${ value }-${ instanceId }` }
+				aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__radio"
+				{ ...props }
+			/>
+			<label
+				htmlFor={ `editor-post-${ value }-${ instanceId }` }
+				className="editor-post-visibility__label"
+			>
+				{ label }
+			</label>
+			<p
+				id={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__info"
+			>
+				{ info }
+			</p>
+		</div>
+	);
+}

package/src/components/post-visibility/label.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +9,9 @@ import { withSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-function PostVisibilityLabel( { visibility } ) {
-	const getVisibilityLabel = () =>
-		find( visibilityOptions, { value: visibility } ).label;
-
-	return getVisibilityLabel( visibility );
+export default function PostVisibilityLabel() {
+	const visibility = useSelect( ( select ) =>
+		select( editorStore ).getEditedPostVisibility()
+	);
+	return visibilityOptions[ visibility ]?.label;
 }
-
-export default withSelect( ( select ) => ( {
-	visibility: select( editorStore ).getEditedPostVisibility(),
-} ) )( PostVisibilityLabel );