@wordpress/editor 14.42.0 → 14.43.1-next.v.202604091042.0

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 />
+		</>
+	);
+}

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

@@ -23,7 +23,6 @@ import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/pan
 import PostFeaturedImagePanel from '../post-featured-image/panel';
 import PostFormatPanel from '../post-format/panel';
 import PostLastEditedPanel from '../post-last-edited-panel';
-import RevisionCreatedPanel from '../revision-created-panel';
 import PostPanelSection from '../post-panel-section';
 import PostSchedulePanel from '../post-schedule/panel';
 import PostStatusPanel from '../post-status';
@@ -36,14 +35,24 @@ import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
 import { PrivatePostLastRevision } from '../post-last-revision';
 import PostTrash from '../post-trash';
-import RevisionAuthorPanel from '../revision-author-panel';
-import { unlock } from '../../lock-unlock';
 
 /**
  * Module Constants
  */
 const PANEL_NAME = 'post-status';
 
+export function OpenRevisionsClassicScreen( { revisionId } ) {
+	return (
+		<ExternalLink
+			href={ addQueryArgs( 'revision.php', {
+				revision: revisionId,
+			} ) }
+		>
+			{ __( 'Open classic revisions screen' ) }
+		</ExternalLink>
+	);
+}
+
 export default function PostSummary( { onActionPerformed } ) {
 	const postType = useSelect(
 		( select ) => select( editorStore ).getCurrentPostType(),
@@ -59,28 +68,23 @@ export default function PostSummary( { onActionPerformed } ) {
 }
 
 function ClassicPostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel, postType, postId, revisionId } =
-		useSelect( ( select ) => {
+	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
+		( select ) => {
 			// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
 			const {
 				isEditorPanelRemoved,
 				getCurrentPostType,
 				getCurrentPostId,
-				getCurrentRevisionId,
-			} = unlock( select( editorStore ) );
+			} = select( editorStore );
 			return {
 				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
 				postType: getCurrentPostType(),
 				postId: getCurrentPostId(),
-				revisionId: getCurrentRevisionId(),
 			};
-		}, [] );
-
-	const isRevisionsMode = !! revisionId;
-	const shouldShowPostStatusPanel =
-		! isRemovedPostStatusPanel && ! isRevisionsMode;
-
+		},
+		[]
+	);
 	return (
 		<PostPanelSection className="editor-post-summary">
 			<PluginPostStatusInfo.Slot>
@@ -92,35 +96,13 @@ function ClassicPostSummary( { onActionPerformed } ) {
 								postId={ postId }
 								onActionPerformed={ onActionPerformed }
 							/>
-							{ ! isRevisionsMode && (
-								<PostFeaturedImagePanel
-									withPanelBody={ false }
-								/>
-							) }
-							{ ! isRevisionsMode && <PostExcerptPanel /> }
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
 							<VStack spacing={ 1 }>
 								<PostContentInformation />
-								{ isRevisionsMode ? (
-									<RevisionCreatedPanel />
-								) : (
-									<PostLastEditedPanel />
-								) }
+								<PostLastEditedPanel />
 							</VStack>
-							{ isRevisionsMode && revisionId && (
-								<>
-									<ExternalLink
-										href={ addQueryArgs( 'revision.php', {
-											revision: revisionId,
-										} ) }
-									>
-										{ __(
-											'Open classic revisions screen'
-										) }
-									</ExternalLink>
-									<RevisionAuthorPanel />
-								</>
-							) }
-							{ shouldShowPostStatusPanel && (
+							{ ! isRemovedPostStatusPanel && (
 								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />

package/src/components/sidebar/style.scss

@@ -28,3 +28,10 @@
 		font-size: $default-font-size;
 	}
 }
+
+// TODO: These styles should be absorbed by DataForm API.
+// @see https://github.com/WordPress/gutenberg/issues/75916
+.fields-controls__password {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
+}

package/src/components/style-book/index.js

@@ -375,6 +375,7 @@ function StyleBook(
  * @param {Function} props.onPathChange Callback when the path changes.
  * @param {Object}   props.userConfig   User configuration.
  * @param {boolean}  props.isStatic     Whether the stylebook is static or clickable.
+ * @param {Object}   props.settings     Optional editor settings to use instead of the editor store settings.
  * @return {Object} Style Book Preview component.
  */
 export const StyleBookPreview = ( {
@@ -382,10 +383,11 @@ export const StyleBookPreview = ( {
 	isStatic = false,
 	path,
 	onPathChange,
+	settings: settingsProp,
 } ) => {
 	const editorSettings = useSelect(
-		( select ) => select( editorStore ).getEditorSettings(),
-		[]
+		( select ) => settingsProp ?? select( editorStore ).getEditorSettings(),
+		[ settingsProp ]
 	);
 
 	const canUserUploadMedia = useSelect(

package/src/components/styles-canvas/revisions.js

@@ -23,7 +23,7 @@ import { unlock } from '../../lock-unlock';
 
 const {
 	ExperimentalBlockEditorProvider,
-	__unstableBlockStyleVariationOverridesWithConfig,
+	BlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 
 function isObjectEmpty( object ) {
@@ -133,7 +133,7 @@ function StylesCanvasRevisions( { path }, ref ) {
 					 * so they can access any registered style overrides.
 					 */ }
 					<EditorStyles styles={ editorStyles } />
-					<__unstableBlockStyleVariationOverridesWithConfig
+					<BlockStyleVariationOverridesWithConfig
 						config={ mergedConfig }
 					/>
 				</ExperimentalBlockEditorProvider>