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

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

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -11,123 +10,89 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export class AutosaveMonitor extends Component {
-	constructor( props ) {
-		super( props );
-		this.needsAutosave = !! ( props.isDirty && props.isAutosaveable );
-	}
-
-	componentDidMount() {
-		if ( ! this.props.disableIntervalChecks ) {
-			this.setAutosaveTimer();
-		}
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.disableIntervalChecks ) {
-			if ( this.props.editsReference !== prevProps.editsReference ) {
-				this.props.autosave();
-			}
-			return;
-		}
-
-		if ( this.props.interval !== prevProps.interval ) {
-			clearTimeout( this.timerId );
-			this.setAutosaveTimer();
-		}
-
-		if ( ! this.props.isDirty ) {
-			this.needsAutosave = false;
-			return;
-		}
-
-		if ( this.props.isAutosaving && ! prevProps.isAutosaving ) {
-			this.needsAutosave = false;
-			return;
-		}
-
-		if ( this.props.editsReference !== prevProps.editsReference ) {
-			this.needsAutosave = true;
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timerId );
-	}
+/**
+ * Calls `callback` every `intervalInSeconds`. The latest `callback` is always
+ * invoked without resetting the timer.
+ *
+ * @param {Function} callback          Function to call on each tick.
+ * @param {number}   intervalInSeconds Seconds between ticks.
+ */
+function useInterval( callback, intervalInSeconds ) {
+	const callbackRef = useRef( callback );
 
-	setAutosaveTimer( timeout = this.props.interval * 1000 ) {
-		this.timerId = setTimeout( () => {
-			this.autosaveTimerHandler();
-		}, timeout );
-	}
+	useEffect( () => {
+		callbackRef.current = callback;
+	}, [ callback ] );
 
-	autosaveTimerHandler() {
-		if ( ! this.props.isAutosaveable ) {
-			this.setAutosaveTimer( 1000 );
+	useEffect( () => {
+		// Interval can be undefined before editor settings are populated.
+		if ( ! intervalInSeconds ) {
 			return;
 		}
 
-		if ( this.needsAutosave ) {
-			this.needsAutosave = false;
-			this.props.autosave();
-		}
-
-		this.setAutosaveTimer();
-	}
-
-	render() {
-		return null;
-	}
+		const id = setInterval(
+			() => callbackRef.current(),
+			intervalInSeconds * 1000
+		);
+		return () => clearInterval( id );
+	}, [ intervalInSeconds ] );
 }
 
 /**
  * Monitors the changes made to the edited post and triggers autosave if necessary.
  *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
+ * The post is checked every `interval` seconds and autosaved when there is something new to save.
  *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- *
- * @param {Object}   props                       - The properties passed to the component.
- * @param {Function} props.autosave              - The function to call when changes need to be saved.
- * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
- * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
- * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
- * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ * @param {Object}   props            The component props.
+ * @param {number}   [props.interval] Time in seconds between checks. Defaults to the editor's
+ *                                    `autosaveInterval` setting.
+ * @param {Function} [props.autosave] Function to call when changes need to be saved. Defaults to the
+ *                                    editor store's `autosave` action.
  *
  * @example
  * ```jsx
- * <AutosaveMonitor interval={30000} />
+ * <AutosaveMonitor interval={ 30 } />
  * ```
  */
-export default compose( [
-	withSelect( ( select, ownProps ) => {
-		const { getReferenceByDistinctEdits } = select( coreStore );
+export default function AutosaveMonitor( { interval, autosave } ) {
+	const { autosave: autosaveAction } = useDispatch( editorStore );
+	const triggerAutosave = autosave ?? autosaveAction;
+
+	const { getReferenceByDistinctEdits } = useSelect( coreStore );
+	const { isEditedPostDirty, isEditedPostAutosaveable, isAutosavingPost } =
+		useSelect( editorStore );
+
+	const autosaveInterval = useSelect(
+		( select ) => {
+			if ( interval !== undefined ) {
+				return interval;
+			}
 
-		const {
-			isEditedPostDirty,
-			isEditedPostAutosaveable,
-			isAutosavingPost,
-			getEditorSettings,
-		} = select( editorStore );
+			return select( editorStore ).getEditorSettings().autosaveInterval;
+		},
+		[ interval ]
+	);
 
-		const { interval = getEditorSettings().autosaveInterval } = ownProps;
+	// Reference of the edits last considered for autosaving. Mutable state that
+	// must not trigger a re-render, hence a ref.
+	const lastEditsReferenceRef = useRef();
 
-		return {
-			editsReference: getReferenceByDistinctEdits(),
-			isDirty: isEditedPostDirty(),
-			isAutosaveable: isEditedPostAutosaveable(),
-			isAutosaving: isAutosavingPost(),
-			interval,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		autosave() {
-			const { autosave = dispatch( editorStore ).autosave } = ownProps;
-			autosave();
-		},
-	} ) ),
-] )( AutosaveMonitor );
+	useInterval( () => {
+		// The post can't be autosaved yet (e.g. its existing autosave is still
+		// loading). Keep any pending edits and try again on the next tick.
+		if ( ! isEditedPostAutosaveable() ) {
+			return;
+		}
+
+		const editsReference = getReferenceByDistinctEdits();
+		const hasNewEdits = editsReference !== lastEditsReferenceRef.current;
+		if ( hasNewEdits && isEditedPostDirty() && ! isAutosavingPost() ) {
+			// Only consume the edits reference when we autosave,
+			// so edits made during an in-flight autosave aren't skipped.
+			lastEditsReferenceRef.current = editsReference;
+			triggerAutosave();
+		}
+	}, autosaveInterval );
+
+	return null;
+}

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