@wordpress/editor 13.9.0 → 13.10.0

package/build-style/style-rtl.css

@@ -282,10 +282,6 @@
 .editor-post-featured-image {
   padding: 0;
 }
-.editor-post-featured-image__container {
-  margin-bottom: 1em;
-  position: relative;
-}
 .editor-post-featured-image .components-spinner {
   position: absolute;
   top: 50%;
@@ -293,22 +289,28 @@
   margin-top: -9px;
   margin-right: -9px;
 }
-.editor-post-featured-image .components-button + .components-button {
-  display: block;
-  margin-top: 1em;
-}
 .editor-post-featured-image .components-responsive-wrapper__content {
   max-width: 100%;
   width: auto;
 }
 
+.editor-post-featured-image__container {
+  position: relative;
+}
+.editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container: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;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  max-height: 150px;
 }
 @media (prefers-reduced-motion: reduce) {
   .editor-post-featured-image__toggle,
@@ -321,9 +323,9 @@
 .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);
+.editor-post-featured-image__preview .components-responsive-wrapper {
+  width: 100%;
+  background: #f0f0f0;
 }
 
 .editor-post-featured-image__toggle {
@@ -339,6 +341,28 @@
   color: #1e1e1e;
 }
 
+.editor-post-featured-image__actions {
+  bottom: 0;
+  opacity: 0;
+  padding: 8px;
+  position: absolute;
+  transition: opacity 50ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-post-featured-image__actions {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+.editor-post-featured-image__action {
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(255, 255, 255, 0.75);
+  flex-grow: 1;
+  justify-content: center;
+}
+
 [class].editor-post-format__suggestion {
   margin: 4px 0 0 0;
 }
@@ -833,10 +857,8 @@
 }
 
 .editor-post-trash.components-button {
-  display: flex;
-  justify-content: center;
-  margin-top: 4px;
   width: 100%;
+  display: block;
 }
 
 .table-of-contents__popover.components-popover .components-popover__content {

package/build-style/style.css

@@ -282,10 +282,6 @@
 .editor-post-featured-image {
   padding: 0;
 }
-.editor-post-featured-image__container {
-  margin-bottom: 1em;
-  position: relative;
-}
 .editor-post-featured-image .components-spinner {
   position: absolute;
   top: 50%;
@@ -293,22 +289,28 @@
   margin-top: -9px;
   margin-left: -9px;
 }
-.editor-post-featured-image .components-button + .components-button {
-  display: block;
-  margin-top: 1em;
-}
 .editor-post-featured-image .components-responsive-wrapper__content {
   max-width: 100%;
   width: auto;
 }
 
+.editor-post-featured-image__container {
+  position: relative;
+}
+.editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container: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;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  max-height: 150px;
 }
 @media (prefers-reduced-motion: reduce) {
   .editor-post-featured-image__toggle,
@@ -321,9 +323,9 @@
 .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);
+.editor-post-featured-image__preview .components-responsive-wrapper {
+  width: 100%;
+  background: #f0f0f0;
 }
 
 .editor-post-featured-image__toggle {
@@ -339,6 +341,28 @@
   color: #1e1e1e;
 }
 
+.editor-post-featured-image__actions {
+  bottom: 0;
+  opacity: 0;
+  padding: 8px;
+  position: absolute;
+  transition: opacity 50ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-post-featured-image__actions {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+.editor-post-featured-image__action {
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(255, 255, 255, 0.75);
+  flex-grow: 1;
+  justify-content: center;
+}
+
 [class].editor-post-format__suggestion {
   margin: 4px 0 0 0;
 }
@@ -837,10 +861,8 @@
 }
 
 .editor-post-trash.components-button {
-  display: flex;
-  justify-content: center;
-  margin-top: 4px;
   width: 100%;
+  display: block;
 }
 
 .table-of-contents__popover.components-popover .components-popover__content {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.9.0",
+	"version": "13.10.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,34 +31,34 @@
 	],
 	"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.33.0",
+		"@wordpress/api-fetch": "^6.30.0",
+		"@wordpress/blob": "^3.33.0",
+		"@wordpress/block-editor": "^12.1.0",
+		"@wordpress/blocks": "^12.10.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/compose": "^6.10.0",
+		"@wordpress/core-data": "^6.10.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/date": "^4.33.0",
+		"@wordpress/deprecated": "^3.33.0",
+		"@wordpress/dom": "^3.33.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/hooks": "^3.33.0",
+		"@wordpress/html-entities": "^3.33.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.10.0",
+		"@wordpress/keycodes": "^3.33.0",
+		"@wordpress/media-utils": "^4.24.0",
+		"@wordpress/notices": "^4.1.0",
+		"@wordpress/preferences": "^3.10.0",
+		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/reusable-blocks": "^4.10.0",
+		"@wordpress/rich-text": "^6.10.0",
+		"@wordpress/server-side-render": "^4.10.0",
+		"@wordpress/url": "^3.34.0",
+		"@wordpress/wordcount": "^3.33.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"escape-html": "^1.0.3",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }

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();
@@ -126,7 +147,7 @@ export default function EntitiesSavedStates( { close } ) {
 		}
 	};
 
-	const saveCheckedEntities = () => {
+	const saveCheckedEntitiesAndActivate = () => {
 		const entitiesToSave = dirtyEntityRecords.filter(
 			( { kind, name, key, property } ) => {
 				return ! unselectedEntities.some(
@@ -176,6 +197,9 @@ export default function EntitiesSavedStates( { close } ) {
 		__unstableMarkLastChangeAsPersistent();
 
 		Promise.all( pendingSavedRecords )
+			.then( ( values ) => {
+				return onSave( values );
+			} )
 			.then( ( values ) => {
 				if (
 					values.some( ( value ) => typeof value === 'undefined' )
@@ -200,6 +224,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 +248,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 +266,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,