@wordpress/editor 14.38.0 → 14.39.0

package/src/components/sidebar/index.js

@@ -31,11 +31,13 @@ import PostTransformPanel from '../post-transform-panel';
 import SidebarHeader from './header';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
+import { MediaMetadataPanel } from '../media';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import {
+	ATTACHMENT_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
@@ -53,12 +55,17 @@ const SidebarContent = ( {
 	keyboardShortcut,
 	onActionPerformed,
 	extraPanels,
+	postType,
 } ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebar` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
 	// underlying slot/fill.
 	const tabsContextValue = useContext( Tabs.Context );
+	const isAttachment = postType === ATTACHMENT_POST_TYPE;
+	const isRevisionsMode = useSelect( ( select ) => {
+		return unlock( select( editorStore ) ).isRevisionsMode();
+	} );
 
 	// This effect addresses a race condition caused by tabbing from the last
 	// block in the editor into the settings sidebar. Without this effect, the
@@ -111,18 +118,34 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostSummary onActionPerformed={ onActionPerformed } />
-					<PluginDocumentSettingPanel.Slot />
-					<TemplateContentPanel />
-					<TemplatePartContentPanel />
-					<PostTransformPanel />
-					<PostTaxonomiesPanel />
-					<PatternOverridesPanel />
-					{ extraPanels }
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
-					<BlockInspector />
+					{ isAttachment ? (
+						<MediaMetadataPanel
+							onActionPerformed={ onActionPerformed }
+						/>
+					) : (
+						<>
+							<PostSummary
+								onActionPerformed={ onActionPerformed }
+							/>
+							{ ! isRevisionsMode && (
+								<>
+									<PluginDocumentSettingPanel.Slot />
+									<TemplateContentPanel />
+									<TemplatePartContentPanel />
+									<PostTransformPanel />
+									<PostTaxonomiesPanel />
+									<PatternOverridesPanel />
+									{ extraPanels }
+								</>
+							) }
+						</>
+					) }
 				</Tabs.TabPanel>
+				{ ! isAttachment && (
+					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+						<BlockInspector />
+					</Tabs.TabPanel>
+				) }
 			</Tabs.Context.Provider>
 		</PluginSidebar>
 	);
@@ -130,7 +153,7 @@ const SidebarContent = ( {
 
 const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, showSummary } = useSelect(
+	const { tabName, keyboardShortcut, showSummary, postType } = useSelect(
 		( select ) => {
 			const shortcut = select(
 				keyboardShortcutsStore
@@ -151,6 +174,8 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 					: sidebars.document;
 			}
 
+			const _postType = select( editorStore ).getCurrentPostType();
+
 			return {
 				tabName: _tabName,
 				keyboardShortcut: shortcut,
@@ -158,7 +183,8 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 					TEMPLATE_POST_TYPE,
 					TEMPLATE_PART_POST_TYPE,
 					NAVIGATION_POST_TYPE,
-				].includes( select( editorStore ).getCurrentPostType() ),
+				].includes( _postType ),
+				postType: _postType,
 			};
 		},
 		[]
@@ -187,6 +213,7 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 				showSummary={ showSummary }
 				onActionPerformed={ onActionPerformed }
 				extraPanels={ extraPanels }
+				postType={ postType }
 			/>
 		</Tabs>
 	);

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

@@ -1,8 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	ExternalLink,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -17,6 +22,7 @@ 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';
@@ -29,6 +35,8 @@ 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
@@ -36,23 +44,27 @@ import PostTrash from '../post-trash';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
-		( select ) => {
+	const { isRemovedPostStatusPanel, postType, postId, revisionId } =
+		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,
-			} = select( editorStore );
+				getCurrentRevisionId,
+			} = unlock( 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">
@@ -65,13 +77,35 @@ export default function PostSummary( { onActionPerformed } ) {
 								postId={ postId }
 								onActionPerformed={ onActionPerformed }
 							/>
-							<PostFeaturedImagePanel withPanelBody={ false } />
-							<PostExcerptPanel />
+							{ ! isRevisionsMode && (
+								<PostFeaturedImagePanel
+									withPanelBody={ false }
+								/>
+							) }
+							{ ! isRevisionsMode && <PostExcerptPanel /> }
 							<VStack spacing={ 1 }>
 								<PostContentInformation />
-								<PostLastEditedPanel />
+								{ isRevisionsMode ? (
+									<RevisionCreatedPanel />
+								) : (
+									<PostLastEditedPanel />
+								) }
 							</VStack>
-							{ ! isRemovedPostStatusPanel && (
+							{ isRevisionsMode && revisionId && (
+								<>
+									<ExternalLink
+										href={ addQueryArgs( 'revision.php', {
+											revision: revisionId,
+										} ) }
+									>
+										{ __(
+											'Open classic revisions screen'
+										) }
+									</ExternalLink>
+									<RevisionAuthorPanel />
+								</>
+							) }
+							{ shouldShowPostStatusPanel && (
 								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />

package/src/components/sidebar/style.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 
@@ -20,4 +21,10 @@
 
 .editor-sidebar {
 	@include reset;
+
+	&__revisions-block-message {
+		padding: $grid-unit-20;
+		color: $gray-700;
+		font-size: $default-font-size;
+	}
 }

package/src/components/start-page-options/index.js

@@ -18,6 +18,7 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import {
+	ATTACHMENT_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 } from '../../store/constants';
@@ -156,6 +157,7 @@ export default function StartPageOptions() {
 			postId: getCurrentPostId(),
 			enabled:
 				choosePatternModalEnabled &&
+				ATTACHMENT_POST_TYPE !== currentPostType &&
 				TEMPLATE_POST_TYPE !== currentPostType &&
 				TEMPLATE_PART_POST_TYPE !== currentPostType,
 		};

package/src/dataviews/store/private-actions.ts

@@ -36,18 +36,31 @@ import {
 	patternTitleField,
 	notesField,
 } from '@wordpress/fields';
+import {
+	altTextField,
+	attachedToField,
+	authorField as mediaAuthorField,
+	captionField,
+	dateAddedField,
+	descriptionField,
+	filenameField,
+	filesizeField,
+	mediaDimensionsField,
+	mimeTypeField,
+} from '@wordpress/media-fields';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { DESIGN_POST_TYPES } from '../../store/constants';
+import { ATTACHMENT_POST_TYPE, DESIGN_POST_TYPES } from '../../store/constants';
 import postPreviewField from '../fields/content-preview';
 import { unlock } from '../../lock-unlock';
 
 declare global {
 	interface Window {
 		__experimentalTemplateActivate?: boolean;
+		__experimentalMediaEditor?: boolean;
 	}
 }
 
@@ -125,6 +138,31 @@ export function setIsReady( kind: string, name: string ) {
 	};
 }
 
+/*
+ * Media fields for the attachment post type.
+ *
+ * Field order follows a logical grouping:
+ * 1. Metadata fields in panels (date, author, file info)
+ * 2. Core editable fields (title, alt text, caption, description)
+ *
+ * Note: media_thumbnail is not included as it's shown in the canvas preview
+ */
+const ORDERED_MEDIA_FIELDS = [
+	// Metadata in panels (collapsed by default).
+	dateAddedField,
+	mediaAuthorField,
+	filenameField,
+	mimeTypeField,
+	filesizeField,
+	mediaDimensionsField,
+	attachedToField,
+	// Regular layout fields (always visible).
+	titleField,
+	altTextField,
+	captionField,
+	descriptionField,
+];
+
 export const registerPostTypeSchema =
 	( postType: string ) =>
 	async ( { registry }: { registry: any } ) => {
@@ -206,39 +244,47 @@ export const registerPostTypeSchema =
 			permanentlyDeletePost,
 		].filter( Boolean );
 
-		const fields = [
-			postTypeConfig.supports?.thumbnail &&
-				currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
-				featuredImageField,
-			postTypeConfig.supports?.author && authorField,
-			statusField,
-			! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && dateField,
-			slugField,
-			postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
-			postTypeConfig.supports?.comments && commentStatusField,
-			postTypeConfig.supports?.trackbacks && pingStatusField,
-			( postTypeConfig.supports?.comments ||
-				postTypeConfig.supports?.trackbacks ) &&
-				discussionField,
-			templateField,
-			passwordField,
-			postTypeConfig.supports?.editor &&
-				postTypeConfig.viewable &&
-				postPreviewField,
-			hasEditorNotesSupport( postTypeConfig.supports ) && notesField,
-		].filter( Boolean );
-		if ( postTypeConfig.supports?.title ) {
-			let _titleField;
-			if ( postType === 'page' ) {
-				_titleField = pageTitleField;
-			} else if ( postType === 'wp_template' ) {
-				_titleField = templateTitleField;
-			} else if ( postType === 'wp_block' ) {
-				_titleField = patternTitleField;
-			} else {
-				_titleField = titleField;
+		// Handle attachment post type separately with media-specific fields
+		let fields;
+
+		if ( postType === ATTACHMENT_POST_TYPE ) {
+			fields = ORDERED_MEDIA_FIELDS;
+		} else {
+			fields = [
+				postTypeConfig.supports?.thumbnail &&
+					currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
+					featuredImageField,
+				postTypeConfig.supports?.author && authorField,
+				statusField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					dateField,
+				slugField,
+				postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
+				postTypeConfig.supports?.comments && commentStatusField,
+				postTypeConfig.supports?.trackbacks && pingStatusField,
+				( postTypeConfig.supports?.comments ||
+					postTypeConfig.supports?.trackbacks ) &&
+					discussionField,
+				templateField,
+				passwordField,
+				postTypeConfig.supports?.editor &&
+					postTypeConfig.viewable &&
+					postPreviewField,
+				hasEditorNotesSupport( postTypeConfig.supports ) && notesField,
+			].filter( Boolean );
+			if ( postTypeConfig.supports?.title ) {
+				let _titleField;
+				if ( postType === 'page' ) {
+					_titleField = pageTitleField;
+				} else if ( postType === 'wp_template' ) {
+					_titleField = templateTitleField;
+				} else if ( postType === 'wp_block' ) {
+					_titleField = patternTitleField;
+				} else {
+					_titleField = titleField;
+				}
+				fields.push( _titleField );
 			}
-			fields.push( _titleField );
 		}
 
 		registry.batch( () => {

package/src/store/constants.ts

@@ -19,6 +19,7 @@ export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
 export const PATTERN_POST_TYPE = 'wp_block';
 export const NAVIGATION_POST_TYPE = 'wp_navigation';
+export const ATTACHMENT_POST_TYPE = 'attachment';
 export const TEMPLATE_ORIGINS = {
 	custom: 'custom',
 	theme: 'theme',

package/src/store/private-actions.js

@@ -576,3 +576,73 @@ export function setCanvasMinHeight( minHeight ) {
 		minHeight,
 	};
 }
+
+/**
+ * Set the current revision ID for revisions preview mode.
+ * Pass a revision ID to enter revisions mode, or null to exit.
+ *
+ * @param {number|null} revisionId The revision ID, or null to exit revisions mode.
+ * @return {Object} Action object.
+ */
+export function setCurrentRevisionId( revisionId ) {
+	return {
+		type: 'SET_CURRENT_REVISION_ID',
+		revisionId,
+	};
+}
+
+/**
+ * Restore a revision by replacing the current content with the revision's content
+ * and auto-saving.
+ *
+ * @param {number} revisionId The revision ID to restore.
+ */
+export const restoreRevision =
+	( revisionId ) =>
+	async ( { select, dispatch, registry } ) => {
+		const postType = select.getCurrentPostType();
+		const postId = select.getCurrentPostId();
+
+		const revision = registry
+			.select( coreStore )
+			.getRevision( 'postType', postType, postId, revisionId, {
+				context: 'edit',
+			} );
+
+		if ( ! revision ) {
+			return;
+		}
+
+		// Build the edits object with all restorable fields from the revision.
+		// Setting blocks to undefined clears edited blocks, forcing a re-parse of content.
+		const edits = {
+			blocks: undefined,
+			content: revision.content.raw,
+		};
+		if ( revision.title?.raw !== undefined ) {
+			edits.title = revision.title.raw;
+		}
+		if ( revision.excerpt?.raw !== undefined ) {
+			edits.excerpt = revision.excerpt.raw;
+		}
+		if ( revision.meta !== undefined ) {
+			edits.meta = revision.meta;
+		}
+
+		// Apply edits and save.
+		dispatch.editPost( edits );
+
+		// Exit revisions mode.
+		dispatch.setCurrentRevisionId( null );
+
+		// Save the post to persist the restored revision.
+		await dispatch.savePost();
+
+		// Show success notice.
+		registry
+			.dispatch( noticesStore )
+			.createSuccessNotice( __( 'Revision restored.' ), {
+				type: 'snackbar',
+				id: 'editor-revision-restored',
+			} );
+	};

package/src/store/private-selectors.js

@@ -300,3 +300,57 @@ export function getShowStylebook( state ) {
 export function getCanvasMinHeight( state ) {
 	return state.canvasMinHeight;
 }
+
+/**
+ * Returns whether the editor is in revisions preview mode.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether revisions mode is active.
+ */
+export function isRevisionsMode( state ) {
+	return state.revisionId !== null;
+}
+
+/**
+ * Returns the current revision ID in revisions mode.
+ *
+ * @param {Object} state Global application state.
+ * @return {number|null} The revision ID, or null if not in revisions mode.
+ */
+export function getCurrentRevisionId( state ) {
+	return state.revisionId;
+}
+
+/**
+ * Returns the current revision object in revisions mode.
+ *
+ * @param {Object} state Global application state.
+ * @return {Object|null|undefined} The revision object, null if loading, or undefined if not in revisions mode.
+ */
+export const getCurrentRevision = createRegistrySelector(
+	( select ) => ( state ) => {
+		const revisionId = getCurrentRevisionId( state );
+		if ( ! revisionId ) {
+			return undefined;
+		}
+
+		const { type: postType, id: postId } = getCurrentPost( state );
+		// - Use getRevisions (plural) instead of getRevision (singular) to
+		//   avoid a race condition where both API calls complete around the
+		//   same time and the single revision fetch overwrites the list in the
+		//   store.
+		// - getRevision also needs to be updated to check if there's any
+		//   received revisions from the collection API call to avoid unnecessary
+		//   API calls.
+		const revisions = select( coreStore ).getRevisions(
+			'postType',
+			postType,
+			postId,
+			{ per_page: -1, context: 'edit' }
+		);
+		if ( ! revisions ) {
+			return null;
+		}
+		return revisions.find( ( r ) => r.id === revisionId ) ?? null;
+	}
+);

package/src/store/reducer.js

@@ -433,6 +433,22 @@ export function canvasMinHeight( state = 0, action ) {
 	return state;
 }
 
+/**
+ * Reducer for the revisions preview mode.
+ * Stores the current revision ID, or null if not in revisions mode.
+ *
+ * @param {number|null} state  Current revision ID.
+ * @param {Object}      action Dispatched action.
+ * @return {number|null} Updated state.
+ */
+export function revisionId( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_CURRENT_REVISION_ID':
+			return action.revisionId;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -455,5 +471,6 @@ export default combineReducers( {
 	stylesPath,
 	showStylebook,
 	canvasMinHeight,
+	revisionId,
 	dataviews: dataviewsReducer,
 } );

package/src/store/selectors.js

@@ -20,6 +20,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import {
+	ATTACHMENT_POST_TYPE,
 	EDIT_MERGE_PROPERTIES,
 	PERMALINK_POSTNAME_REGEX,
 	ONE_MINUTE_IN_MS,
@@ -486,6 +487,11 @@ export function isEditedPostPublishable( state ) {
 	//
 	//  See: <PostPublishButton /> (`isButtonEnabled` assigned by `isSaveable`).
 
+	// Attachments should only be publishable if they have unsaved changes.
+	if ( post.type === ATTACHMENT_POST_TYPE ) {
+		return isEditedPostDirty( state );
+	}
+
 	return (
 		isEditedPostDirty( state ) ||
 		[ 'publish', 'private', 'future' ].indexOf( post.status ) === -1

package/src/store/test/selectors.js

@@ -206,6 +206,7 @@ describe( 'selectors', () => {
 
 	beforeEach( () => {
 		registerBlockType( 'core/block', {
+			apiVersion: 3,
 			save: () => null,
 			category: 'reusable',
 			title: 'Reusable Block Stub',
@@ -215,6 +216,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-a', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'design',
 			title: 'Test Block A',
@@ -223,6 +225,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-b', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block B',
@@ -234,6 +237,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-c', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block C',
@@ -243,6 +247,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/freeform', {
+			apiVersion: 3,
 			save: ( props ) => <RawHTML>{ props.attributes.content }</RawHTML>,
 			category: 'text',
 			title: 'Test Freeform Content Handler',
@@ -258,6 +263,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-default', {
+			apiVersion: 3,
 			category: 'text',
 			title: 'default',
 			attributes: {
@@ -2332,6 +2338,7 @@ describe( 'selectors', () => {
 			originalDefaultBlockName = getDefaultBlockName();
 
 			registerBlockType( 'core/default', {
+				apiVersion: 3,
 				category: 'text',
 				title: 'default',
 				attributes: {

package/src/store/utils/notice-builder.js

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { ATTACHMENT_POST_TYPE } from '../constants';
+
 /**
  * Builds the arguments for a success notification dispatch.
  *
@@ -32,6 +37,10 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
 	if ( willTrash ) {
 		noticeMessage = postType.labels.item_trashed;
 		shouldShowLink = false;
+	} else if ( post.type === ATTACHMENT_POST_TYPE ) {
+		// Attachments should always show a simple updated message because they don't have a draft state.
+		noticeMessage = __( 'Media updated.' );
+		shouldShowLink = false;
 	} else if ( ! isPublished && ! willPublish ) {
 		// If saving a non-published post, don't show notice.
 		noticeMessage = __( 'Draft saved.' );

package/src/style.scss

@@ -2,6 +2,7 @@
 @use "@wordpress/interface/build-style/style.css" as *;
 @use "@wordpress/global-styles-ui/build-style/style.css" as *;
 @use "@wordpress/dataviews/build-style/style.css" as *;
+@use "@wordpress/media-editor/build-style/style.css" as *;
 @use "./components/autocompleters/style.scss" as *;
 @use "./components/collab-sidebar/style.scss" as *;
 @use "./components/collapsible-block-toolbar/style.scss" as *;
@@ -35,6 +36,7 @@
 @use "./components/post-panel-row/style.scss" as *;
 @use "./components/post-panel-section/style.scss" as *;
 @use "./components/post-publish-panel/style.scss" as *;
+@use "./components/post-revisions-preview/style.scss" as *;
 @use "./components/post-saved-state/style.scss" as *;
 @use "./components/post-schedule/style.scss" as *;
 @use "./components/post-status/style.scss" as *;