@wordpress/editor 14.48.2-next.v.202606191442.0 → 14.49.1

package/src/components/autosave-monitor/test/index.js

@@ -3,195 +3,210 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { AutosaveMonitor } from '../';
+import AutosaveMonitor from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
 
 jest.useFakeTimers();
-jest.spyOn( global, 'clearTimeout' );
-jest.spyOn( global, 'setTimeout' );
+jest.spyOn( global, 'clearInterval' );
+jest.spyOn( global, 'setInterval' );
+
+// The current edited-post state, read live by the mocked selectors so it can be
+// changed between timer ticks without re-rendering the component.
+let state;
+
+function setState( overrides = {} ) {
+	state = {
+		editsReference: 1,
+		isDirty: false,
+		isAutosaveable: false,
+		isAutosaving: false,
+		autosaveInterval: 10,
+		...overrides,
+	};
+}
 
 describe( 'AutosaveMonitor', () => {
-	let setAutosaveTimerSpy;
 	beforeEach( () => {
-		setAutosaveTimerSpy = jest.spyOn(
-			AutosaveMonitor.prototype,
-			'setAutosaveTimer'
-		);
-	} );
-
-	afterEach( () => {
-		setAutosaveTimerSpy.mockClear();
+		setState();
+		// `useSelect( store )` (static mode) returns bound selectors; the
+		// component destructures the ones it needs from each call. The mapping
+		// form `useSelect( mapSelect )` receives a `select` that resolves to the
+		// same selectors.
+		useSelect.mockImplementation( ( mapSelectOrStore ) => {
+			const selectors = {
+				getReferenceByDistinctEdits: () => state.editsReference,
+				isEditedPostDirty: () => state.isDirty,
+				isEditedPostAutosaveable: () => state.isAutosaveable,
+				isAutosavingPost: () => state.isAutosaving,
+				getEditorSettings: () => ( {
+					autosaveInterval: state.autosaveInterval,
+				} ),
+			};
+			if ( typeof mapSelectOrStore === 'function' ) {
+				return mapSelectOrStore( () => selectors );
+			}
+			return selectors;
+		} );
+		useDispatch.mockReturnValue( { autosave: jest.fn() } );
+		setInterval.mockClear();
+		clearInterval.mockClear();
 	} );
 
 	it( 'should render nothing', () => {
-		const { container } = render( <AutosaveMonitor isDirty /> );
+		const { container } = render( <AutosaveMonitor /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	it( 'should start autosave timer after being mounted', () => {
-		render( <AutosaveMonitor isDirty /> );
+	it( 'should start the autosave timer after being mounted', () => {
+		render( <AutosaveMonitor /> );
 
-		expect( setAutosaveTimerSpy ).toHaveBeenCalled();
+		expect( setInterval ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the autosave timer after being unmounted', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
+		const { rerender } = render( <AutosaveMonitor /> );
 
 		rerender( <div /> );
 
-		expect( clearTimeout ).toHaveBeenCalled();
+		expect( clearInterval ).toHaveBeenCalled();
 	} );
 
-	it( 'should clear and restart autosave timer when the interval changes', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
+	it( 'should restart the autosave timer when the interval changes', () => {
+		const { rerender } = render( <AutosaveMonitor interval={ 10 } /> );
 
-		rerender( <AutosaveMonitor isDirty interval={ 999 } /> );
+		setInterval.mockClear();
+		clearInterval.mockClear();
+		rerender( <AutosaveMonitor interval={ 999 } /> );
 
-		expect( clearTimeout ).toHaveBeenCalled();
-		expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+		expect( clearInterval ).toHaveBeenCalled();
+		expect( setInterval ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should autosave when `editReference` changes', () => {
-		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
-		);
-
-		expect( autosave ).not.toHaveBeenCalled();
+	it( 'should schedule the timer using the interval in seconds', () => {
+		render( <AutosaveMonitor interval={ 5 } /> );
 
-		rerender(
-			<AutosaveMonitor
-				isDirty
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
+		expect( setInterval ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			5000
 		);
+	} );
 
-		jest.runOnlyPendingTimers();
+	it( 'should fall back to the editor autosaveInterval setting', () => {
+		setState( { autosaveInterval: 7 } );
+		render( <AutosaveMonitor /> );
 
-		expect( autosave ).toHaveBeenCalledTimes( 1 );
+		expect( setInterval ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			7000
+		);
 	} );
 
-	it( 'should autosave when `editReference` changes and the post becomes dirty', () => {
+	it( 'should autosave a dirty, autosaveable post on the timer tick', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isAutosaveable autosave={ autosave } />
-		);
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
 		expect( autosave ).not.toHaveBeenCalled();
 
-		rerender(
-			<AutosaveMonitor
-				isDirty
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
-		);
-
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post is not dirty anymore', () => {
+	it( 'should not autosave when the post is not dirty', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
-		);
+		setState( { isDirty: false, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
+
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).not.toHaveBeenCalled();
+	} );
 
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
-		);
+	it( 'should not autosave while an autosave is already in progress', () => {
+		const autosave = jest.fn();
+		setState( { isDirty: true, isAutosaveable: true, isAutosaving: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post is not autosaving', () => {
+	it( 'should autosave edits made during an in-progress autosave once it finishes', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isAutosaveable autosave={ autosave } />
-		);
-
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
+
+		// New edit arrives while an autosave is already in progress: the tick
+		// should not consume the edits reference nor trigger an autosave.
+		setState( {
+			isDirty: true,
+			isAutosaveable: true,
+			isAutosaving: true,
+			editsReference: 2,
+		} );
+		jest.advanceTimersByTime( 5000 );
 		expect( autosave ).not.toHaveBeenCalled();
 
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving={ false }
-				editsReference={ [] }
-			/>
-		);
-
-		jest.runOnlyPendingTimers();
-
-		expect( autosave ).not.toHaveBeenCalled();
+		// Once the autosave finishes, the pending edit must still be autosaved.
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post started autosaving', () => {
+	it( 'should not autosave again until there are new edits', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving={ false }
-			/>
-		);
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		expect( autosave ).not.toHaveBeenCalled();
-
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving
-				editsReference={ [] }
-			/>
-		);
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 
-		jest.runOnlyPendingTimers();
+		// No new edits: a subsequent tick should not autosave again.
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 
-		expect( autosave ).not.toHaveBeenCalled();
+		// A new distinct edit triggers another autosave.
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 2 );
 	} );
 
-	it( 'should schedule itself in another {interval} ms', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
-
-		rerender( <AutosaveMonitor isDirty isAutosaveable interval={ 5 } /> );
+	it( 'should keep pending edits and retry once the post becomes autosaveable', () => {
+		const autosave = jest.fn();
+		setState( { isDirty: true, isAutosaveable: false, editsReference: 2 } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).not.toHaveBeenCalled();
 
-		expect( setTimeout ).toHaveBeenLastCalledWith(
-			expect.any( Function ),
-			5000
-		);
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
-
-		rerender(
-			<AutosaveMonitor isDirty isAutosaveable={ false } interval={ 5 } />
-		);
+	it( 'should fall back to the editor store autosave action', () => {
+		const autosave = jest.fn();
+		useDispatch.mockReturnValue( { autosave } );
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
-		expect( setTimeout ).toHaveBeenLastCalledWith(
-			expect.any( Function ),
-			1000
-		);
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 } );

package/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -19,6 +19,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
           <svg
             aria-hidden="true"
             class="components-panel__arrow"
+            fill="currentColor"
             focusable="false"
             height="24"
             viewBox="0 0 24 24"

package/src/components/post-publish-panel/postpublish.js

@@ -136,7 +136,6 @@ export default function PostPublishPanelPostpublish( {
 				</p>
 				<div className="post-publish-panel__postpublish-post-address-container">
 					<TextControl
-						__next40pxDefaultSize
 						className="post-publish-panel__postpublish-post-address"
 						readOnly
 						label={ sprintf(

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -66,6 +66,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -134,7 +135,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input is-next-40px-default-size"
+                  class="components-text-control__input"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -168,6 +169,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               </span>
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -291,6 +293,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -362,7 +365,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input is-next-40px-default-size"
+                  class="components-text-control__input"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -521,6 +524,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           <svg
             aria-hidden="true"
             class="components-site-icon"
+            fill="currentColor"
             focusable="false"
             height="36px"
             viewBox="-2 -2 24 24"
@@ -675,6 +679,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           <svg
             aria-hidden="true"
             class="components-site-icon"
+            fill="currentColor"
             focusable="false"
             height="36px"
             viewBox="-2 -2 24 24"

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -9,6 +9,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 >
   <svg
     aria-hidden="true"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"

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

@@ -246,7 +246,6 @@ export default function PostStatus() {
 														) }
 														type="text"
 														id={ passwordInputId }
-														__next40pxDefaultSize
 														maxLength={ 255 }
 													/>
 												</div>

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -462,7 +462,6 @@ export function HierarchicalTermSelector( { slug } ) {
 				<form onSubmit={ onAddTerm }>
 					<Flex direction="column" gap="4">
 						<TextControl
-							__next40pxDefaultSize
 							className="editor-post-taxonomies__hierarchical-terms-input"
 							label={ newTermLabel }
 							value={ formName }

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

@@ -121,7 +121,6 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			<form onSubmit={ submit }>
 				<VStack spacing="3">
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }

package/src/components/post-text-editor/utils.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { diffChars } from 'diff/lib/diff/character';
-import { diffLines } from 'diff/lib/diff/line';
+import { diffChars } from 'diff/lib/diff/character.js';
+import { diffLines } from 'diff/lib/diff/line.js';
 
 // Character diffing (Myers) is cheap when the edit distance is small but
 // degrades toward O(n^2) as the two strings diverge: a full replacement of

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

@@ -82,7 +82,6 @@ export default function PostVisibility( { onClose } ) {
 						placeholder={ __( 'Use a secure password' ) }
 						type="text"
 						id={ `editor-post-visibility__password-input-${ instanceId }` }
-						__next40pxDefaultSize
 						maxLength={ 255 }
 					/>
 				) }

package/src/components/provider/disable-non-page-content-blocks.js

@@ -52,22 +52,31 @@ export default function DisableNonPageContentBlocks() {
 	// Child blocks of templates and templateParts are also loaded separately,
 	// so these are kept in separate effects.
 	useEffect( () => {
-		const { setBlockEditingMode, unsetBlockEditingMode } =
-			registry.dispatch( blockEditorStore );
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
 
+		__unstableMarkNextChangeAsNotPersistent();
 		setBlockEditingMode( '', 'disabled' );
 
 		return () => {
+			__unstableMarkNextChangeAsNotPersistent();
 			unsetBlockEditingMode( '' );
 		};
 	}, [ registry ] );
 
 	useEffect( () => {
-		const { setBlockEditingMode, unsetBlockEditingMode } =
-			registry.dispatch( blockEditorStore );
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
 
 		registry.batch( () => {
 			for ( const clientId of templateParts ) {
+				__unstableMarkNextChangeAsNotPersistent();
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
 		} );
@@ -75,6 +84,7 @@ export default function DisableNonPageContentBlocks() {
 		return () => {
 			registry.batch( () => {
 				for ( const clientId of templateParts ) {
+					__unstableMarkNextChangeAsNotPersistent();
 					unsetBlockEditingMode( clientId );
 				}
 			} );
@@ -82,17 +92,22 @@ export default function DisableNonPageContentBlocks() {
 	}, [ templateParts, registry ] );
 
 	useEffect( () => {
-		const { setBlockEditingMode, unsetBlockEditingMode } =
-			registry.dispatch( blockEditorStore );
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
 
 		const contentOnlySet = new Set( contentOnlyIds );
 
 		registry.batch( () => {
 			for ( const clientId of contentOnlyIds ) {
+				__unstableMarkNextChangeAsNotPersistent();
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
 			for ( const clientId of templatePartChildren ) {
 				if ( ! contentOnlySet.has( clientId ) ) {
+					__unstableMarkNextChangeAsNotPersistent();
 					setBlockEditingMode( clientId, 'disabled' );
 				}
 			}
@@ -101,10 +116,12 @@ export default function DisableNonPageContentBlocks() {
 		return () => {
 			registry.batch( () => {
 				for ( const clientId of contentOnlyIds ) {
+					__unstableMarkNextChangeAsNotPersistent();
 					unsetBlockEditingMode( clientId );
 				}
 				for ( const clientId of templatePartChildren ) {
 					if ( ! contentOnlySet.has( clientId ) ) {
+						__unstableMarkNextChangeAsNotPersistent();
 						unsetBlockEditingMode( clientId );
 					}
 				}

package/src/components/provider/navigation-block-editing-mode.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
@@ -14,24 +14,30 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 
 export default function NavigationBlockEditingMode() {
+	const registry = useRegistry();
 	// In the navigation block editor,
 	// the navigation block is the only root block.
 	const blockClientId = useSelect(
 		( select ) => select( blockEditorStore ).getBlockOrder()?.[ 0 ],
 		[]
 	);
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		if ( ! blockClientId ) {
 			return;
 		}
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
 
+		__unstableMarkNextChangeAsNotPersistent();
 		setBlockEditingMode( blockClientId, 'contentOnly' );
 
 		return () => {
+			__unstableMarkNextChangeAsNotPersistent();
 			unsetBlockEditingMode( blockClientId );
 		};
-	}, [ blockClientId, unsetBlockEditingMode, setBlockEditingMode ] );
+	}, [ registry, blockClientId ] );
 }

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

@@ -68,6 +68,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'clearBlockSelection',
 	'codeEditingEnabled',
 	'colors',
+	'disableContentOnlyForTemplateParts',
 	'disableContentOnlyForUnsyncedPatterns',
 	'disableCustomColors',
 	'disableCustomFontSizes',
@@ -414,7 +415,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			// When in template-locked mode (e.g., "Show Template" in the post editor),
 			// don't treat template parts as contentOnly sections.
 			disableContentOnlyForTemplateParts:
-				renderingMode === 'template-locked',
+				renderingMode === 'template-locked' ||
+				settings.disableContentOnlyForTemplateParts,
 			...( deviceType ? { [ deviceTypeKey ]: deviceType } : {} ),
 			[ onViewportStateChangeKey ]: updateDeviceTypeForViewportState,
 			[ isNavigationOverlayContextKey ]: isNavigationOverlayContext,