@wordpress/editor 14.38.0 → 14.39.0

package/src/components/header/index.js

@@ -4,7 +4,6 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
-import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
@@ -12,10 +11,10 @@ import { PinnedItems } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import BackButton, { useHasBackButton } from './back-button';
 import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
 import DocumentTools from '../document-tools';
+import HeaderSkeleton from './header-skeleton';
 import MoreMenu from '../more-menu';
 import PostPreviewButton from '../post-preview-button';
 import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
@@ -25,28 +24,13 @@ import PreviewDropdown from '../preview-dropdown';
 import ZoomOutToggle from '../zoom-out-toggle';
 import { store as editorStore } from '../../store';
 import {
+	ATTACHMENT_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 
-const toolbarVariations = {
-	distractionFreeDisabled: { y: '-50px' },
-	distractionFreeHover: { y: 0 },
-	distractionFreeHidden: { y: '-50px' },
-	visible: { y: 0 },
-	hidden: { y: 0 },
-};
-
-const backButtonVariations = {
-	distractionFreeDisabled: { x: '-100%' },
-	distractionFreeHover: { x: 0 },
-	distractionFreeHidden: { x: '-100%' },
-	visible: { x: 0 },
-	hidden: { x: 0 },
-};
-
 function Header( {
 	customSaveButton,
 	forceIsDirty,
@@ -64,6 +48,7 @@ function Header( {
 		hasBlockSelection,
 		hasSectionRootClientId,
 		isStylesCanvasActive,
+		isAttachment,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -89,6 +74,9 @@ function Header( {
 			isStylesCanvasActive:
 				!! getStylesPath()?.startsWith( '/revisions' ) ||
 				getShowStylebook(),
+			isAttachment:
+				getCurrentPostType() === ATTACHMENT_POST_TYPE &&
+				window?.__experimentalMediaEditor,
 		};
 	}, [] );
 
@@ -98,6 +86,7 @@ function Header( {
 
 	const disablePreviewOption =
 		[
+			ATTACHMENT_POST_TYPE,
 			NAVIGATION_POST_TYPE,
 			TEMPLATE_PART_POST_TYPE,
 			PATTERN_POST_TYPE,
@@ -111,95 +100,73 @@ function Header( {
 		( ! hasFixedToolbar ||
 			( hasFixedToolbar &&
 				( ! hasBlockSelection || isBlockToolsCollapsed ) ) );
-	const hasBackButton = useHasBackButton();
 
-	/*
-	 * The edit-post-header classname is only kept for backward compatibility
-	 * as some plugins might be relying on its presence.
-	 */
 	return (
-		<div className="editor-header edit-post-header">
-			{ hasBackButton && (
-				<motion.div
-					className="editor-header__back-button"
-					variants={ backButtonVariations }
-					transition={ { type: 'tween' } }
-				>
-					<BackButton.Slot />
-				</motion.div>
-			) }
-			<motion.div
-				variants={ toolbarVariations }
-				className="editor-header__toolbar"
-				transition={ { type: 'tween' } }
-			>
-				<DocumentTools
-					disableBlockTools={ isStylesCanvasActive || isTextEditor }
-				/>
-				{ hasFixedToolbar && isLargeViewport && (
-					<CollapsibleBlockToolbar
-						isCollapsed={ isBlockToolsCollapsed }
-						onToggle={ setIsBlockToolsCollapsed }
+		<HeaderSkeleton
+			toolbar={
+				<>
+					{ ! isAttachment && (
+						<DocumentTools
+							disableBlockTools={
+								isStylesCanvasActive || isTextEditor
+							}
+						/>
+					) }
+					{ hasFixedToolbar && isLargeViewport && (
+						<CollapsibleBlockToolbar
+							isCollapsed={ isBlockToolsCollapsed }
+							onToggle={ setIsBlockToolsCollapsed }
+						/>
+					) }
+				</>
+			}
+			center={ hasCenter ? <DocumentBar /> : undefined }
+			settings={
+				<>
+					{ ! customSaveButton && ! isPublishSidebarOpened && (
+						/*
+						 * This button isn't completely hidden by the publish sidebar.
+						 * We can't hide the whole toolbar when the publish sidebar is open because
+						 * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+						 * We track that DOM node to return focus to the PostPublishButtonOrToggle
+						 * when the publish sidebar has been closed.
+						 */
+						<PostSavedState forceIsDirty={ forceIsDirty } />
+					) }
+
+					<PostViewLink />
+
+					<PreviewDropdown
+						forceIsAutosaveable={ forceIsDirty }
+						disabled={ disablePreviewOption }
 					/>
-				) }
-			</motion.div>
-			{ hasCenter && (
-				<motion.div
-					className="editor-header__center"
-					variants={ toolbarVariations }
-					transition={ { type: 'tween' } }
-				>
-					<DocumentBar />
-				</motion.div>
-			) }
-			<motion.div
-				variants={ toolbarVariations }
-				transition={ { type: 'tween' } }
-				className="editor-header__settings"
-			>
-				{ ! customSaveButton && ! isPublishSidebarOpened && (
-					/*
-					 * This button isn't completely hidden by the publish sidebar.
-					 * We can't hide the whole toolbar when the publish sidebar is open because
-					 * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					 * We track that DOM node to return focus to the PostPublishButtonOrToggle
-					 * when the publish sidebar has been closed.
-					 */
-					<PostSavedState forceIsDirty={ forceIsDirty } />
-				) }
-
-				<PostViewLink />
-
-				<PreviewDropdown
-					forceIsAutosaveable={ forceIsDirty }
-					disabled={ disablePreviewOption }
-				/>
 
-				<PostPreviewButton
-					className="editor-header__post-preview-button"
-					forceIsAutosaveable={ forceIsDirty }
-				/>
-
-				{ isWideViewport && canBeZoomedOut && (
-					<ZoomOutToggle disabled={ isStylesCanvasActive } />
-				) }
-
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core" />
-				) }
-
-				{ ! customSaveButton && (
-					<PostPublishButtonOrToggle
-						forceIsDirty={ forceIsDirty }
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
+					<PostPreviewButton
+						className="editor-header__post-preview-button"
+						forceIsAutosaveable={ forceIsDirty }
 					/>
-				) }
-				{ customSaveButton }
-				<MoreMenu />
-			</motion.div>
-		</div>
+
+					{ isWideViewport && canBeZoomedOut && (
+						<ZoomOutToggle disabled={ isStylesCanvasActive } />
+					) }
+
+					{ ( isWideViewport || ! showIconLabels ) && (
+						<PinnedItems.Slot scope="core" />
+					) }
+
+					{ ! customSaveButton && (
+						<PostPublishButtonOrToggle
+							forceIsDirty={ forceIsDirty }
+							setEntitiesSavedStatesCallback={
+								setEntitiesSavedStatesCallback
+							}
+						/>
+					) }
+					{ customSaveButton }
+					{ ! isAttachment && <MoreMenu /> }
+				</>
+			}
+		/>
 	);
 }
 

package/src/components/header/style.scss

@@ -97,6 +97,10 @@
 			margin-inline-end: $grid-unit;
 		}
 	}
+
+	.editor-revisions-header & {
+		clip-path: none;
+	}
 }
 
 /**

package/src/components/media/index.js

@@ -0,0 +1,2 @@
+export { default as MediaPreview } from './preview';
+export { default as MediaMetadataPanel } from './metadata-panel';

package/src/components/media/metadata-panel.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaEditorProvider, MediaForm } from '@wordpress/media-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import usePostFields from '../post-fields';
+import PostCardPanel from '../post-card-panel';
+import PostPanelSection from '../post-panel-section';
+
+/**
+ * Media metadata panel for the editor sidebar.
+ * Displays a form for editing media properties with PostCardPanel header.
+ *
+ * @param {Object}   props                   - Component props.
+ * @param {Function} props.onActionPerformed - Callback when an action is performed.
+ * @return {Element} The MediaMetadataPanel component.
+ */
+export default function MediaMetadataPanel( { onActionPerformed } ) {
+	const { media, postType, postId } = useSelect( ( select ) => {
+		const _postType = select( editorStore ).getCurrentPostType();
+		const _postId = select( editorStore ).getCurrentPostId();
+		const currentPost = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			_postType,
+			_postId,
+			{
+				_embed: 'author,wp:attached-to',
+			}
+		);
+		return {
+			media: currentPost,
+			postType: _postType,
+			postId: _postId,
+		};
+	}, [] );
+
+	const { editPost } = useDispatch( editorStore );
+	const fields = usePostFields( { postType: 'attachment' } );
+
+	const settings = useMemo(
+		() => ( {
+			fields,
+		} ),
+		[ fields ]
+	);
+
+	const handleUpdate = ( updates ) => {
+		editPost( updates );
+	};
+
+	return (
+		<PostPanelSection className="editor-media-metadata-panel">
+			<MediaEditorProvider
+				value={ media }
+				settings={ settings }
+				onChange={ handleUpdate }
+			>
+				<MediaForm
+					header={
+						<PostCardPanel
+							postType={ postType }
+							postId={ postId }
+							onActionPerformed={ onActionPerformed }
+						/>
+					}
+				/>
+			</MediaEditorProvider>
+		</PostPanelSection>
+	);
+}

package/src/components/media/preview.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	MediaEditorProvider,
+	MediaPreview as BaseMediaPreview,
+} from '@wordpress/media-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Media preview component for the editor.
+ * Connects the base MediaPreview component to the editor store.
+ *
+ * @param {Object} props - Additional props to spread on MediaPreview.
+ * @return {Element} The MediaPreview component.
+ */
+export default function MediaPreview( props ) {
+	const { media } = useSelect( ( select ) => {
+		const currentPost = select( editorStore ).getCurrentPost();
+		return {
+			media: currentPost,
+		};
+	}, [] );
+
+	return (
+		<MediaEditorProvider value={ media }>
+			<BaseMediaPreview { ...props } />
+		</MediaEditorProvider>
+	);
+}

package/src/components/more-menu/index.js

@@ -26,7 +26,7 @@ import ToolsMoreMenuGroup from './tools-more-menu-group';
 import ViewMoreMenuGroup from './view-more-menu-group';
 import { store as editorStore } from '../../store';
 
-export default function MoreMenu() {
+export default function MoreMenu( { disabled = false } ) {
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const { toggleDistractionFree } = useDispatch( editorStore );
@@ -54,6 +54,7 @@ export default function MoreMenu() {
 					...( showIconLabels && { variant: 'tertiary' } ),
 					tooltipPosition: 'bottom',
 					size: 'compact',
+					disabled,
 				} }
 			>
 				{ ( { onClose } ) => (

package/src/components/post-card-panel/index.js

@@ -3,11 +3,13 @@
  */
 import {
 	Icon,
+	Button,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
@@ -46,12 +48,33 @@ export default function PostCardPanel( {
 		() => ( Array.isArray( postId ) ? postId : [ postId ] ),
 		[ postId ]
 	);
-	const { postTitle, icon, labels } = useSelect(
+	const { postTitle, icon, labels, isRevision } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getCurrentTheme, getPostType } =
 				select( coreStore );
-			const { getPostIcon } = unlock( select( editorStore ) );
+			const {
+				getPostIcon,
+				getCurrentPostType,
+				isRevisionsMode,
+				getCurrentRevision,
+			} = unlock( select( editorStore ) );
 			let _title = '';
+
+			// In revisions mode, use the current revision.
+			if ( isRevisionsMode() ) {
+				const parentPostType = getCurrentPostType();
+				const _record = getCurrentRevision();
+				_title = _record?.title?.rendered || _record?.title?.raw || '';
+				return {
+					postTitle: _title,
+					icon: getPostIcon( parentPostType, {
+						area: _record?.area,
+					} ),
+					labels: getPostType( parentPostType )?.labels,
+					isRevision: true,
+				};
+			}
+
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -119,11 +142,24 @@ export default function PostCardPanel( {
 					) }
 				</Text>
 				{ postIds.length === 1 && (
-					<PostActions
-						postType={ postType }
-						postId={ postIds[ 0 ] }
-						onActionPerformed={ onActionPerformed }
-					/>
+					<>
+						{ isRevision ? (
+							<Button
+								size="small"
+								icon={ moreVertical }
+								label={ __( 'Actions' ) }
+								disabled
+								accessibleWhenDisabled
+								className="editor-all-actions-button"
+							/>
+						) : (
+							<PostActions
+								postType={ postType }
+								postId={ postIds[ 0 ] }
+								onActionPerformed={ onActionPerformed }
+							/>
+						) }
+					</>
 				) }
 			</HStack>
 			{ postIds.length > 1 && (

package/src/components/post-content-information/index.js

@@ -12,6 +12,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
@@ -25,6 +26,16 @@ export default function PostContentInformation() {
 	const { postContent } = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getCurrentPostType, getCurrentPostId } =
 			select( editorStore );
+		const { getCurrentRevision, isRevisionsMode } = unlock(
+			select( editorStore )
+		);
+
+		if ( isRevisionsMode() ) {
+			return {
+				postContent: getCurrentRevision()?.content?.raw,
+			};
+		}
+
 		const { canUser } = select( coreStore );
 		const { getEntityRecord } = select( coreStore );
 		const siteSettings = canUser( 'read', {

package/src/components/post-last-edited-panel/index.js

@@ -17,19 +17,18 @@ export default function PostLastEditedPanel() {
 			select( editorStore ).getEditedPostAttribute( 'modified' ),
 		[]
 	);
-	const lastEditedText =
-		modified &&
-		sprintf(
-			// translators: %s: Human-readable time difference, e.g. "2 days ago".
-			__( 'Last edited %s.' ),
-			humanTimeDiff( modified )
-		);
-	if ( ! lastEditedText ) {
+	if ( ! modified ) {
 		return null;
 	}
 	return (
 		<div className="editor-post-last-edited-panel">
-			<Text>{ lastEditedText }</Text>
+			<Text>
+				{ sprintf(
+					// translators: %s: Human-readable time difference, e.g. "2 days ago".
+					__( 'Last edited %s.' ),
+					humanTimeDiff( modified )
+				) }
+			</Text>
 		</div>
 	);
 }

package/src/components/post-last-revision/index.js

@@ -3,9 +3,8 @@
  */
 import { sprintf, __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -13,6 +12,7 @@ import { addQueryArgs } from '@wordpress/url';
 import PostLastRevisionCheck from './check';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function usePostLastRevisionInfo() {
 	return useSelect( ( select ) => {
@@ -32,14 +32,13 @@ function usePostLastRevisionInfo() {
  */
 function PostLastRevision() {
 	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
 
 	return (
 		<PostLastRevisionCheck>
 			<Button
 				__next40pxDefaultSize
-				href={ addQueryArgs( 'revision.php', {
-					revision: lastRevisionId,
-				} ) }
+				onClick={ () => setCurrentRevisionId( lastRevisionId ) }
 				className="editor-post-last-revision__title"
 				icon={ backup }
 				iconPosition="right"
@@ -55,13 +54,13 @@ function PostLastRevision() {
 
 export function PrivatePostLastRevision() {
 	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+
 	return (
 		<PostLastRevisionCheck>
 			<PostPanelRow label={ __( 'Revisions' ) }>
 				<Button
-					href={ addQueryArgs( 'revision.php', {
-						revision: lastRevisionId,
-					} ) }
+					onClick={ () => setCurrentRevisionId( lastRevisionId ) }
 					className="editor-private-post-last-revision__button"
 					text={ revisionsCount }
 					variant="tertiary"

package/src/components/post-publish-button/label.js

@@ -9,6 +9,7 @@ import { useViewportMatch } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { ATTACHMENT_POST_TYPE } from '../../store/constants';
 
 /**
  * Renders the label for the publish button.
@@ -27,6 +28,7 @@ export default function PublishButtonLabel() {
 		hasNonPostEntityChanges,
 		postStatusHasChanged,
 		postStatus,
+		postType,
 	} = useSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
@@ -66,6 +68,13 @@ export default function PublishButtonLabel() {
 		return __( 'Saving…' );
 	}
 	if ( ! hasPublishAction ) {
+		// For attachments, always show "Save" since they don't have a publish workflow
+		if (
+			postType === ATTACHMENT_POST_TYPE &&
+			window?.__experimentalMediaEditor
+		) {
+			return __( 'Save' );
+		}
 		// TODO: this is because "Submit for review" string is too long in some languages.
 		// @see https://github.com/WordPress/gutenberg/issues/10475
 		return isSmallerThanMediumViewport

package/src/components/post-publish-button/post-publish-button-or-toggle.js

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import PostPublishButton from './index';
 import { store as editorStore } from '../../store';
+import { ATTACHMENT_POST_TYPE } from '../../store/constants';
 
 const IS_TOGGLE = 'toggle';
 const IS_BUTTON = 'button';
@@ -30,6 +31,7 @@ export default function PostPublishButtonOrToggle( {
 		isScheduled,
 		postStatus,
 		postStatusHasChanged,
+		postType,
 	} = useSelect( ( select ) => {
 		return {
 			hasPublishAction:
@@ -48,14 +50,18 @@ export default function PostPublishButtonOrToggle( {
 			postStatus:
 				select( editorStore ).getEditedPostAttribute( 'status' ),
 			postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
+			postType: select( editorStore ).getCurrentPostType(),
 		};
 	}, [] );
 
 	/**
 	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
 	 *
-	 * 1) We want to show a BUTTON when the post status is at the _final stage_
-	 * for a particular role (see https://wordpress.org/documentation/article/post-status/):
+	 * 1) Attachments always show a BUTTON since they don't have a publish workflow
+	 *    and should save directly without pre-publish checks.
+	 *
+	 * 2) We want to show a BUTTON when the post status is at the _final stage_
+	 *    for a particular role (see https://wordpress.org/documentation/article/post-status/):
 	 *
 	 * - is published
 	 * - post status has changed explicitly to something different than 'future' or 'publish'
@@ -67,14 +73,16 @@ export default function PostPublishButtonOrToggle( {
 	 * 	 we decided to take into account the viewport in that case.
 	 *  	 See: https://github.com/WordPress/gutenberg/issues/10475
 	 *
-	 * 2) Then, in small viewports, we'll show a TOGGLE.
+	 * 3) Then, in small viewports, we'll show a TOGGLE.
 	 *
-	 * 3) Finally, we'll use the publish sidebar status to decide:
+	 * 4) Finally, we'll use the publish sidebar status to decide:
 	 *
 	 * - if it is enabled, we show a TOGGLE
 	 * - if it is disabled, we show a BUTTON
 	 */
-	if (
+	if ( postType === ATTACHMENT_POST_TYPE ) {
+		component = IS_BUTTON;
+	} else if (
 		isPublished ||
 		( postStatusHasChanged &&
 			! [ 'future', 'publish' ].includes( postStatus ) ) ||

package/src/components/post-revisions-preview/index.js

@@ -0,0 +1,2 @@
+export { default as RevisionsHeader } from './revisions-header';
+export { default as RevisionsCanvas } from './revisions-canvas';