@wordpress/editor 12.5.4 → 12.7.0

package/build-style/style.css

@@ -740,20 +740,23 @@
   color: rgba(30, 30, 30, 0.62);
 }
 
-.edit-post-post-visibility__dialog,
-.editor-post-visibility__dialog-fieldset {
-  padding: 4px;
-  padding-top: 0;
+.editor-post-visibility__close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+
+.editor-post-visibility__fieldset {
+  padding: 8px;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-legend,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-legend {
+.editor-post-visibility__fieldset .editor-post-visibility__legend {
   font-weight: 600;
-  margin-bottom: 1em;
+  padding: 1em 0 0 0;
+}
+.editor-post-visibility__fieldset .editor-post-visibility__description {
   margin-top: 0.5em;
-  padding: 0;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -773,48 +776,40 @@
   margin-top: 2px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:focus,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]::-webkit-input-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]::-webkit-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]::-moz-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]::-moz-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:-ms-input-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:-ms-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     height: 20px;
     width: 20px;
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked::before,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked::before {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked::before {
   box-sizing: inherit;
   width: 8px;
   height: 8px;
@@ -824,36 +819,32 @@
   border: 4px solid #fff;
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked::before,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked::before {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked::before {
     transform: translate(5px, 5px);
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:focus,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked {
   background: var(--wp-admin-theme-color);
   border-color: var(--wp-admin-theme-color);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-label,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-label {
-  font-weight: 600;
+.editor-post-visibility__fieldset .editor-post-visibility__info {
+  color: #757575;
+  margin-left: 36px;
+  margin-top: 0.5em;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-info,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-info {
-  margin-top: 0;
-  margin-left: 32px;
+@media (min-width: 600px) {
+  .editor-post-visibility__fieldset .editor-post-visibility__info {
+    margin-left: 32px;
+  }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info {
+.editor-post-visibility__fieldset .editor-post-visibility__choice:last-child .editor-post-visibility__info {
   margin-bottom: 0;
 }
-
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -864,35 +855,35 @@
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  margin-left: 36px;
-  margin-top: 8px;
+  margin-left: 32px;
+  width: calc(100% - 32px);
 }
 @media (prefers-reduced-motion: reduce) {
-  .editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+  .editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+  .editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]::-webkit-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]::-moz-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]:-ms-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.5.4",
+	"version": "12.7.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,31 +31,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/api-fetch": "^6.3.1",
-		"@wordpress/block-editor": "^8.5.4",
-		"@wordpress/blocks": "^11.5.3",
-		"@wordpress/components": "^19.8.3",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.4",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/date": "^4.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/html-entities": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.2",
-		"@wordpress/keyboard-shortcuts": "^3.4.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/media-utils": "^3.4.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/preferences": "^1.2.3",
-		"@wordpress/reusable-blocks": "^3.4.4",
-		"@wordpress/rich-text": "^5.4.2",
-		"@wordpress/server-side-render": "^3.4.4",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/wordcount": "^3.6.1",
+		"@wordpress/a11y": "^3.8.0",
+		"@wordpress/api-fetch": "^6.5.0",
+		"@wordpress/blob": "^3.8.0",
+		"@wordpress/block-editor": "^9.0.0",
+		"@wordpress/blocks": "^11.7.0",
+		"@wordpress/components": "^19.10.0",
+		"@wordpress/compose": "^5.6.0",
+		"@wordpress/core-data": "^4.6.0",
+		"@wordpress/data": "^6.8.0",
+		"@wordpress/date": "^4.8.0",
+		"@wordpress/deprecated": "^3.8.0",
+		"@wordpress/element": "^4.6.0",
+		"@wordpress/hooks": "^3.8.0",
+		"@wordpress/html-entities": "^3.8.0",
+		"@wordpress/i18n": "^4.8.0",
+		"@wordpress/icons": "^8.4.0",
+		"@wordpress/keyboard-shortcuts": "^3.6.0",
+		"@wordpress/keycodes": "^3.8.0",
+		"@wordpress/media-utils": "^3.6.0",
+		"@wordpress/notices": "^3.8.0",
+		"@wordpress/preferences": "^2.0.0",
+		"@wordpress/reusable-blocks": "^3.6.0",
+		"@wordpress/rich-text": "^5.6.0",
+		"@wordpress/server-side-render": "^3.6.0",
+		"@wordpress/url": "^3.9.0",
+		"@wordpress/wordcount": "^3.8.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -69,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1fdd4758150247d6b690051aed18fa27c15f3a32"
+	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
 }

package/src/components/autosave-monitor/test/index.js

@@ -23,6 +23,9 @@ describe( 'AutosaveMonitor', () => {
 	} );
 
 	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+
 		setAutosaveTimerSpy.mockClear();
 	} );
 

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-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 );
@@ -65,6 +66,18 @@ 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 );
+		};
+	}, [] );
+
 	return (
 		<>
 			<VisuallyHidden

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 );