@wordpress/editor 13.9.0 → 13.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.9.0",
+	"version": "13.11.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.32.0",
-		"@wordpress/api-fetch": "^6.29.0",
-		"@wordpress/blob": "^3.32.0",
-		"@wordpress/block-editor": "^12.0.0",
-		"@wordpress/blocks": "^12.9.0",
-		"@wordpress/components": "^23.9.0",
-		"@wordpress/compose": "^6.9.0",
-		"@wordpress/core-data": "^6.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/date": "^4.32.0",
-		"@wordpress/deprecated": "^3.32.0",
-		"@wordpress/dom": "^3.32.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/hooks": "^3.32.0",
-		"@wordpress/html-entities": "^3.32.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/keyboard-shortcuts": "^4.9.0",
-		"@wordpress/keycodes": "^3.32.0",
-		"@wordpress/media-utils": "^4.23.0",
-		"@wordpress/notices": "^4.0.0",
-		"@wordpress/preferences": "^3.9.0",
-		"@wordpress/private-apis": "^0.14.0",
-		"@wordpress/reusable-blocks": "^4.9.0",
-		"@wordpress/rich-text": "^6.9.0",
-		"@wordpress/server-side-render": "^4.9.0",
-		"@wordpress/url": "^3.33.0",
-		"@wordpress/wordcount": "^3.32.0",
+		"@wordpress/a11y": "^3.34.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/blob": "^3.34.0",
+		"@wordpress/block-editor": "^12.2.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/core-data": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/date": "^4.34.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/html-entities": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/media-utils": "^4.25.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/preferences": "^3.11.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/reusable-blocks": "^4.11.0",
+		"@wordpress/rich-text": "^6.11.0",
+		"@wordpress/server-side-render": "^4.11.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/wordcount": "^3.34.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"escape-html": "^1.0.3",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2",
 		"remove-accents": "^0.4.2"
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/components/entities-saved-states/index.js

@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { store as noticesStore } from '@wordpress/notices';
+import { getQueryArg } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -31,8 +32,28 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 	},
 ];
 
-export default function EntitiesSavedStates( { close } ) {
+function identity( values ) {
+	return values;
+}
+
+function isPreviewingTheme() {
+	return (
+		window?.__experimentalEnableThemePreviews &&
+		getQueryArg( window.location.href, 'theme_preview' ) !== undefined
+	);
+}
+
+function currentlyPreviewingTheme() {
+	if ( isPreviewingTheme() ) {
+		return getQueryArg( window.location.href, 'theme_preview' );
+	}
+	return null;
+}
+
+export default function EntitiesSavedStates( { close, onSave = identity } ) {
 	const saveButtonRef = useRef();
+	const { getTheme } = useSelect( coreStore );
+	const theme = getTheme( currentlyPreviewingTheme() );
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
 		const dirtyRecords =
 			select( coreStore ).__experimentalGetDirtyEntityRecords();
@@ -74,7 +95,7 @@ export default function EntitiesSavedStates( { close } ) {
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } =
+	const { createSuccessNotice, createErrorNotice, removeNotice } =
 		useDispatch( noticesStore );
 
 	// To group entities by type.
@@ -126,7 +147,9 @@ export default function EntitiesSavedStates( { close } ) {
 		}
 	};
 
-	const saveCheckedEntities = () => {
+	const saveCheckedEntitiesAndActivate = () => {
+		const saveNoticeId = 'site-editor-save-success';
+		removeNotice( saveNoticeId );
 		const entitiesToSave = dirtyEntityRecords.filter(
 			( { kind, name, key, property } ) => {
 				return ! unselectedEntities.some(
@@ -176,6 +199,9 @@ export default function EntitiesSavedStates( { close } ) {
 		__unstableMarkLastChangeAsPersistent();
 
 		Promise.all( pendingSavedRecords )
+			.then( ( values ) => {
+				return onSave( values );
+			} )
 			.then( ( values ) => {
 				if (
 					values.some( ( value ) => typeof value === 'undefined' )
@@ -184,6 +210,7 @@ export default function EntitiesSavedStates( { close } ) {
 				} else {
 					createSuccessNotice( __( 'Site updated.' ), {
 						type: 'snackbar',
+						id: saveNoticeId,
 					} );
 				}
 			} )
@@ -200,6 +227,18 @@ export default function EntitiesSavedStates( { close } ) {
 		onClose: () => dismissPanel(),
 	} );
 
+	const isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+
+	let activateSaveLabel;
+	if ( isPreviewingTheme() && isDirty ) {
+		activateSaveLabel = __( 'Activate & Save' );
+	} else if ( isPreviewingTheme() ) {
+		activateSaveLabel = __( 'Activate' );
+	} else {
+		activateSaveLabel = __( 'Save' );
+	}
+
 	return (
 		<div
 			ref={ saveDialogRef }
@@ -212,15 +251,11 @@ export default function EntitiesSavedStates( { close } ) {
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
-					disabled={
-						dirtyEntityRecords.length -
-							unselectedEntities.length ===
-						0
-					}
-					onClick={ saveCheckedEntities }
+					disabled={ ! activateSaveEnabled }
+					onClick={ saveCheckedEntitiesAndActivate }
 					className="editor-entities-saved-states__save-button"
 				>
-					{ __( 'Save' ) }
+					{ activateSaveLabel }
 				</FlexItem>
 				<FlexItem
 					isBlock
@@ -234,11 +269,21 @@ export default function EntitiesSavedStates( { close } ) {
 
 			<div className="entities-saved-states__text-prompt">
 				<strong>{ __( 'Are you ready to save?' ) }</strong>
-				<p>
-					{ __(
-						'The following changes have been made to your site, templates, and content.'
-					) }
-				</p>
+				{ isPreviewingTheme() && (
+					<p>
+						{ sprintf(
+							'Saving your changes will change your active theme to  %1$s.',
+							theme?.name?.rendered
+						) }
+					</p>
+				) }
+				{ isDirty && (
+					<p>
+						{ __(
+							'The following changes have been made to your site, templates, and content.'
+						) }
+					</p>
+				) }
 			</div>
 
 			{ sortedPartitionedSavables.map( ( list ) => {

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

@@ -10,9 +10,10 @@ import {
 	ResponsiveWrapper,
 	withNotices,
 	withFilters,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
@@ -33,7 +34,6 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 // Used when labels from post type were not yet loaded or when they are not present.
 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>
@@ -96,6 +96,7 @@ function PostFeaturedImage( {
 	noticeUI,
 	noticeOperations,
 } ) {
+	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -163,6 +164,7 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
+									ref={ toggleRef }
 									className={
 										! featuredImageId
 											? 'editor-post-featured-image__toggle'
@@ -172,7 +174,7 @@ function PostFeaturedImage( {
 									aria-label={
 										! featuredImageId
 											? null
-											: __( 'Edit or update the image' )
+											: __( 'Edit or replace the image' )
 									}
 									aria-describedby={
 										! featuredImageId
@@ -199,44 +201,33 @@ function PostFeaturedImage( {
 											?.set_featured_image ||
 											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
 								</Button>
+								{ !! featuredImageId && (
+									<HStack className="editor-post-featured-image__actions">
+										<Button
+											className="editor-post-featured-image__action"
+											onClick={ open }
+											// Prefer that screen readers use the .editor-post-featured-image__preview button.
+											aria-hidden="true"
+										>
+											{ __( 'Replace' ) }
+										</Button>
+										<Button
+											className="editor-post-featured-image__action"
+											onClick={ () => {
+												onRemoveImage();
+												toggleRef.current.focus();
+											} }
+										>
+											{ __( 'Remove' ) }
+										</Button>
+									</HStack>
+								) }
 								<DropZone onFilesDrop={ onDropFiles } />
 							</div>
 						) }
 						value={ featuredImageId }
 					/>
 				</MediaUploadCheck>
-				{ !! featuredImageId && (
-					<MediaUploadCheck>
-						{ media && (
-							<MediaUpload
-								title={
-									postType?.labels?.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"
-							isDestructive
-						>
-							{ postType?.labels?.remove_featured_image ||
-								DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-						</Button>
-					</MediaUploadCheck>
-				) }
 			</div>
 		</PostFeaturedImageCheck>
 	);

package/src/components/post-featured-image/style.scss

@@ -1,10 +1,6 @@
 .editor-post-featured-image {
 	padding: 0;
 
-	&__container {
-		margin-bottom: 1em;
-		position: relative;
-	}
 
 	.components-spinner {
 		position: absolute;
@@ -14,12 +10,6 @@
 		margin-left: -9px;
 	}
 
-	// Stack consecutive buttons.
-	.components-button + .components-button {
-		display: block;
-		margin-top: 1em;
-	}
-
 	// This keeps images at their intrinsic size (eg. a 50px
 	// image will never be wider than 50px).
 	.components-responsive-wrapper__content {
@@ -28,22 +18,40 @@
 	}
 }
 
+.editor-post-featured-image__container {
+	position: relative;
+
+	&:hover,
+	&:focus,
+	&:focus-within {
+		.editor-post-featured-image__actions {
+			opacity: 1;
+		}
+	}
+}
+
 .editor-post-featured-image__toggle,
 .editor-post-featured-image__preview {
-	display: block;
 	width: 100%;
 	padding: 0;
 	transition: all 0.1s ease-out;
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+
+	// Apply a max-height.
+	display: flex;
+	justify-content: center;
+	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
-}
 
-.editor-post-featured-image__preview:not(:disabled):not([aria-disabled="true"]):focus {
-	box-shadow: 0 0 0 4px var(--wp-admin-theme-color);
+	.components-responsive-wrapper {
+		width: 100%;
+		background: $gray-100;
+	}
 }
 
 .editor-post-featured-image__toggle {
@@ -59,3 +67,19 @@
 		color: $gray-900;
 	}
 }
+
+.editor-post-featured-image__actions {
+	@include reduce-motion("transition");
+	bottom: 0;
+	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
+	padding: $grid-unit-10;
+	position: absolute;
+	transition: opacity 50ms ease-out;
+}
+
+.editor-post-featured-image__action {
+	backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.75);
+	flex-grow: 1;
+	justify-content: center;
+}

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -593,7 +593,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   overflow: visible;
   opacity: 1;
   background-color: transparent;

package/src/components/post-saved-state/index.js

@@ -20,7 +20,6 @@ import { displayShortcut } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import PostSwitchToDraftButton from '../post-switch-to-draft-button';
 import { store as editorStore } from '../../store';
 
 /**
@@ -48,10 +47,8 @@ export default function PostSavedState( {
 		isDirty,
 		isNew,
 		isPending,
-		isPublished,
 		isSaveable,
 		isSaving,
-		isScheduled,
 		hasPublishAction,
 	} = useSelect(
 		( select ) => {
@@ -106,10 +103,6 @@ export default function PostSavedState( {
 		return null;
 	}
 
-	if ( isPublished || isScheduled ) {
-		return <PostSwitchToDraftButton />;
-	}
-
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' );
 

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -22,15 +22,6 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 </button>
 `;
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
-<button
-  class="components-button editor-post-switch-to-draft is-tertiary"
-  type="button"
->
-  Switch to draft
-</button>
-`;
-
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"

package/src/components/post-saved-state/test/index.js

@@ -67,16 +67,6 @@ describe( 'PostSavedState', () => {
 		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
-	it( 'returns a switch to draft link if the post is published', () => {
-		useSelect.mockImplementation( () => ( {
-			isPublished: true,
-		} ) );
-
-		render( <PostSavedState /> );
-
-		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
-	} );
-
 	it( 'should return Saved text if not new and not dirty', () => {
 		useSelect.mockImplementation( () => ( {
 			isDirty: false,

package/src/components/post-switch-to-draft-button/index.js

@@ -3,11 +3,12 @@
  */
 import {
 	Button,
+	FlexItem,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, useViewportMatch } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
 /**
@@ -21,7 +22,6 @@ function PostSwitchToDraftButton( {
 	isScheduled,
 	onClick,
 } ) {
-	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( ! isPublished && ! isScheduled ) {
@@ -41,16 +41,17 @@ function PostSwitchToDraftButton( {
 	};
 
 	return (
-		<>
+		<FlexItem isBlock>
 			<Button
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
 					setShowConfirmDialog( true );
 				} }
 				disabled={ isSaving }
-				variant="tertiary"
+				variant="secondary"
+				style={ { width: '100%', display: 'block' } }
 			>
-				{ isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) }
+				{ __( 'Switch to draft' ) }
 			</Button>
 			<ConfirmDialog
 				isOpen={ showConfirmDialog }
@@ -59,7 +60,7 @@ function PostSwitchToDraftButton( {
 			>
 				{ alertMessage }
 			</ConfirmDialog>
-		</>
+		</FlexItem>
 	);
 }
 

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

@@ -142,7 +142,7 @@ export function FlatTermSelector( { slug } ) {
 					: EMPTY_ARRAY,
 			};
 		},
-		[ search ]
+		[ search, slug ]
 	);
 
 	// Update terms state only after the selectors are resolved.

package/src/components/post-taxonomies/style.scss

@@ -3,10 +3,10 @@
 	overflow: auto;
 
 	// Extra left padding prevents checkbox focus borders from being cut off.
-	margin-left: -$border-width * 4 - $border-width-focus;
-	padding-left: $border-width * 4 + $border-width-focus;
-	margin-top: -$border-width * 4 - $border-width-focus;
-	padding-top: $border-width * 4 + $border-width-focus;
+	margin-left: -$border-width * 4 - $border-width-focus-fallback;
+	padding-left: $border-width * 4 + $border-width-focus-fallback;
+	margin-top: -$border-width * 4 - $border-width-focus-fallback;
+	padding-top: $border-width * 4 + $border-width-focus-fallback;
 }
 
 .editor-post-taxonomies__hierarchical-terms-choice {

package/src/components/post-trash/style.scss

@@ -1,6 +1,4 @@
 .editor-post-trash.components-button {
-	display: flex;
-	justify-content: center;
-	margin-top: $grid-unit-05;
 	width: 100%;
+	display: block;
 }

package/src/components/provider/use-block-editor-settings.js

@@ -75,6 +75,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
+	'behaviors',
 ];
 
 /**