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

package/src/components/template-actions-panel/classic-theme-content.js

@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from '../post-template/create-new-template-modal';
+
+export default function ClassicThemeContent() {
+	const templateId = useSelect(
+		( select ) => select( editorStore ).getCurrentTemplateId(),
+		[]
+	);
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const {
+		onNavigateToEntityRecord,
+		canCreateTemplate,
+		hasGoBack,
+		getEditorSettings,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings: _getEditorSettings } = select( editorStore );
+		const editorSettings = _getEditorSettings();
+		return {
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			canCreateTemplate:
+				!! select( coreStore ).canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} ) && editorSettings.supportsTemplateMode,
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+			getEditorSettings: _getEditorSettings,
+		};
+	}, [] );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editedRecord: template } = useEntityRecord(
+		'postType',
+		'wp_template',
+		templateId
+	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template', {
+		id: templateId,
+	} );
+
+	// Path A: No block template and cannot create templates.
+	if ( ! templateId && ! canCreateTemplate ) {
+		return null;
+	}
+
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
+
+	const templateName = template
+		? decodeEntities( template.title )
+		: undefined;
+
+	const previewContent = !! blocks?.length && (
+		<BlockPreview.Async>
+			<BlockPreview blocks={ blocks } />
+		</BlockPreview.Async>
+	);
+
+	return (
+		<>
+			<PanelBody
+				title={
+					template
+						? sprintf(
+								/* translators: %s: template name */
+								__( 'Template: %s' ),
+								templateName
+						  )
+						: __( 'Template' )
+				}
+				initialOpen={ false }
+			>
+				<VStack>
+					{ ! templateId && (
+						<Text>
+							{ __(
+								'This page uses a classic template. To edit this template with blocks, create a block template.'
+							) }
+						</Text>
+					) }
+					{ template && previewContent && (
+						<div className="editor-template-actions-panel__preview">
+							{ previewContent }
+						</div>
+					) }
+					<HStack>
+						{ template && onNavigateToEntityRecord && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									mayShowTemplateEditNotice();
+								} }
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+						{ canCreateTemplate && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => setIsCreateModalOpen( true ) }
+							>
+								{ ! templateId
+									? __( 'Create block template' )
+									: __( 'Create new' ) }
+							</Button>
+						) }
+					</HStack>
+				</VStack>
+			</PanelBody>
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/template-actions-panel/index.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { usePostTemplatePanelMode } from '../post-template/hooks';
+import BlockThemeContent from './block-theme-content';
+import ClassicThemeContent from './classic-theme-content';
+
+export default function TemplateActionsPanel() {
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+	const mode = usePostTemplatePanelMode();
+	// This check is because the experiment is gated for these post
+	// types for now. Later we should use `postType.viewable`.
+	if ( ! [ 'page', 'post' ].includes( postType ) ) {
+		return null;
+	}
+	if ( mode === 'classic' ) {
+		return <ClassicThemeContent />;
+	}
+	if ( mode === 'block-theme' ) {
+		return <BlockThemeContent />;
+	}
+	return null;
+}

package/src/components/template-actions-panel/style.scss

@@ -0,0 +1,39 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+.editor-template-actions-panel__preview {
+	.block-editor-block-preview__container {
+		display: flex;
+		aspect-ratio: 4/3;
+		overflow: hidden;
+		border-radius: $radius-medium;
+
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-medium;
+			@media not (prefers-reduced-motion) {
+				transition: outline 0.1s linear;
+			}
+		}
+	}
+
+	&[role="button"] {
+		cursor: pointer;
+
+		&:hover .block-editor-block-preview__container::after {
+			outline-color: rgba($black, 0.3);
+		}
+
+		&:focus-visible .block-editor-block-preview__container::after {
+			outline-color: var(--wp-admin-theme-color);
+			outline-width: var(--wp-admin-border-width-focus);
+			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+		}
+	}
+}
+
+.editor-template-actions-panel__action {
+	flex: 1;
+	justify-content: center;
+}

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

@@ -19,6 +19,7 @@ import {
 	resetPost,
 	deletePost,
 	duplicateTemplatePart,
+	excerptField,
 	featuredImageField,
 	dateField,
 	parentField,
@@ -38,6 +39,7 @@ import {
 	scheduledDateField,
 	formatField,
 	postContentInfoField,
+	stickyField,
 } from '@wordpress/fields';
 import {
 	altTextField,
@@ -267,6 +269,9 @@ export const registerPostTypeSchema =
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					scheduledDateField,
 				slugField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					postTypeConfig.supports?.excerpt &&
+					excerptField,
 				postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 				postTypeConfig.supports?.comments && commentStatusField,
 				postTypeConfig.supports?.trackbacks && pingStatusField,
@@ -281,6 +286,7 @@ export const registerPostTypeSchema =
 					postTypeConfig.supports?.editor &&
 					postContentInfoField,
 				passwordField,
+				postTypeConfig.slug === 'post' && stickyField,
 				postTypeConfig.supports?.editor &&
 					postTypeConfig.viewable &&
 					postPreviewField,

package/src/hooks/default-autocompleters.js

@@ -6,11 +6,11 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import { userAutocompleter } from '../components';
+import { linkAutocompleter, userAutocompleter } from '../components';
 
 function setDefaultCompleters( completers = [] ) {
 	// Provide copies so filters may directly modify them.
-	completers.push( { ...userAutocompleter } );
+	completers.push( { ...linkAutocompleter }, { ...userAutocompleter } );
 
 	return completers;
 }

package/src/hooks/test/default-autocompleters.js

@@ -7,11 +7,11 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../default-autocompleters';
-import { userAutocompleter } from '../../components';
+import { linkAutocompleter, userAutocompleter } from '../../components';
 
 describe( 'default-autocompleters', () => {
 	const BLOCK_NAME = 'core/foo';
-	const defaultAutocompleters = [ userAutocompleter ];
+	const defaultAutocompleters = [ linkAutocompleter, userAutocompleter ];
 
 	it( 'provides default completers if none are provided', () => {
 		const result = applyFilters(

package/src/store/private-actions.js

@@ -627,6 +627,11 @@ export const restoreRevision =
 		const postType = select.getCurrentPostType();
 		const postId = select.getCurrentPostId();
 
+		const entityConfig = registry
+			.select( coreStore )
+			.getEntityConfig( 'postType', postType );
+		const revisionKey = entityConfig?.revisionKey || 'id';
+
 		// Use resolveSelect to ensure the revision is fetched if not yet
 		// in the store. The _fields parameter matches the query used by
 		// getRevisions so the result is served from cache without an
@@ -635,8 +640,19 @@ export const restoreRevision =
 			.resolveSelect( coreStore )
 			.getRevision( 'postType', postType, postId, revisionId, {
 				context: 'edit',
-				_fields:
-					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						revisionKey,
+					] ),
+				].join(),
 			} );
 
 		if ( ! revision ) {

package/src/store/private-selectors.js

@@ -390,6 +390,11 @@ export const getCurrentRevision = createRegistrySelector(
 		}
 
 		const { type: postType, id: postId } = getCurrentPost( state );
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const revisionKey = entityConfig?.revisionKey || 'id';
 		// - 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
@@ -404,19 +409,27 @@ export const getCurrentRevision = createRegistrySelector(
 			{
 				per_page: -1,
 				context: 'edit',
-				_fields:
-					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						revisionKey,
+					] ),
+				].join(),
 			}
 		);
 		if ( ! revisions ) {
 			return null;
 		}
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			postType
+		return (
+			revisions.find( ( r ) => r[ revisionKey ] === revisionId ) ?? null
 		);
-		const revKey = entityConfig?.revisionKey || 'id';
-		return revisions.find( ( r ) => r[ revKey ] === revisionId ) ?? null;
 	}
 );
 
@@ -457,6 +470,11 @@ export const getPreviousRevision = createRegistrySelector(
 		}
 
 		const { type: postType, id: postId } = getCurrentPost( state );
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const revisionKey = entityConfig?.revisionKey || 'id';
 		const revisions = select( coreStore ).getRevisions(
 			'postType',
 			postType,
@@ -464,32 +482,35 @@ export const getPreviousRevision = createRegistrySelector(
 			{
 				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(),
 			}
 		);
 		if ( ! revisions ) {
 			return null;
 		}
 
-		// Sort by date ascending (oldest first).
-		const sortedRevisions = [ ...revisions ].sort(
-			( a, b ) => new Date( a.date ) - new Date( b.date )
-		);
-
 		// Find current revision index.
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			postType
-		);
-		const revKey = entityConfig?.revisionKey || 'id';
-		const currentIndex = sortedRevisions.findIndex(
-			( r ) => r[ revKey ] === currentRevisionId
+		const currentIndex = revisions.findIndex(
+			( r ) => r[ revisionKey ] === currentRevisionId
 		);
 
 		// Return the previous revision (older one) if it exists.
 		if ( currentIndex > 0 ) {
-			return sortedRevisions[ currentIndex - 1 ];
+			return revisions[ currentIndex - 1 ];
 		}
 
 		return null;

package/src/store/reducer.js

@@ -449,13 +449,6 @@ export function revisionId( state = null, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the currently selected note and its options.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- * @return {Object} Updated state.
- */
 /**
  * Reducer for whether the revision diff is shown.
  * Resets to true when entering/exiting revisions mode.
@@ -469,11 +462,19 @@ export function showRevisionDiff( state = true, action ) {
 		case 'SET_SHOW_REVISION_DIFF':
 			return action.showDiff;
 		case 'SET_CURRENT_REVISION_ID':
-			return true; // reset on enter/exit revisions
+			// Reset during the exit.
+			return ! action.revisionId ? true : state;
 	}
 	return state;
 }
 
+/**
+ * Reducer returning the currently selected note and its options.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
 export function selectedNote( state = {}, action ) {
 	switch ( action.type ) {
 		case 'SELECT_NOTE':

package/src/style.scss

@@ -38,8 +38,9 @@
 @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-panel/style.scss" as *;
 @use "./components/post-revisions-preview/style.scss" as *;
-@use "./components/revision-block-diff/style.scss" as *;
+@use "./components/revision-diff-panel/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 *;
@@ -48,6 +49,7 @@
 @use "./components/post-taxonomies/style.scss" as *;
 @use "./components/sync-connection-error-modal/style.scss" as *;
 @use "./components/post-template/style.scss" as *;
+@use "./components/template-actions-panel/style.scss" as *;
 @use "./components/post-text-editor/style.scss" as *;
 @use "./components/post-title/style.scss" as *;
 @use "./components/post-url/style.scss" as *;