@wordpress/editor 14.38.0 → 14.39.0

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

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { createBlock, parse } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import VisualEditor from '../visual-editor';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+/**
+ * Canvas component that renders a post revision in read-only mode.
+ *
+ * @return {JSX.Element} The revisions canvas component.
+ */
+export default function RevisionsCanvas() {
+	const { revision, postType, blockEditorSettings } = useSelect(
+		( select ) => {
+			const { getCurrentRevision, getCurrentPostType } = unlock(
+				select( editorStore )
+			);
+			return {
+				revision: getCurrentRevision(),
+				postType: getCurrentPostType(),
+				blockEditorSettings: select( blockEditorStore ).getSettings(),
+			};
+		},
+		[]
+	);
+
+	const blocks = useMemo( () => {
+		const parsedBlocks = parse( revision?.content?.raw ?? '' );
+		if ( postType === 'wp_navigation' ) {
+			return [
+				createBlock(
+					'core/navigation',
+					{ templateLock: false },
+					parsedBlocks
+				),
+			];
+		}
+		return parsedBlocks;
+	}, [ revision?.content?.raw, postType ] );
+
+	const settings = useMemo(
+		() => ( {
+			...blockEditorSettings,
+			isPreviewMode: true,
+		} ),
+		[ blockEditorSettings ]
+	);
+
+	return revision ? (
+		<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>
+			<VisualEditor />
+		</ExperimentalBlockEditorProvider>
+	) : (
+		<div className="editor-revisions-canvas__loading">
+			<Spinner />
+		</div>
+	);
+}

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

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { PinnedItems } from '@wordpress/interface';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeaderSkeleton from '../header/header-skeleton';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PreviewDropdown from '../preview-dropdown';
+import RevisionsSlider from './revisions-slider';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Header component for revisions preview mode.
+ *
+ * @return {JSX.Element} The revisions header component.
+ */
+function RevisionsHeader() {
+	const isWideViewport = useViewportMatch( 'large' );
+	const { postType, showIconLabels, currentRevisionId } = useSelect(
+		( select ) => {
+			const { get: getPreference } = select( preferencesStore );
+			const { getCurrentPostType } = select( editorStore );
+
+			return {
+				postType: getCurrentPostType(),
+				showIconLabels: getPreference( 'core', 'showIconLabels' ),
+				currentRevisionId: unlock(
+					select( editorStore )
+				).getCurrentRevisionId(),
+			};
+		},
+		[]
+	);
+
+	const { setCurrentRevisionId, restoreRevision } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const disablePreviewOption = [
+		NAVIGATION_POST_TYPE,
+		TEMPLATE_PART_POST_TYPE,
+		PATTERN_POST_TYPE,
+	].includes( postType );
+
+	const canRestore = !! currentRevisionId;
+
+	const handleRestore = () => {
+		if ( currentRevisionId ) {
+			restoreRevision( currentRevisionId );
+		}
+	};
+
+	return (
+		<HeaderSkeleton
+			className="editor-revisions-header"
+			center={ <RevisionsSlider /> }
+			settings={
+				<>
+					<PreviewDropdown disabled={ disablePreviewOption } />
+
+					<PostPreviewButton className="editor-header__post-preview-button" />
+
+					{ ( isWideViewport || ! showIconLabels ) && (
+						<PinnedItems.Slot scope="core" />
+					) }
+
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						size="compact"
+						onClick={ () => setCurrentRevisionId( null ) }
+					>
+						{ __( 'Exit' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						accessibleWhenDisabled
+						variant="primary"
+						size="compact"
+						className="editor-revisions-header__restore-button"
+						disabled={ ! canRestore }
+						onClick={ handleRestore }
+					>
+						{ __( 'Restore' ) }
+					</Button>
+					<MoreMenu disabled />
+				</>
+			}
+		/>
+	);
+}
+
+export default RevisionsHeader;

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

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { RangeControl, Spinner } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Slider component for navigating revisions.
+ *
+ * @return {JSX.Element} The revisions slider component.
+ */
+function RevisionsSlider() {
+	const { revisions, isLoading, currentRevisionId } = useSelect(
+		( select ) => {
+			const { getCurrentPostId, getCurrentPostType } =
+				select( editorStore );
+			const { getRevisions, isResolving } = select( coreStore );
+
+			const postId = getCurrentPostId();
+			const postType = getCurrentPostType();
+
+			if ( ! postId || ! postType ) {
+				return {};
+			}
+
+			const query = { per_page: -1, context: 'edit' };
+			return {
+				revisions: getRevisions( 'postType', postType, postId, query ),
+				isLoading: isResolving( 'getRevisions', [
+					'postType',
+					postType,
+					postId,
+					query,
+				] ),
+				currentRevisionId: unlock(
+					select( editorStore )
+				).getCurrentRevisionId(),
+			};
+		},
+		[]
+	);
+
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+
+	const sortedRevisions = useMemo( () => {
+		return (
+			revisions
+				?.slice()
+				.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) ) ??
+			[]
+		);
+	}, [ revisions ] );
+
+	const selectedIndex = sortedRevisions.findIndex(
+		( r ) => r.id === currentRevisionId
+	);
+
+	const handleSliderChange = ( index ) => {
+		const revision = sortedRevisions[ index ];
+		if ( revision ) {
+			setCurrentRevisionId( revision.id );
+		}
+	};
+
+	// Format date for tooltip.
+	const dateSettings = getDateSettings();
+	const renderTooltipContent = ( index ) => {
+		const revision = sortedRevisions[ index ];
+		if ( ! revision ) {
+			return index;
+		}
+		return dateI18n( dateSettings.formats.datetime, revision.date );
+	};
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	if ( ! sortedRevisions.length ) {
+		return (
+			<span className="editor-revisions-header__no-revisions">
+				{ __( 'No revisions found.' ) }
+			</span>
+		);
+	}
+
+	if ( sortedRevisions.length === 1 ) {
+		return (
+			<span className="editor-revisions-header__no-revisions">
+				{ __( 'Only one revision found.' ) }
+			</span>
+		);
+	}
+
+	return (
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			className="editor-revisions-header__slider"
+			hideLabelFromVision
+			label={ __( 'Revision' ) }
+			max={ sortedRevisions.length - 1 }
+			min={ 0 }
+			marks
+			onChange={ handleSliderChange }
+			renderTooltipContent={ renderTooltipContent }
+			value={ selectedIndex }
+			withInputField={ false }
+		/>
+	);
+}
+
+export default RevisionsSlider;

package/src/components/post-revisions-preview/style.scss

@@ -0,0 +1,22 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-revisions-header__slider {
+	width: 100%;
+
+	.components-range-control__tooltip {
+		white-space: nowrap;
+	}
+}
+
+.editor-revisions-header__no-revisions {
+	color: $gray-700;
+	font-size: $default-font-size;
+}
+
+.editor-revisions-canvas__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}

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

@@ -23,6 +23,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import { STATUS_OPTIONS } from '../../components/post-status';
 import { store as editorStore } from '../../store';
+import { ATTACHMENT_POST_TYPE } from '../../store/constants';
 
 /**
  * Component showing whether the post is saved or not and providing save
@@ -49,6 +50,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		showIconLabels,
 		postStatus,
 		postStatusHasChanged,
+		postType,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -77,6 +79,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 				showIconLabels: get( 'core', 'showIconLabels' ),
 				postStatus: getEditedPostAttribute( 'status' ),
 				postStatusHasChanged: !! getPostEdits()?.status,
+				postType: select( editorStore ).getCurrentPostType(),
 			};
 		},
 		[ forceIsDirty ]
@@ -99,6 +102,11 @@ export default function PostSavedState( { forceIsDirty } ) {
 		return () => clearTimeout( timeoutId );
 	}, [ isSaving ] );
 
+	// Attachments don't support draft mode, so hide this button.
+	if ( postType === ATTACHMENT_POST_TYPE ) {
+		return null;
+	}
+
 	// Once the post has been submitted for review this button
 	// is not needed for the contributor role.
 	if ( ! hasPublishAction && isPending ) {

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

@@ -31,16 +31,17 @@ import PostTypeSupportCheck from '../post-type-support-check';
 import { unlock } from '../../lock-unlock';
 
 const PostTitle = forwardRef( ( _, forwardedRef ) => {
-	const { placeholder, isEditingContentOnlySection } = useSelect(
+	const { placeholder, isEditingContentOnlySection, isPreview } = useSelect(
 		( select ) => {
 			const { getSettings, getEditedContentOnlySection } = unlock(
 				select( blockEditorStore )
 			);
-			const { titlePlaceholder } = getSettings();
+			const { titlePlaceholder, isPreviewMode } = getSettings();
 
 			return {
 				placeholder: titlePlaceholder,
 				isEditingContentOnlySection: !! getEditedContentOnlySection(),
+				isPreview: isPreviewMode,
 			};
 		},
 		[]
@@ -185,7 +186,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<h1
 			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
-			contentEditable={ ! isEditingContentOnlySection }
+			contentEditable={ ! isEditingContentOnlySection && ! isPreview }
 			className={ className }
 			aria-label={ decodedPlaceholder }
 			role="textbox"

package/src/components/provider/index.js

@@ -23,6 +23,7 @@ import { createBlock } from '@wordpress/blocks';
  */
 import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
+import { ATTACHMENT_POST_TYPE } from '../../store/constants';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
@@ -355,6 +356,31 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			return null;
 		}
 
+		const isAttachment =
+			post.type === ATTACHMENT_POST_TYPE &&
+			window?.__experimentalMediaEditor;
+
+		// Early return for attachments - no block editor needed
+		if ( isAttachment ) {
+			return (
+				<EntityProvider kind="root" type="site">
+					<EntityProvider
+						kind="postType"
+						type={ post.type }
+						id={ post.id }
+					>
+						{ children }
+						{ ! settings.isPreviewMode && (
+							<>
+								<EditorKeyboardShortcuts />
+								<KeyboardShortcutHelpModal />
+							</>
+						) }
+					</EntityProvider>
+				</EntityProvider>
+			);
+		}
+
 		return (
 			<EntityProvider kind="root" type="site">
 				<EntityProvider

package/src/components/provider/use-block-editor-settings.js

@@ -50,6 +50,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'maxUploadFileSize',
 	'allowedMimeTypes',
 	'bodyPlaceholder',
+	'canEditCSS',
 	'canLockBlocks',
 	'canUpdateBlockBindings',
 	'capabilities',
@@ -387,9 +388,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				'wp_block',
 				'wp_navigation',
 			].includes( postType ),
-			...( window.__experimentalHideBlocksBasedOnScreenSize && deviceType
-				? { [ deviceTypeKey ]: deviceType }
-				: {} ),
+			...( deviceType ? { [ deviceTypeKey ]: deviceType } : {} ),
 		};
 
 		return blockEditorSettings;

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function RevisionAuthorPanel() {
+	const authorName = useSelect( ( select ) => {
+		const { getCurrentRevision } = unlock( select( editorStore ) );
+		const revision = getCurrentRevision();
+		if ( ! revision?.author ) {
+			return null;
+		}
+		const author = select( coreStore ).getUser( revision.author );
+		return author?.name;
+	}, [] );
+
+	if ( ! authorName ) {
+		return null;
+	}
+
+	return (
+		<PostPanelRow label={ __( 'Author' ) }>
+			{ decodeEntities( authorName ) }
+		</PostPanelRow>
+	);
+}

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function RevisionCreatedPanel() {
+	const date = useSelect( ( select ) => {
+		const { getCurrentRevision } = unlock( select( editorStore ) );
+		return getCurrentRevision()?.date;
+	}, [] );
+
+	if ( ! date ) {
+		return null;
+	}
+
+	return (
+		<div className="editor-post-last-edited-panel">
+			<Text>
+				{ sprintf(
+					// translators: %s: Human-readable time difference, e.g. "2 days ago".
+					__( 'Created %s.' ),
+					humanTimeDiff( date )
+				) }
+			</Text>
+		</div>
+	);
+}

package/src/components/sidebar/header.js

@@ -11,21 +11,40 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { ATTACHMENT_POST_TYPE } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import { sidebars } from './constants';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
 const SidebarHeader = ( _, ref ) => {
-	const postTypeLabel = useSelect(
-		( select ) => select( editorStore ).getPostTypeLabel(),
+	const { postTypeLabel, isAttachment, isRevisionsMode } = useSelect(
+		( select ) => {
+			const { getPostTypeLabel, getCurrentPostType } =
+				select( editorStore );
+			const { isRevisionsMode: _isRevisionsMode } = unlock(
+				select( editorStore )
+			);
+			return {
+				postTypeLabel: getPostTypeLabel(),
+				isAttachment:
+					getCurrentPostType() === ATTACHMENT_POST_TYPE &&
+					window?.__experimentalMediaEditor,
+				isRevisionsMode: _isRevisionsMode(),
+			};
+		},
 		[]
 	);
 
-	const documentLabel = postTypeLabel
-		? decodeEntities( postTypeLabel )
-		: // translators: Default label for the Document sidebar tab, not selected.
-		  _x( 'Document', 'noun, panel' );
+	let documentLabel;
+	if ( isRevisionsMode ) {
+		documentLabel = __( 'Revision' );
+	} else if ( postTypeLabel ) {
+		documentLabel = decodeEntities( postTypeLabel );
+	} else {
+		// translators: Default label for the Document sidebar tab, not selected.
+		documentLabel = _x( 'Document', 'noun, panel' );
+	}
 
 	return (
 		<Tabs.TabList ref={ ref }>
@@ -36,14 +55,16 @@ const SidebarHeader = ( _, ref ) => {
 			>
 				{ documentLabel }
 			</Tabs.Tab>
-			<Tabs.Tab
-				tabId={ sidebars.block }
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ sidebars.block }
-			>
-				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
-				{ __( 'Block' ) }
-			</Tabs.Tab>
+			{ ! isAttachment && ! isRevisionsMode && (
+				<Tabs.Tab
+					tabId={ sidebars.block }
+					// Used for focus management in the SettingsSidebar component.
+					data-tab-id={ sidebars.block }
+				>
+					{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+					{ __( 'Block' ) }
+				</Tabs.Tab>
+			) }
 		</Tabs.TabList>
 	);
 };