@wordpress/editor 14.41.2-next.v.202603161435.0 → 14.43.0

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,23 +65,120 @@ 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,
+		]
 	);
 }
 
+export function usePostTemplatePanelMode() {
+	return useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentTemplateId, getCurrentPostType } =
+			select( editorStore );
+		const { getPostType, canUser } = select( coreStore );
+		const postTypeSlug = getCurrentPostType();
+		const postType = getPostType( postTypeSlug );
+		const settings = getEditorSettings();
+		const isBlockTheme = settings.__unstableIsBlockBasedTheme;
+		const hasTemplates =
+			!! settings.availableTemplates &&
+			Object.keys( settings.availableTemplates ).length > 0;
+		let isVisible;
+		if ( ! postType?.viewable ) {
+			isVisible = false;
+		} else if ( hasTemplates ) {
+			isVisible = true;
+		} else if ( ! settings.supportsTemplateMode ) {
+			isVisible = false;
+		} else {
+			isVisible =
+				canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} ) ?? false;
+		}
+		const canViewTemplates = isVisible
+			? !! canUser( 'read', {
+					kind: 'postType',
+					name: 'wp_template',
+			  } )
+			: false;
+		if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
+			return 'classic';
+		}
+		if ( isBlockTheme && !! getCurrentTemplateId() ) {
+			return 'block-theme';
+		}
+		return null;
+	}, [] );
+}
+
 export function useCurrentTemplateSlug() {
 	const { postType, postId } = useEditedPostContext();
 	const templates = useTemplates( postType );

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

@@ -1,13 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
+import { usePostTemplatePanelMode } from './hooks';
 import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
 
@@ -17,60 +11,12 @@ import BlockThemeControl from './block-theme';
  * @return {React.ReactNode} The rendered PostTemplatePanel component.
  */
 export default function PostTemplatePanel() {
-	const { templateId, isBlockTheme } = useSelect( ( select ) => {
-		const { getCurrentTemplateId, getEditorSettings } =
-			select( editorStore );
-		return {
-			templateId: getCurrentTemplateId(),
-			isBlockTheme: getEditorSettings().__unstableIsBlockBasedTheme,
-		};
-	}, [] );
-
-	const isVisible = useSelect( ( select ) => {
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		if ( ! postType?.viewable ) {
-			return false;
-		}
-
-		const settings = select( editorStore ).getEditorSettings();
-		const hasTemplates =
-			!! settings.availableTemplates &&
-			Object.keys( settings.availableTemplates ).length > 0;
-		if ( hasTemplates ) {
-			return true;
-		}
-
-		if ( ! settings.supportsTemplateMode ) {
-			return false;
-		}
-
-		const canCreateTemplates =
-			select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: 'wp_template',
-			} ) ?? false;
-		return canCreateTemplates;
-	}, [] );
-
-	const canViewTemplates = useSelect(
-		( select ) => {
-			return isVisible
-				? select( coreStore ).canUser( 'read', {
-						kind: 'postType',
-						name: 'wp_template',
-				  } )
-				: false;
-		},
-		[ isVisible ]
-	);
-
-	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
+	const mode = usePostTemplatePanelMode();
+	if ( mode === 'classic' ) {
 		return <ClassicThemeControl />;
 	}
-
-	if ( isBlockTheme && !! templateId ) {
-		return <BlockThemeControl id={ templateId } />;
+	if ( mode === 'block-theme' ) {
+		return <BlockThemeControl />;
 	}
 	return null;
 }

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/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/provider/use-block-editor-settings.js

@@ -25,6 +25,7 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import mediaUploadOnSuccess from '../../utils/media-upload/on-success';
 import { default as mediaSideload } from '../../utils/media-sideload';
+import { default as mediaFinalize } from '../../utils/media-finalize';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -343,6 +344,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? mediaUploadOnSuccess
 				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			mediaFinalize: hasUploadPermissions ? mediaFinalize : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =

package/src/components/revision-block-diff/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionDiffPanel from '../revision-diff-panel';
+
+/**
+ * Panel that shows changed block attributes for the selected block
+ * when viewing revisions.
+ */
+export default function RevisionBlockDiffPanel() {
+	const { block } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		return {
+			block: getSelectedBlock(),
+		};
+	}, [] );
+
+	if ( ! block ) {
+		return null;
+	}
+
+	const changedAttributes =
+		block.attributes?.__revisionDiffStatus?.changedAttributes;
+
+	return (
+		<RevisionDiffPanel
+			title={ __( 'Changed attributes' ) }
+			entries={ changedAttributes }
+			initialOpen
+		/>
+	);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Renders a panel of word-level diffs.
+ *
+ * @param {Object}  props
+ * @param {string}  props.title       Panel title.
+ * @param {Object}  props.entries     Map of key → diffWords parts arrays.
+ * @param {boolean} props.initialOpen Whether the panel starts open.
+ */
+export default function RevisionDiffPanel( { title, entries, initialOpen } ) {
+	if ( ! entries ) {
+		return null;
+	}
+
+	const fields = Object.entries( entries ).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>
+	) );
+
+	return (
+		<PanelBody title={ title } initialOpen={ initialOpen }>
+			{ fields }
+		</PanelBody>
+	);
+}

package/src/components/revision-diff-panel/style.scss

@@ -0,0 +1,13 @@
+.editor-revision-fields-diff__value {
+	word-break: break-word;
+}
+
+.editor-revision-fields-diff__added {
+	background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
+	text-decoration: none;
+}
+
+.editor-revision-fields-diff__removed {
+	text-decoration: line-through;
+	color: #d63638;
+}

package/src/components/revision-fields-diff/index.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { diffWords } from 'diff/lib/diff/word';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionDiffPanel from '../revision-diff-panel';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Safely stringifies a value for display and comparison.
+ *
+ * @param {*} value The value to stringify.
+ * @return {string} The stringified value.
+ */
+function stringifyValue( value ) {
+	if ( value === null || value === undefined ) {
+		return '';
+	}
+	if ( typeof value === 'object' ) {
+		return JSON.stringify( value, null, 2 );
+	}
+	return String( value );
+}
+
+/**
+ * Panel that shows meta field diffs between the current revision and
+ * the previous revision in the document sidebar during revision mode.
+ */
+export default function RevisionFieldsDiffPanel() {
+	const { revision, previousRevision } = useSelect( ( select ) => {
+		const { getCurrentRevision, getPreviousRevision } = unlock(
+			select( editorStore )
+		);
+
+		return {
+			revision: getCurrentRevision(),
+			previousRevision: getPreviousRevision(),
+		};
+	}, [] );
+
+	const entries = useMemo( () => {
+		if ( ! revision ) {
+			return null;
+		}
+
+		const revisionMeta = revision.meta ?? {};
+		const previousMeta = previousRevision?.meta ?? {};
+		const allMetaKeys = new Set( [
+			...Object.keys( revisionMeta ),
+			...Object.keys( previousMeta ),
+		] );
+
+		const result = {};
+
+		for ( const key of allMetaKeys ) {
+			const revStr = stringifyValue( revisionMeta[ key ] );
+			const prevStr = stringifyValue( previousMeta[ key ] );
+
+			if ( ! revStr && ! prevStr ) {
+				continue;
+			}
+
+			result[ key ] = diffWords( prevStr, revStr );
+		}
+
+		if ( Object.keys( result ).length === 0 ) {
+			return null;
+		}
+
+		return result;
+	}, [ revision, previousRevision ] );
+
+	return (
+		<RevisionDiffPanel
+			title={ __( 'Meta' ) }
+			entries={ entries }
+			initialOpen={ false }
+		/>
+	);
+}