@wordpress/editor 14.42.0 → 14.43.0

package/src/components/post-template/swap-template-button.js

@@ -16,23 +16,40 @@ import { parse } from '@wordpress/blocks';
 import { useAvailableTemplates, useEditedPostContext } from './hooks';
 import { searchTemplates } from '../../utils/search-templates';
 
-export default function SwapTemplateButton( { onClick } ) {
-	const [ showModal, setShowModal ] = useState( false );
+export function SwapTemplateModal( { onRequestClose, onSelect } ) {
 	const { postType, postId } = useEditedPostContext();
-	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
-
 	const onTemplateSelect = async ( template ) => {
 		editEntityRecord(
 			'postType',
 			postType,
 			postId,
-			{ template: template.name },
+			// Since we append the default template we need to properly
+			// update to an empty string.
+			{ template: template.isDefault ? '' : template.name },
 			{ undoIgnore: true }
 		);
-		setShowModal( false ); // Close the template suggestions modal first.
-		onClick();
+		onRequestClose();
+		onSelect?.();
 	};
+	return (
+		<Modal
+			title={ __( 'Choose a template' ) }
+			onRequestClose={ onRequestClose }
+			overlayClassName="editor-post-template__swap-template-modal"
+			isFullScreen
+		>
+			<div className="editor-post-template__swap-template-modal-content">
+				<TemplatesList onSelect={ onTemplateSelect } />
+			</div>
+		</Modal>
+	);
+}
+
+export default function SwapTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const availableTemplates = useAvailableTemplates();
+
 	return (
 		<>
 			<MenuItem
@@ -43,27 +60,18 @@ export default function SwapTemplateButton( { onClick } ) {
 				{ __( 'Change template' ) }
 			</MenuItem>
 			{ showModal && (
-				<Modal
-					title={ __( 'Choose a template' ) }
+				<SwapTemplateModal
 					onRequestClose={ () => setShowModal( false ) }
-					overlayClassName="editor-post-template__swap-template-modal"
-					isFullScreen
-				>
-					<div className="editor-post-template__swap-template-modal-content">
-						<TemplatesList
-							postType={ postType }
-							onSelect={ onTemplateSelect }
-						/>
-					</div>
-				</Modal>
+					onSelect={ onClick }
+				/>
 			) }
 		</>
 	);
 }
 
-function TemplatesList( { postType, onSelect } ) {
+function TemplatesList( { onSelect } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const availableTemplates = useAvailableTemplates( postType );
+	const availableTemplates = useAvailableTemplates();
 	const templatesAsPatterns = useMemo(
 		() =>
 			availableTemplates.map( ( template ) => ( {
@@ -71,6 +79,7 @@ function TemplatesList( { postType, onSelect } ) {
 				blocks: parse( template.content.raw ),
 				title: decodeEntities( template.title.rendered ),
 				id: template.id,
+				isDefault: template.isDefault,
 			} ) ),
 		[ availableTemplates ]
 	);

package/src/components/preferences-modal/index.js

@@ -55,20 +55,25 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 
 function PreferencesModalContents( { extraSections = {} } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const showBlockBreadcrumbsOption = useSelect(
+	const { showBlockBreadcrumbsOption, showCollaborationOptions } = useSelect(
 		( select ) => {
-			const { getEditorSettings } = select( editorStore );
+			const { getEditorSettings, isCollaborationEnabledForCurrentPost } =
+				select( editorStore );
 			const { get } = select( preferencesStore );
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
-			return (
-				! isDistractionFreeEnabled &&
-				isLargeViewport &&
-				isRichEditingEnabled
-			);
+			return {
+				showBlockBreadcrumbsOption:
+					! isDistractionFreeEnabled &&
+					isLargeViewport &&
+					isRichEditingEnabled,
+				showCollaborationOptions:
+					isCollaborationEnabledForCurrentPost(),
+			};
 		},
 		[ isLargeViewport ]
 	);
+
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
@@ -120,24 +125,30 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									) }
 									label={ __( 'Show starter patterns' ) }
 								/>
-								<PreferenceToggleControl
-									scope="core"
-									featureName="showCollaborationCursor"
-									help={ __(
-										'Show your own avatar inside blocks during collaborative editing sessions.'
-									) }
-									label={ __( 'Show avatar in blocks' ) }
-								/>
-								<PreferenceToggleControl
-									scope="core"
-									featureName="showCollaborationNotifications"
-									help={ __(
-										'Show notifications when collaborators join, leave, or save the post.'
-									) }
-									label={ __(
-										'Show collaboration notifications'
-									) }
-								/>
+								{ showCollaborationOptions && (
+									<>
+										<PreferenceToggleControl
+											scope="core"
+											featureName="showCollaborationCursor"
+											help={ __(
+												'Show your own avatar inside blocks during collaborative editing sessions.'
+											) }
+											label={ __(
+												'Show avatar in blocks'
+											) }
+										/>
+										<PreferenceToggleControl
+											scope="core"
+											featureName="showCollaborationNotifications"
+											help={ __(
+												'Show notifications when collaborators join, leave, or save the post.'
+											) }
+											label={ __(
+												'Show collaboration notifications'
+											) }
+										/>
+									</>
+								) }
 							</PreferencesModalSection>
 							<PreferencesModalSection
 								title={ __( 'Document settings' ) }
@@ -350,6 +361,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 			].filter( Boolean ),
 		[
 			showBlockBreadcrumbsOption,
+			showCollaborationOptions,
 			extraSections,
 			setIsInserterOpened,
 			setIsListViewOpened,

package/src/components/revision-block-diff/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -9,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PostPanelRow from '../post-panel-row';
+import RevisionDiffPanel from '../revision-diff-panel';
 
 /**
  * Panel that shows changed block attributes for the selected block
@@ -27,48 +26,14 @@ export default function RevisionBlockDiffPanel() {
 		return null;
 	}
 
-	const diffInfo = block.attributes?.__revisionDiffStatus;
-	const changedAttributes = diffInfo?.changedAttributes;
-
-	if ( ! changedAttributes ) {
-		return null;
-	}
-
-	const fields = Object.entries( changedAttributes ).map(
-		( [ key, parts ] ) => (
-			<PostPanelRow key={ key } label={ key }>
-				<span className="editor-revision-fields-diff__value">
-					{ parts.map( ( part, index ) => {
-						if ( part.added ) {
-							return (
-								<ins
-									key={ index }
-									className="editor-revision-fields-diff__added"
-								>
-									{ part.value }
-								</ins>
-							);
-						}
-						if ( part.removed ) {
-							return (
-								<del
-									key={ index }
-									className="editor-revision-fields-diff__removed"
-								>
-									{ part.value }
-								</del>
-							);
-						}
-						return <span key={ index }>{ part.value }</span>;
-					} ) }
-				</span>
-			</PostPanelRow>
-		)
-	);
+	const changedAttributes =
+		block.attributes?.__revisionDiffStatus?.changedAttributes;
 
 	return (
-		<PanelBody title={ __( 'Changed attributes' ) } initialOpen>
-			{ fields }
-		</PanelBody>
+		<RevisionDiffPanel
+			title={ __( 'Changed attributes' ) }
+			entries={ changedAttributes }
+			initialOpen
+		/>
 	);
 }

package/src/components/revision-diff-panel/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Renders a panel of word-level diffs.
+ *
+ * @param {Object}  props
+ * @param {string}  props.title       Panel title.
+ * @param {Object}  props.entries     Map of key → diffWords parts arrays.
+ * @param {boolean} props.initialOpen Whether the panel starts open.
+ */
+export default function RevisionDiffPanel( { title, entries, initialOpen } ) {
+	if ( ! entries ) {
+		return null;
+	}
+
+	const fields = Object.entries( entries ).map( ( [ key, parts ] ) => (
+		<PostPanelRow key={ key } label={ key }>
+			<span className="editor-revision-fields-diff__value">
+				{ parts.map( ( part, index ) => {
+					if ( part.added ) {
+						return (
+							<ins
+								key={ index }
+								className="editor-revision-fields-diff__added"
+							>
+								{ part.value }
+							</ins>
+						);
+					}
+					if ( part.removed ) {
+						return (
+							<del
+								key={ index }
+								className="editor-revision-fields-diff__removed"
+							>
+								{ part.value }
+							</del>
+						);
+					}
+					return <span key={ index }>{ part.value }</span>;
+				} ) }
+			</span>
+		</PostPanelRow>
+	) );
+
+	return (
+		<PanelBody title={ title } initialOpen={ initialOpen }>
+			{ fields }
+		</PanelBody>
+	);
+}

package/src/components/revision-fields-diff/index.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { diffWords } from 'diff/lib/diff/word';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionDiffPanel from '../revision-diff-panel';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Safely stringifies a value for display and comparison.
+ *
+ * @param {*} value The value to stringify.
+ * @return {string} The stringified value.
+ */
+function stringifyValue( value ) {
+	if ( value === null || value === undefined ) {
+		return '';
+	}
+	if ( typeof value === 'object' ) {
+		return JSON.stringify( value, null, 2 );
+	}
+	return String( value );
+}
+
+/**
+ * Panel that shows meta field diffs between the current revision and
+ * the previous revision in the document sidebar during revision mode.
+ */
+export default function RevisionFieldsDiffPanel() {
+	const { revision, previousRevision } = useSelect( ( select ) => {
+		const { getCurrentRevision, getPreviousRevision } = unlock(
+			select( editorStore )
+		);
+
+		return {
+			revision: getCurrentRevision(),
+			previousRevision: getPreviousRevision(),
+		};
+	}, [] );
+
+	const entries = useMemo( () => {
+		if ( ! revision ) {
+			return null;
+		}
+
+		const revisionMeta = revision.meta ?? {};
+		const previousMeta = previousRevision?.meta ?? {};
+		const allMetaKeys = new Set( [
+			...Object.keys( revisionMeta ),
+			...Object.keys( previousMeta ),
+		] );
+
+		const result = {};
+
+		for ( const key of allMetaKeys ) {
+			const revStr = stringifyValue( revisionMeta[ key ] );
+			const prevStr = stringifyValue( previousMeta[ key ] );
+
+			if ( ! revStr && ! prevStr ) {
+				continue;
+			}
+
+			result[ key ] = diffWords( prevStr, revStr );
+		}
+
+		if ( Object.keys( result ).length === 0 ) {
+			return null;
+		}
+
+		return result;
+	}, [ revision, previousRevision ] );
+
+	return (
+		<RevisionDiffPanel
+			title={ __( 'Meta' ) }
+			entries={ entries }
+			initialOpen={ false }
+		/>
+	);
+}

package/src/components/sidebar/dataform-post-summary.js

@@ -7,6 +7,7 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { DataForm } from '@wordpress/dataviews';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
+import { useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -16,70 +17,23 @@ import PostPanelSection from '../post-panel-section';
 import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
 import usePostFields from '../post-fields';
-import { unlock } from '../../lock-unlock';
 import { usePostTemplatePanelMode } from '../post-template/hooks';
 
-const form = {
-	layout: {
-		type: 'panel',
-	},
-	fields: [
-		{
-			id: 'featured_media',
-			layout: {
-				type: 'regular',
-				labelPosition: 'none',
-			},
-		},
-		{
-			id: 'post-content-info',
-			layout: {
-				type: 'regular',
-				labelPosition: 'none',
-			},
-		},
-		{
-			id: 'status',
-			label: __( 'Status' ),
-			children: [
-				{
-					id: 'status',
-					layout: { type: 'regular', labelPosition: 'none' },
-				},
-				'password',
-			],
-		},
-		'date',
-		'slug',
-		'author',
-		'template',
-		{
-			id: 'discussion',
-			label: __( 'Discussion' ),
-			children: [
-				{
-					id: 'comment_status',
-					layout: { type: 'regular', labelPosition: 'none' },
-				},
-				'ping_status',
-			],
-		},
-		'parent',
-		'format',
-	],
-};
+const EMPTY_FORM = { layout: { type: 'panel' }, fields: [] };
 
 export default function DataFormPostSummary( { onActionPerformed } ) {
 	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = unlock(
-			select( editorStore )
-		);
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
 		return {
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
 		};
 	}, [] );
-
+	const { form: formConfig } = useViewConfig( {
+		kind: 'postType',
+		name: postType,
+	} );
+	const form = formConfig ?? EMPTY_FORM;
 	const record = useSelect(
 		( select ) => {
 			if ( ! postType || ! postId ) {
@@ -172,7 +126,6 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 
 		editEntityRecord( 'postType', postType, postId, edits );
 	};
-
 	return (
 		<PostPanelSection className="editor-post-summary">
 			<VStack spacing={ 4 }>

package/src/components/sidebar/index.js

@@ -26,12 +26,15 @@ import PatternOverridesPanel from '../pattern-overrides-panel';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebar from '../plugin-sidebar';
 import PostSummary from './post-summary';
+import PostRevisionSummary from './post-revision-summary';
 import PostTaxonomiesPanel from '../post-taxonomies/panel';
 import PostTransformPanel from '../post-transform-panel';
 import SidebarHeader from './header';
+import TemplateActionsPanel from '../template-actions-panel';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
 import { MediaMetadataPanel } from '../media';
+import PostRevisionsPanel from '../post-revisions-panel';
 import RevisionBlockDiffPanel from '../revision-block-diff';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
@@ -95,6 +98,35 @@ const SidebarContent = ( {
 		}
 	}, [ tabName ] );
 
+	let tabContent;
+	if ( isAttachment ) {
+		tabContent = (
+			<MediaMetadataPanel onActionPerformed={ onActionPerformed } />
+		);
+	} else if ( isRevisionsMode ) {
+		tabContent = <PostRevisionSummary />;
+	} else {
+		tabContent = (
+			<>
+				<PostSummary onActionPerformed={ onActionPerformed } />
+				<PluginDocumentSettingPanel.Slot />
+				<TemplateContentPanel />
+				{ window?.__experimentalDataFormInspector &&
+					[ 'post', 'page' ].includes( postType ) && (
+						<>
+							<TemplateActionsPanel />
+							<PostRevisionsPanel />
+						</>
+					) }
+				<TemplatePartContentPanel />
+				<PostTransformPanel />
+				<PostTaxonomiesPanel />
+				<PatternOverridesPanel />
+				{ extraPanels }
+			</>
+		);
+	}
+
 	return (
 		<PluginSidebar
 			identifier={ tabName }
@@ -119,28 +151,7 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					{ isAttachment ? (
-						<MediaMetadataPanel
-							onActionPerformed={ onActionPerformed }
-						/>
-					) : (
-						<>
-							<PostSummary
-								onActionPerformed={ onActionPerformed }
-							/>
-							{ ! isRevisionsMode && (
-								<>
-									<PluginDocumentSettingPanel.Slot />
-									<TemplateContentPanel />
-									<TemplatePartContentPanel />
-									<PostTransformPanel />
-									<PostTaxonomiesPanel />
-									<PatternOverridesPanel />
-									{ extraPanels }
-								</>
-							) }
-						</>
-					) }
+					{ tabContent }
 				</Tabs.TabPanel>
 				{ ! isAttachment && (
 					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>

package/src/components/sidebar/post-revision-summary.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import RevisionAuthorPanel from '../revision-author-panel';
+import RevisionCreatedPanel from '../revision-created-panel';
+import { PostContentInformationUI } from '../post-content-information';
+import RevisionFieldsDiffPanel from '../revision-fields-diff';
+import PostPanelSection from '../post-panel-section';
+import PostCardPanel from '../post-card-panel';
+import { OpenRevisionsClassicScreen } from './post-summary';
+
+export default function PostRevisionSummary() {
+	const { revisionId, postId, postContent } = useSelect( ( select ) => {
+		const { getCurrentRevisionId, getCurrentRevision, getCurrentPostId } =
+			unlock( select( editorStore ) );
+		const _revisionId = getCurrentRevisionId();
+		return {
+			revisionId: _revisionId,
+			postId: getCurrentPostId(),
+			postContent: _revisionId && getCurrentRevision()?.content?.raw,
+		};
+	}, [] );
+	if ( ! revisionId ) {
+		return null;
+	}
+	return (
+		<>
+			<PostPanelSection className="editor-post-summary">
+				<VStack spacing={ 4 }>
+					<PostCardPanel postId={ postId } hideActions />
+					<VStack spacing={ 1 }>
+						<PostContentInformationUI postContent={ postContent } />
+						<RevisionCreatedPanel />
+					</VStack>
+					<OpenRevisionsClassicScreen revisionId={ revisionId } />
+					<RevisionAuthorPanel />
+				</VStack>
+			</PostPanelSection>
+			<RevisionFieldsDiffPanel />
+		</>
+	);
+}