@wordpress/editor 12.10.0 → 12.13.0

package/src/components/document-outline/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { countBy, flatMap, get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -50,7 +45,7 @@ const multipleH1Headings = [
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return flatMap( blocks, ( block = {} ) => {
+	return blocks.flatMap( ( block = {} ) => {
 		if ( block.name === 'core/heading' ) {
 			return {
 				...block,
@@ -83,7 +78,13 @@ export const DocumentOutline = ( {
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
-	const countByLevel = countBy( headings, 'level' );
+	const countByLevel = headings.reduce(
+		( acc, heading ) => ( {
+			...acc,
+			[ heading.level ]: ( acc[ heading.level ] || 0 ) + 1,
+		} ),
+		{}
+	);
 	const hasMultipleH1 = countByLevel[ 1 ] > 1;
 
 	return (
@@ -155,7 +156,7 @@ export default compose(
 		return {
 			title: getEditedPostAttribute( 'title' ),
 			blocks: getBlocks(),
-			isTitleSupported: get( postType, [ 'supports', 'title' ], false ),
+			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} )
 )( DocumentOutline );

package/src/components/error-boundary/index.js

@@ -7,6 +7,7 @@ import { Button } from '@wordpress/components';
 import { select } from '@wordpress/data';
 import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
+import { doAction } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -36,6 +37,8 @@ class ErrorBoundary extends Component {
 
 	componentDidCatch( error ) {
 		this.setState( { error } );
+
+		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
 	reboot() {

package/src/components/index.js

@@ -41,23 +41,32 @@ export { default as PostPublishPanel } from './post-publish-panel';
 export { default as PostSavedState } from './post-saved-state';
 export { default as PostSchedule } from './post-schedule';
 export { default as PostScheduleCheck } from './post-schedule/check';
-export { default as PostScheduleLabel } from './post-schedule/label';
+export {
+	default as PostScheduleLabel,
+	usePostScheduleLabel,
+} from './post-schedule/label';
 export { default as PostSlug } from './post-slug';
 export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
 export { default as PostTaxonomies } from './post-taxonomies';
-export { default as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
-export { default as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
+export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
+export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';
+export { default as PostURL } from './post-url';
+export { default as PostURLCheck } from './post-url/check';
+export { default as PostURLLabel, usePostURLLabel } from './post-url/label';
 export { default as PostVisibility } from './post-visibility';
-export { default as PostVisibilityLabel } from './post-visibility/label';
+export {
+	default as PostVisibilityLabel,
+	usePostVisibilityLabel,
+} from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { once, uniqueId, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -27,23 +22,30 @@ const requestIdleCallback = window.requestIdleCallback
 	? window.requestIdleCallback
 	: window.requestAnimationFrame;
 
+let hasStorageSupport;
+let uniqueId = 0;
+
 /**
  * Function which returns true if the current environment supports browser
  * sessionStorage, or false otherwise. The result of this function is cached and
  * reused in subsequent invocations.
  */
-const hasSessionStorageSupport = once( () => {
-	try {
-		// Private Browsing in Safari 10 and earlier will throw an error when
-		// attempting to set into sessionStorage. The test here is intentional in
-		// causing a thrown error as condition bailing from local autosave.
-		window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
-		window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
-		return true;
-	} catch ( error ) {
-		return false;
+const hasSessionStorageSupport = () => {
+	if ( typeof hasStorageSupport === 'undefined' ) {
+		try {
+			// Private Browsing in Safari 10 and earlier will throw an error when
+			// attempting to set into sessionStorage. The test here is intentional in
+			// causing a thrown error as condition bailing from local autosave.
+			window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
+			window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
+			hasStorageSupport = true;
+		} catch ( error ) {
+			hasStorageSupport = false;
+		}
 	}
-} );
+
+	return hasStorageSupport;
+};
 
 /**
  * Custom hook which manages the creation of a notice prompting the user to
@@ -98,7 +100,7 @@ function useAutosaveNotice() {
 			return;
 		}
 
-		const noticeId = uniqueId( 'wpEditorAutosaveRestore' );
+		const noticeId = `wpEditorAutosaveRestore${ ++uniqueId }`;
 		createWarningNotice(
 			__(
 				'The backup of this post in your browser is different from the version below.'
@@ -109,7 +111,11 @@ function useAutosaveNotice() {
 					{
 						label: __( 'Restore the backup' ),
 						onClick() {
-							editPost( omit( edits, [ 'content' ] ) );
+							const {
+								content: editsContent,
+								...editsWithoutContent
+							} = edits;
+							editPost( editsWithoutContent );
 							resetEditorBlocks( parse( edits.content ) );
 							removeNotice( noticeId );
 						},

package/src/components/page-attributes/order.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { invoke } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,10 +19,7 @@ export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
 	const setUpdatedOrder = ( value ) => {
 		setOrderInput( value );
 		const newOrder = Number( value );
-		if (
-			Number.isInteger( newOrder ) &&
-			invoke( value, [ 'trim' ] ) !== ''
-		) {
+		if ( Number.isInteger( newOrder ) && value.trim?.() !== '' ) {
 			onUpdateOrder( Number( value ) );
 		}
 	};

package/src/components/page-attributes/parent.js

@@ -1,15 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	get,
-	unescape as unescapeString,
-	debounce,
-	repeat,
-	find,
-	flatten,
-	deburr,
-} from 'lodash';
+import { get, unescape as unescapeString, debounce, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -34,8 +27,8 @@ function getTitle( post ) {
 }
 
 export const getItemPriority = ( name, searchValue ) => {
-	const normalizedName = deburr( name ).toLowerCase();
-	const normalizedSearch = deburr( searchValue ).toLowerCase();
+	const normalizedName = removeAccents( name || '' ).toLowerCase();
+	const normalizedSearch = removeAccents( searchValue || '' ).toLowerCase();
 	if ( normalizedName === normalizedSearch ) {
 		return 0;
 	}
@@ -99,7 +92,7 @@ export function PageAttributesParent() {
 				{
 					value: treeNode.id,
 					label:
-						repeat( '— ', level ) + unescapeString( treeNode.name ),
+						'— '.repeat( level ) + unescapeString( treeNode.name ),
 					rawName: treeNode.name,
 				},
 				...getOptionsFromTree( treeNode.children || [], level + 1 ),
@@ -111,7 +104,7 @@ export function PageAttributesParent() {
 				return priorityA >= priorityB ? 1 : -1;
 			} );
 
-			return flatten( sortedNodes );
+			return sortedNodes.flat();
 		};
 
 		let tree = pageItems.map( ( item ) => ( {

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

@@ -81,24 +81,18 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<div className="editor-post-format__content">
-					<label htmlFor={ postFormatSelectorId }>
-						{ __( 'Post Format' ) }
-					</label>
-					<SelectControl
-						value={ postFormat }
-						onChange={ ( format ) => onUpdatePostFormat( format ) }
-						id={ postFormatSelectorId }
-						options={ formats.map( ( format ) => ( {
-							label: format.caption,
-							value: format.id,
-						} ) ) }
-					/>
-				</div>
-
+				<SelectControl
+					label={ __( 'Post Format' ) }
+					value={ postFormat }
+					onChange={ ( format ) => onUpdatePostFormat( format ) }
+					id={ postFormatSelectorId }
+					options={ formats.map( ( format ) => ( {
+						label: format.caption,
+						value: format.id,
+					} ) ) }
+				/>
 				{ suggestion && suggestion.id !== postFormat && (
-					<div className="editor-post-format__suggestion">
-						{ __( 'Suggestion:' ) }{ ' ' }
+					<p className="editor-post-format__suggestion">
 						<Button
 							variant="link"
 							onClick={ () =>
@@ -107,11 +101,11 @@ export default function PostFormat() {
 						>
 							{ sprintf(
 								/* translators: %s: post format */
-								__( 'Apply format: %s' ),
+								__( 'Apply suggested format: %s' ),
 								suggestion.caption
 							) }
 						</Button>
-					</div>
+					</p>
 				) }
 			</div>
 		</PostFormatCheck>

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

@@ -1,18 +1,3 @@
-.editor-post-format {
-	flex-direction: column;
-	align-items: stretch;
-	width: 100%;
-}
-
-.editor-post-format__content {
-	display: inline-flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.editor-post-format__suggestion {
-	padding: $grid-unit-15 * 0.5;
-	text-align: right;
-	font-size: $default-font-size;
+[class].editor-post-format__suggestion {
+	margin: $grid-unit-05 0 0 0;
 }

package/src/components/post-locked-modal/index.js

@@ -197,7 +197,7 @@ export default function PostLockedModal() {
 								? sprintf(
 										/* translators: %s: user's display name */
 										__(
-											'<strong>%s</strong> now has editing control of this posts (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+											'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 										),
 										userDisplayName
 								  )

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -23,14 +23,15 @@ function MaybeCategoryPanel() {
 		const postType = select( editorStore ).getCurrentPostType();
 		const categoriesTaxonomy =
 			select( coreStore ).getTaxonomy( 'category' );
-		const defaultCategorySlug = 'uncategorized';
-		const defaultCategory = select( coreStore ).getEntityRecords(
+		const defaultCategoryId = select( coreStore ).getEntityRecord(
+			'root',
+			'site'
+		)?.default_category;
+		const defaultCategory = select( coreStore ).getEntityRecord(
 			'taxonomy',
 			'category',
-			{
-				slug: defaultCategorySlug,
-			}
-		)?.[ 0 ];
+			defaultCategoryId
+		);
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
 			some( categoriesTaxonomy.types, ( type ) => type === postType );

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

@@ -184,7 +184,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   <div
     className="editor-post-publish-panel__content"
   >
-    <Spinner />
+    <ForwardRef(UnforwardedSpinner) />
   </div>
   <div
     className="editor-post-publish-panel__footer"

package/src/components/post-schedule/label.js

@@ -1,28 +1,122 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { format, __experimentalGetSettings } from '@wordpress/date';
-import { withSelect } from '@wordpress/data';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { __experimentalGetSettings, getDate, dateI18n } from '@wordpress/date';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostScheduleLabel( { date, isFloating } ) {
-	const settings = __experimentalGetSettings();
-	return date && ! isFloating
-		? format(
-				`${ settings.formats.date } ${ settings.formats.time }`,
-				date
-		  )
-		: __( 'Immediately' );
+export default function PostScheduleLabel( props ) {
+	return usePostScheduleLabel( props );
 }
 
-export default withSelect( ( select ) => {
-	return {
-		date: select( editorStore ).getEditedPostAttribute( 'date' ),
-		isFloating: select( editorStore ).isEditedPostDateFloating(),
-	};
-} )( PostScheduleLabel );
+export function usePostScheduleLabel( { full = false } = {} ) {
+	const { date, isFloating } = useSelect(
+		( select ) => ( {
+			date: select( editorStore ).getEditedPostAttribute( 'date' ),
+			isFloating: select( editorStore ).isEditedPostDateFloating(),
+		} ),
+		[]
+	);
+
+	return full
+		? getFullPostScheduleLabel( date )
+		: getPostScheduleLabel( date, { isFloating } );
+}
+
+export function getFullPostScheduleLabel( dateAttribute ) {
+	const date = getDate( dateAttribute );
+
+	const timezoneAbbreviation = getTimezoneAbbreviation();
+	const formattedDate = dateI18n(
+		// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
+		date
+	);
+	return isRTL()
+		? `${ timezoneAbbreviation } ${ formattedDate }`
+		: `${ formattedDate } ${ timezoneAbbreviation }`;
+}
+
+export function getPostScheduleLabel(
+	dateAttribute,
+	{ isFloating = false, now = new Date() } = {}
+) {
+	if ( ! dateAttribute || isFloating ) {
+		return __( 'Immediately' );
+	}
+
+	// If the user timezone does not equal the site timezone then using words
+	// like 'tomorrow' is confusing, so show the full date.
+	if ( ! isTimezoneSameAsSiteTimezone( now ) ) {
+		return getFullPostScheduleLabel( dateAttribute );
+	}
+
+	const date = getDate( dateAttribute );
+
+	if ( isSameDay( date, now ) ) {
+		return sprintf(
+			// translators: %s: Time of day the post is scheduled for.
+			__( 'Today at %s' ),
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
+		);
+	}
+
+	const tomorrow = new Date( now );
+	tomorrow.setDate( tomorrow.getDate() + 1 );
+
+	if ( isSameDay( date, tomorrow ) ) {
+		return sprintf(
+			// translators: %s: Time of day the post is scheduled for.
+			__( 'Tomorrow at %s' ),
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
+		);
+	}
+
+	if ( date.getFullYear() === now.getFullYear() ) {
+		return dateI18n(
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			_x( 'F j g:i\xa0a', 'post schedule date format without year' ),
+			date
+		);
+	}
+
+	return dateI18n(
+		// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
+		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
+		date
+	);
+}
+
+function getTimezoneAbbreviation() {
+	const { timezone } = __experimentalGetSettings();
+
+	if ( timezone.abbr && isNaN( Number( timezone.abbr ) ) ) {
+		return timezone.abbr;
+	}
+
+	const symbol = timezone.offset < 0 ? '' : '+';
+	return `UTC${ symbol }${ timezone.offset }`;
+}
+
+function isTimezoneSameAsSiteTimezone( date ) {
+	const { timezone } = __experimentalGetSettings();
+
+	const siteOffset = Number( timezone.offset );
+	const dateOffset = -1 * ( date.getTimezoneOffset() / 60 );
+	return siteOffset === dateOffset;
+}
+
+function isSameDay( left, right ) {
+	return (
+		left.getDate() === right.getDate() &&
+		left.getMonth() === right.getMonth() &&
+		left.getFullYear() === right.getFullYear()
+	);
+}

package/src/components/post-schedule/test/label.js

@@ -1,32 +1,144 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { shallow } from 'enzyme';
+import { __experimentalGetSettings, setSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
  */
-import { PostScheduleLabel } from '../label';
+import { getFullPostScheduleLabel, getPostScheduleLabel } from '../label';
 
-describe( 'PostScheduleLabel', () => {
+describe( 'getFullPostScheduleLabel', () => {
+	it( 'should show a date', () => {
+		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+0' ); // Unused, for backwards compatibility.
+	} );
+
+	it( "should show site's timezone abbr", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10, string: 'Australia/Sydney', abbr: 'AEST' },
+		} );
+
+		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm AEST' );
+
+		setSettings( settings );
+	} );
+
+	it( "should show site's timezone offset", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10 },
+		} );
+
+		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+10' );
+
+		setSettings( settings );
+	} );
+} );
+
+describe( 'getPostScheduleLabel', () => {
 	it( 'should show the post will be published immediately if no publish date is set', () => {
-		const wrapper = shallow( <PostScheduleLabel date={ undefined } /> );
-		expect( wrapper.text() ).toBe( 'Immediately' );
+		const label = getPostScheduleLabel( undefined );
+		expect( label ).toBe( 'Immediately' );
 	} );
 
 	it( 'should show the post will be published immediately if it has a floating date', () => {
-		const date = '2018-09-17T01:23:45.678Z';
-		const wrapper = shallow(
-			<PostScheduleLabel date={ date } isFloating={ true } />
+		const label = getPostScheduleLabel( '2022-04-28T15:30:00', {
+			isFloating: true,
+		} );
+		expect( label ).toBe( 'Immediately' );
+	} );
+
+	it( "should show full date if user timezone does not equal site's timezone", () => {
+		const now = new Date( '2022-04-28T13:00:00.000Z' );
+		jest.spyOn( now, 'getTimezoneOffset' ).mockImplementationOnce(
+			() => 10 * -60 // UTC+10
 		);
-		expect( wrapper.text() ).toBe( 'Immediately' );
+
+		const label = getPostScheduleLabel( '2022-04-28T15:30:00', { now } );
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+0' );
 	} );
 
-	it( 'should show the scheduled publish date if a date has been set', () => {
-		const date = '2018-09-17T01:23:45.678Z';
-		const wrapper = shallow(
-			<PostScheduleLabel date={ date } isFloating={ false } />
+	it( "should show today if date is same day as now and user timezone equals site's timezone", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10 },
+		} );
+
+		const now = new Date( '2022-04-28T03:00:00.000Z' );
+		jest.spyOn( now, 'getTimezoneOffset' ).mockImplementationOnce(
+			() => 10 * -60 // UTC+10
 		);
-		expect( wrapper.text() ).not.toBe( 'Immediately' );
+
+		const label = getPostScheduleLabel( '2022-04-28T15:30:00', { now } );
+		expect( label ).toBe( 'Today at 3:30\xa0pm' );
+
+		setSettings( settings );
+	} );
+
+	it( "should show tomorrow if date is same day as now + 1 day and user timezone equals site's timezone", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10 },
+		} );
+
+		const now = new Date( '2022-04-28T03:00:00.000Z' );
+		jest.spyOn( now, 'getTimezoneOffset' ).mockImplementationOnce(
+			() => 10 * -60 // UTC+10
+		);
+
+		const label = getPostScheduleLabel( '2022-04-29T15:30:00', { now } );
+		expect( label ).toBe( 'Tomorrow at 3:30\xa0pm' );
+
+		setSettings( settings );
+	} );
+
+	it( "should hide year if date is same year as now and user timezone equals site's timezone", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10 },
+		} );
+
+		const now = new Date( '2022-04-28T03:00:00.000Z' );
+		jest.spyOn( now, 'getTimezoneOffset' ).mockImplementationOnce(
+			() => 10 * -60 // UTC+10
+		);
+
+		const label = getPostScheduleLabel( '2022-12-25T15:30:00', { now } );
+		expect( label ).toBe( 'December 25 3:30\xa0pm' );
+
+		setSettings( settings );
+	} );
+
+	it( "should show year if date is not same year as now and user timezone equals site's timezone", () => {
+		const settings = __experimentalGetSettings();
+
+		setSettings( {
+			...settings,
+			timezone: { offset: 10 },
+		} );
+
+		const now = new Date( '2022-04-28T03:00:00.000Z' );
+		jest.spyOn( now, 'getTimezoneOffset' ).mockImplementationOnce(
+			() => 10 * -60 // UTC+10
+		);
+
+		const label = getPostScheduleLabel( '2023-04-28T15:30:00', { now } );
+		expect( label ).toBe( 'April 28, 2023 3:30\xa0pm' );
+
+		setSettings( settings );
 	} );
 } );