@wordpress/editor 13.11.0 → 13.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.11.0",
+	"version": "13.12.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.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",
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/api-fetch": "^6.32.0",
+		"@wordpress/blob": "^3.35.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/core-data": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/date": "^4.35.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/html-entities": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/keyboard-shortcuts": "^4.12.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/media-utils": "^4.26.0",
+		"@wordpress/notices": "^4.3.0",
+		"@wordpress/preferences": "^3.12.0",
+		"@wordpress/private-apis": "^0.17.0",
+		"@wordpress/reusable-blocks": "^4.12.0",
+		"@wordpress/rich-text": "^6.12.0",
+		"@wordpress/server-side-render": "^4.12.0",
+		"@wordpress/url": "^3.36.0",
+		"@wordpress/wordcount": "^3.35.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"escape-html": "^1.0.3",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const TRANSLATED_SITE_PROPERTIES = {
+	title: __( 'Title' ),
+	description: __( 'Tagline' ),
+	site_logo: __( 'Logo' ),
+	site_icon: __( 'Icon' ),
+	show_on_front: __( 'Show on front' ),
+	page_on_front: __( 'Page on front' ),
+};
+
+export const useIsDirty = () => {
+	const { dirtyEntityRecords } = useSelect( ( select ) => {
+		const dirtyRecords =
+			select( coreStore ).__experimentalGetDirtyEntityRecords();
+
+		// Remove site object and decouple into its edited pieces.
+		const dirtyRecordsWithoutSite = dirtyRecords.filter(
+			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
+		);
+
+		const siteEdits = select( coreStore ).getEntityRecordEdits(
+			'root',
+			'site'
+		);
+
+		const siteEditsAsEntities = [];
+		for ( const property in siteEdits ) {
+			siteEditsAsEntities.push( {
+				kind: 'root',
+				name: 'site',
+				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
+				property,
+			} );
+		}
+		const dirtyRecordsWithSiteItems = [
+			...dirtyRecordsWithoutSite,
+			...siteEditsAsEntities,
+		];
+
+		return {
+			dirtyEntityRecords: dirtyRecordsWithSiteItems,
+		};
+	}, [] );
+
+	// Unchecked entities to be ignored by save function.
+	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
+
+	const setUnselectedEntities = (
+		{ kind, name, key, property },
+		checked
+	) => {
+		if ( checked ) {
+			_setUnselectedEntities(
+				unselectedEntities.filter(
+					( elt ) =>
+						elt.kind !== kind ||
+						elt.name !== name ||
+						elt.key !== key ||
+						elt.property !== property
+				)
+			);
+		} else {
+			_setUnselectedEntities( [
+				...unselectedEntities,
+				{ kind, name, key, property },
+			] );
+		}
+	};
+
+	const isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;
+
+	return {
+		dirtyEntityRecords,
+		isDirty,
+		setUnselectedEntities,
+		unselectedEntities,
+	};
+};

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

@@ -2,28 +2,19 @@
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useCallback, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { 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
  */
 import EntityTypeList from './entity-type-list';
-
-const TRANSLATED_SITE_PROPERTIES = {
-	title: __( 'Title' ),
-	description: __( 'Tagline' ),
-	site_logo: __( 'Logo' ),
-	site_icon: __( 'Icon' ),
-	show_on_front: __( 'Show on front' ),
-	page_on_front: __( 'Page on front' ),
-};
+import { useIsDirty } from './hooks/use-is-dirty';
 
 const PUBLISH_ON_SAVE_ENTITIES = [
 	{
@@ -36,56 +27,26 @@ function identity( values ) {
 	return values;
 }
 
-function isPreviewingTheme() {
+export default function EntitiesSavedStates( { close } ) {
+	const isDirtyProps = useIsDirty();
 	return (
-		window?.__experimentalEnableThemePreviews &&
-		getQueryArg( window.location.href, 'theme_preview' ) !== undefined
+		<EntitiesSavedStatesExtensible close={ close } { ...isDirtyProps } />
 	);
 }
 
-function currentlyPreviewingTheme() {
-	if ( isPreviewingTheme() ) {
-		return getQueryArg( window.location.href, 'theme_preview' );
-	}
-	return null;
-}
-
-export default function EntitiesSavedStates( { close, onSave = identity } ) {
+export function EntitiesSavedStatesExtensible( {
+	additionalPrompt = undefined,
+	close,
+	onSave = identity,
+	saveEnabled: saveEnabledProp = undefined,
+	saveLabel = __( 'Save' ),
+
+	dirtyEntityRecords,
+	isDirty,
+	setUnselectedEntities,
+	unselectedEntities,
+} ) {
 	const saveButtonRef = useRef();
-	const { getTheme } = useSelect( coreStore );
-	const theme = getTheme( currentlyPreviewingTheme() );
-	const { dirtyEntityRecords } = useSelect( ( select ) => {
-		const dirtyRecords =
-			select( coreStore ).__experimentalGetDirtyEntityRecords();
-
-		// Remove site object and decouple into its edited pieces.
-		const dirtyRecordsWithoutSite = dirtyRecords.filter(
-			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
-		);
-
-		const siteEdits = select( coreStore ).getEntityRecordEdits(
-			'root',
-			'site'
-		);
-
-		const siteEditsAsEntities = [];
-		for ( const property in siteEdits ) {
-			siteEditsAsEntities.push( {
-				kind: 'root',
-				name: 'site',
-				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
-				property,
-			} );
-		}
-		const dirtyRecordsWithSiteItems = [
-			...dirtyRecordsWithoutSite,
-			...siteEditsAsEntities,
-		];
-
-		return {
-			dirtyEntityRecords: dirtyRecordsWithSiteItems,
-		};
-	}, [] );
 	const {
 		editEntityRecord,
 		saveEditedEntityRecord,
@@ -122,32 +83,9 @@ export default function EntitiesSavedStates( { close, onSave = identity } ) {
 		...Object.values( contentSavables ),
 	].filter( Array.isArray );
 
-	// Unchecked entities to be ignored by save function.
-	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
-
-	const setUnselectedEntities = (
-		{ kind, name, key, property },
-		checked
-	) => {
-		if ( checked ) {
-			_setUnselectedEntities(
-				unselectedEntities.filter(
-					( elt ) =>
-						elt.kind !== kind ||
-						elt.name !== name ||
-						elt.key !== key ||
-						elt.property !== property
-				)
-			);
-		} else {
-			_setUnselectedEntities( [
-				...unselectedEntities,
-				{ kind, name, key, property },
-			] );
-		}
-	};
+	const saveEnabled = saveEnabledProp ?? isDirty;
 
-	const saveCheckedEntitiesAndActivate = () => {
+	const saveCheckedEntities = () => {
 		const saveNoticeId = 'site-editor-save-success';
 		removeNotice( saveNoticeId );
 		const entitiesToSave = dirtyEntityRecords.filter(
@@ -227,18 +165,6 @@ export default function EntitiesSavedStates( { close, onSave = identity } ) {
 		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 }
@@ -251,11 +177,11 @@ export default function EntitiesSavedStates( { close, onSave = identity } ) {
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
-					disabled={ ! activateSaveEnabled }
-					onClick={ saveCheckedEntitiesAndActivate }
+					disabled={ ! saveEnabled }
+					onClick={ saveCheckedEntities }
 					className="editor-entities-saved-states__save-button"
 				>
-					{ activateSaveLabel }
+					{ saveLabel }
 				</FlexItem>
 				<FlexItem
 					isBlock
@@ -269,14 +195,7 @@ export default function EntitiesSavedStates( { close, onSave = identity } ) {
 
 			<div className="entities-saved-states__text-prompt">
 				<strong>{ __( 'Are you ready to save?' ) }</strong>
-				{ isPreviewingTheme() && (
-					<p>
-						{ sprintf(
-							'Saving your changes will change your active theme to  %1$s.',
-							theme?.name?.rendered
-						) }
-					</p>
-				) }
+				{ additionalPrompt }
 				{ isDirty && (
 					<p>
 						{ __(

package/src/components/entities-saved-states/test/use-is-dirty.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useIsDirty } from '../hooks/use-is-dirty';
+
+jest.mock( '@wordpress/data', () => {
+	return {
+		useSelect: jest.fn().mockImplementation( ( fn ) => {
+			const select = () => {
+				return {
+					__experimentalGetDirtyEntityRecords: jest
+						.fn()
+						.mockReturnValue( [
+							{
+								kind: 'root',
+								name: 'site',
+								title: 'title',
+								property: 'property',
+							},
+							{
+								kind: 'postType',
+								name: 'post',
+								title: 'title',
+								property: 'property',
+							},
+						] ),
+					getEntityRecordEdits: jest.fn().mockReturnValue( {
+						title: 'My Site',
+					} ),
+				};
+			};
+			return fn( select );
+		} ),
+	};
+} );
+
+jest.mock( '@wordpress/core-data', () => {
+	return {
+		store: {
+			__experimentalGetDirtyEntityRecords: jest.fn(),
+			getEntityRecordEdits: jest.fn(),
+		},
+	};
+} );
+
+describe( 'useIsDirty', () => {
+	it( 'should calculate dirtyEntityRecords', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.dirtyEntityRecords ).toEqual( [
+			{
+				kind: 'postType',
+				name: 'post',
+				property: 'property',
+				title: 'title',
+			},
+			{ kind: 'root', name: 'site', property: 'title', title: 'Title' },
+		] );
+	} );
+	it( 'should return `isDirty: true` when there are changes', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.isDirty ).toBeTruthy();
+	} );
+	it( 'should return `isDirty: false` when there are NO changes', async () => {
+		const { result } = renderHook( () => useIsDirty() );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'postType',
+					name: 'post',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		expect( result.current.isDirty ).toBeFalsy();
+	} );
+} );

package/src/components/index.js

@@ -13,6 +13,7 @@ export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';
 export { default as EditorSnackbars } from './editor-snackbars';
 export { default as EntitiesSavedStates } from './entities-saved-states';
+export { useIsDirty as useEntitiesSavedStatesIsDirty } from './entities-saved-states/hooks/use-is-dirty';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as LocalAutosaveMonitor } from './local-autosave-monitor';
 export { default as PageAttributesCheck } from './page-attributes/check';

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

@@ -47,8 +47,10 @@ export default function PostSavedState( {
 		isDirty,
 		isNew,
 		isPending,
+		isPublished,
 		isSaveable,
 		isSaving,
+		isScheduled,
 		hasPublishAction,
 	} = useSelect(
 		( select ) => {
@@ -103,6 +105,10 @@ export default function PostSavedState( {
 		return null;
 	}
 
+	if ( isPublished || isScheduled ) {
+		return null;
+	}
+
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' );
 

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

@@ -74,7 +74,8 @@ function PostTitle( _, forwardedRef ) {
 			return;
 		}
 
-		const { ownerDocument } = ref.current;
+		const ownerDocument =
+			ref.current.ownerDocument.defaultView.top.document;
 		const { activeElement, body } = ownerDocument;
 
 		// Only autofocus the title when the post is entirely empty. This should

package/src/private-apis.js

@@ -3,8 +3,10 @@
  */
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lockUnlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 
 export const privateApis = {};
 lock( privateApis, {
 	ExperimentalEditorProvider,
+	EntitiesSavedStatesExtensible,
 } );