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

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

@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { DataViews } from '@wordpress/dataviews';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { authorField } from '@wordpress/fields';
+
+/**
+ * Internal dependencies
+ */
+import PostLastRevisionCheck from '../post-last-revision/check';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { Badge } = unlock( componentsPrivateApis );
+const DAY_IN_MILLISECONDS = 86400000;
+const EMPTY_ARRAY = [];
+
+const REVISIONS_QUERY = {
+	per_page: 3,
+	orderby: 'date',
+	order: 'desc',
+	context: 'embed',
+	_fields: 'id,date,author',
+};
+const defaultLayouts = { activity: {} };
+const view = {
+	type: 'activity',
+	titleField: 'date',
+	fields: [ 'author' ],
+	layout: {
+		density: 'compact',
+	},
+};
+const fields = [
+	{
+		id: 'date',
+		label: __( 'Date' ),
+		render: ( { item } ) => {
+			const dateNowInMs = getDate( null ).getTime();
+			const date = getDate( item.date ?? null );
+			const displayDate =
+				dateNowInMs - date.getTime() > DAY_IN_MILLISECONDS
+					? dateI18n(
+							getSettings().formats.datetimeAbbreviated,
+							date
+					  )
+					: humanTimeDiff( date );
+			return (
+				<time
+					className="editor-post-revisions-panel__revision-date"
+					dateTime={ item.date }
+				>
+					{ displayDate }
+				</time>
+			);
+		},
+		enableSorting: false,
+		enableHiding: false,
+	},
+	authorField,
+];
+const noop = () => {};
+const paginationInfo = {};
+
+function PostRevisionsPanelContent() {
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+	const { revisionsCount, revisions, isLoading, lastRevisionId } = useSelect(
+		( select ) => {
+			const { getCurrentPostId, getCurrentPostType } =
+				select( editorStore );
+			const {
+				getCurrentPostRevisionsCount,
+				getCurrentPostLastRevisionId,
+			} = select( editorStore );
+			const { getRevisions, isResolving } = select( coreStore );
+			const query = [
+				'postType',
+				getCurrentPostType(),
+				getCurrentPostId(),
+				REVISIONS_QUERY,
+			];
+			const _revisions = getRevisions( ...query );
+			return {
+				revisionsCount: getCurrentPostRevisionsCount(),
+				lastRevisionId: getCurrentPostLastRevisionId(),
+				revisions: _revisions,
+				isLoading: isResolving( 'getRevisions', query ),
+			};
+		},
+		[]
+	);
+	return (
+		<PanelBody
+			title={
+				<HStack justify="space-between" align="center" as="span">
+					<span>{ __( 'Revisions' ) }</span>
+					<Badge className="editor-post-revisions-panel__revisions-count">
+						{ revisionsCount }
+					</Badge>
+				</HStack>
+			}
+			initialOpen={ false }
+		>
+			<VStack className="editor-post-revisions-panel">
+				<DataViews
+					view={ view }
+					onChangeView={ noop }
+					fields={ fields }
+					data={ revisions || EMPTY_ARRAY }
+					isLoading={ isLoading }
+					paginationInfo={ paginationInfo }
+					defaultLayouts={ defaultLayouts }
+					getItemId={ ( item ) => item.id }
+					isItemClickable={ () => true }
+					onClickItem={ ( item ) => {
+						setCurrentRevisionId( item.id );
+					} }
+				>
+					<DataViews.Layout />
+				</DataViews>
+				<Button
+					className="editor-post-revisions-panel__view-all"
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ () => setCurrentRevisionId( lastRevisionId ) }
+				>
+					{ __( 'View all revisions' ) }
+				</Button>
+			</VStack>
+		</PanelBody>
+	);
+}
+
+export default function PostRevisionsPanel() {
+	return (
+		<PostLastRevisionCheck>
+			<PostRevisionsPanelContent />
+		</PostLastRevisionCheck>
+	);
+}

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

@@ -0,0 +1,16 @@
+.editor-post-revisions-panel {
+	.editor-post-revisions-panel__view-all {
+		justify-content: center;
+	}
+
+	.editor-post-revisions-panel__revision-date {
+		text-transform: uppercase;
+		font-weight: 600;
+		font-size: 12px;
+	}
+}
+
+.editor-post-revisions-panel__revisions-count {
+	margin-top: -4.5px;
+	margin-bottom: -4.5px;
+}

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

@@ -1,7 +1,6 @@
 /**
  * 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';
@@ -35,11 +34,25 @@ function RevisionsSlider() {
 			}
 
 			const entityConfig = getEntityConfig( 'postType', postType );
+			const _revisionKey = entityConfig?.revisionKey || 'id';
 			const query = {
 				per_page: -1,
 				context: 'edit',
-				_fields:
-					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+				orderby: 'date',
+				order: 'asc',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						_revisionKey,
+					] ),
+				].join(),
 			};
 			return {
 				revisions: getRevisions( 'postType', postType, postId, query ),
@@ -52,7 +65,7 @@ function RevisionsSlider() {
 				currentRevisionId: unlock(
 					select( editorStore )
 				).getCurrentRevisionId(),
-				revisionKey: entityConfig?.revisionKey || 'id',
+				revisionKey: _revisionKey,
 			};
 		},
 		[]
@@ -60,21 +73,12 @@ function RevisionsSlider() {
 
 	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(
+	const selectedIndex = revisions?.findIndex(
 		( r ) => r[ revisionKey ] === currentRevisionId
 	);
 
 	const handleSliderChange = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( revision ) {
 			setCurrentRevisionId( revision[ revisionKey ] );
 		}
@@ -83,7 +87,7 @@ function RevisionsSlider() {
 	// Format date for tooltip.
 	const dateSettings = getDateSettings();
 	const renderTooltipContent = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( ! revision ) {
 			return index;
 		}
@@ -94,7 +98,7 @@ function RevisionsSlider() {
 		return <Spinner />;
 	}
 
-	if ( ! sortedRevisions.length ) {
+	if ( ! revisions?.length ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'No revisions found.' ) }
@@ -102,7 +106,7 @@ function RevisionsSlider() {
 		);
 	}
 
-	if ( sortedRevisions.length === 1 ) {
+	if ( revisions?.length === 1 ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'Only one revision found.' ) }
@@ -116,7 +120,7 @@ function RevisionsSlider() {
 			className="editor-revisions-header__slider"
 			hideLabelFromVision
 			label={ __( 'Revision' ) }
-			max={ sortedRevisions.length - 1 }
+			max={ revisions?.length - 1 }
 			min={ 0 }
 			marks
 			onChange={ handleSliderChange }

package/src/components/post-template/create-new-template-modal.js

@@ -118,10 +118,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			size="small"
 			overlayClassName="editor-post-template__create-template-modal"
 		>
-			<form
-				className="editor-post-template__create-form"
-				onSubmit={ submit }
-			>
+			<form onSubmit={ submit }>
 				<VStack spacing="3">
 					<TextControl
 						__next40pxDefaultSize

package/src/components/post-template/hooks.js

@@ -3,7 +3,8 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,20 +65,75 @@ function useTemplates( postType ) {
 	);
 }
 
-export function useAvailableTemplates( postType ) {
+export function useAvailableTemplates() {
+	const { postType, postId } = useEditedPostContext();
+	const [ postSlug ] = useEntityProp( 'postType', postType, 'slug', postId );
 	const currentTemplateSlug = useCurrentTemplateSlug();
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const templates = useTemplates( postType );
+	// Add the default template to the available ones. We don't care about
+	// possible assignment to postspage/homepage because it's guarded by
+	// `allowSwitchingTemplate` above.
+	const defaultTemplate = useSelect(
+		( select ) => {
+			// Only append the default template if the experiment is enabled.
+			if ( ! window?.__experimentalDataFormInspector ) {
+				return null;
+			}
+			// If the default template is already assigned, no need
+			// to add it to the available templates.
+			if ( ! currentTemplateSlug ) {
+				return null;
+			}
+			const { getDefaultTemplateId, getEntityRecord } =
+				select( coreStore );
+			let slug;
+			if ( postSlug ) {
+				slug =
+					postType === 'page'
+						? `${ postType }-${ postSlug }`
+						: `single-${ postType }-${ postSlug }`;
+			} else {
+				slug = postType === 'page' ? 'page' : `single-${ postType }`;
+			}
+			const templateId = getDefaultTemplateId( { slug } );
+			if ( ! templateId ) {
+				return null;
+			}
+			return getEntityRecord( 'postType', 'wp_template', templateId );
+		},
+		[ currentTemplateSlug, postSlug, postType ]
+	);
 	return useMemo(
 		() =>
 			allowSwitchingTemplate &&
-			templates?.filter(
-				( template ) =>
-					template.is_custom &&
-					template.slug !== currentTemplateSlug &&
-					!! template.content.raw // Skip empty templates.
-			),
-		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
+			[
+				...( templates || [] ).filter(
+					( template ) =>
+						template.is_custom &&
+						template.slug !== currentTemplateSlug &&
+						!! template.content.raw // Skip empty templates.
+				),
+				defaultTemplate && {
+					...defaultTemplate,
+					title: {
+						rendered: sprintf(
+							// translators: %s: Template name
+							__( '%s (default)' ),
+							defaultTemplate.title.rendered
+						),
+					},
+					// That's extra custom prop in order to update to an empty template
+					// when we select the default template.
+					isDefault: true,
+				},
+			].filter( Boolean ),
+		[
+			templates,
+			defaultTemplate,
+			currentTemplateSlug,
+			allowSwitchingTemplate,
+		]
 	);
 }
 

package/src/components/post-template/style.scss

@@ -52,12 +52,6 @@
 	}
 }
 
-.editor-post-template__create-form {
-	@include break-medium() {
-		width: $grid-unit * 40;
-	}
-}
-
 .editor-post-template__classic-theme-dropdown {
 	padding: $grid-unit-10;
 }

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/post-title/index.js

@@ -124,7 +124,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 		try {
 			plainText = clipboardData.getData( 'text/plain' );
 			html = clipboardData.getData( 'text/html' );
-		} catch ( error ) {
+		} catch {
 			// Some browsers like UC Browser paste plain text by default and
 			// don't support clipboardData at all, so allow default
 			// behaviour.
@@ -181,7 +181,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 	const style = isEditingContentOnlySection ? { opacity: 0.2 } : undefined;
 
 	return (
-		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
+		/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<h1
 			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
 			contentEditable={ ! isEditingContentOnlySection && ! isPreview }
@@ -195,7 +195,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 			onPaste={ onPaste }
 			style={ style }
 		/>
-		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
+		/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);
 } );
 

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