@wordpress/editor 12.8.0 → 12.11.0

package/src/components/post-publish-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, get, some } from 'lodash';
+import { get, some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -19,15 +19,16 @@ import { __ } from '@wordpress/i18n';
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
 
+const noop = () => {};
+
 export class PostPublishButton extends Component {
 	constructor( props ) {
 		super( props );
 		this.buttonNode = createRef();
 
 		this.createOnClick = this.createOnClick.bind( this );
-		this.closeEntitiesSavedStates = this.closeEntitiesSavedStates.bind(
-			this
-		);
+		this.closeEntitiesSavedStates =
+			this.closeEntitiesSavedStates.bind( this );
 
 		this.state = {
 			entitiesSavedStatesCallback: false,
@@ -41,10 +42,8 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const {
-				hasNonPostEntityChanges,
-				setEntitiesSavedStatesCallback,
-			} = this.props;
+			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
+				this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.

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

@@ -167,9 +167,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
-		const { disablePublishSidebar, enablePublishSidebar } = dispatch(
-			editorStore
-		);
+		const { disablePublishSidebar, enablePublishSidebar } =
+			dispatch( editorStore );
 		return {
 			onTogglePublishSidebar: () => {
 				if ( isPublishSidebarEnabled ) {

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

@@ -21,15 +21,17 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const categoriesTaxonomy = select( coreStore ).getTaxonomy(
-			'category'
-		);
-		const defaultCategorySlug = 'uncategorized';
+		const categoriesTaxonomy =
+			select( coreStore ).getTaxonomy( 'category' );
+		const defaultCategoryId = select( coreStore ).getEntityRecord(
+			'root',
+			'site'
+		)?.default_category;
 		const defaultCategory = select( coreStore ).getEntityRecords(
 			'taxonomy',
 			'category',
 			{
-				slug: defaultCategorySlug,
+				id: defaultCategoryId,
 			}
 		)?.[ 0 ];
 		const postTypeSupportsCategories =

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

@@ -39,9 +39,8 @@ const PostFormatSuggestion = ( {
 
 export default function PostFormatPanel() {
 	const { currentPostFormat, suggestion } = useSelect( ( select ) => {
-		const { getEditedPostAttribute, getSuggestedPostFormat } = select(
-			editorStore
-		);
+		const { getEditedPostAttribute, getSuggestedPostFormat } =
+			select( editorStore );
 		const supportedFormats = get(
 			select( coreStore ).getThemeSupports(),
 			[ 'formats' ],

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

@@ -163,11 +163,8 @@ class PostPublishPanelPostpublish extends Component {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getEditedPostAttribute,
-		getCurrentPost,
-		isCurrentPostScheduled,
-	} = select( editorStore );
+	const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } =
+		select( editorStore );
 	const { getPostType } = select( coreStore );
 
 	return {

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

@@ -35,9 +35,8 @@ function PostPublishPanelPrepublish( { children } ) {
 		siteTitle,
 		siteHome,
 	} = useSelect( ( select ) => {
-		const { getCurrentPost, isEditedPostBeingScheduled } = select(
-			editorStore
-		);
+		const { getCurrentPost, isEditedPostBeingScheduled } =
+			select( editorStore );
 		const { getEntityRecord, isResolving } = select( coreStore );
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};

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/index.js

@@ -3,8 +3,8 @@
  */
 import { __experimentalGetSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { DateTimePicker } from '@wordpress/components';
-import { useRef, useState, useMemo } from '@wordpress/element';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -21,7 +21,7 @@ function getDayOfTheMonth( date = new Date(), firstDay = true ) {
 	).toISOString();
 }
 
-export default function PostSchedule() {
+export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -61,7 +61,6 @@ export default function PostSchedule() {
 		[ eventsByPostType ]
 	);
 
-	const ref = useRef();
 	const settings = __experimentalGetSettings();
 
 	// To know if the current timezone is a 12 hour time with look for "a" in the time format
@@ -75,20 +74,14 @@ export default function PostSchedule() {
 			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
 
-	function onChange( newDate ) {
-		onUpdateDate( newDate );
-		const { ownerDocument } = ref.current;
-		ownerDocument.activeElement.blur();
-	}
-
 	return (
-		<DateTimePicker
-			ref={ ref }
+		<PublishDateTimePicker
 			currentDate={ postDate }
-			onChange={ onChange }
+			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
 			onMonthPreviewed={ setPreviewedMonth }
+			onClose={ onClose }
 		/>
 	);
 }

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 } ) {
+	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 );
 	} );
 } );

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

@@ -68,9 +68,8 @@ export class PostSlug extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } = select(
-			editorStore
-		);
+		const { getCurrentPost, getEditedPostAttribute } =
+			select( editorStore );
 
 		const { id } = getCurrentPost();
 		return {

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

@@ -27,9 +27,8 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			postSticky: select( editorStore ).getEditedPostAttribute(
-				'sticky'
-			),
+			postSticky:
+				select( editorStore ).getEditedPostAttribute( 'sticky' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

package/src/components/post-switch-to-draft-button/index.js

@@ -65,11 +65,8 @@ function PostSwitchToDraftButton( {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const {
-			isSavingPost,
-			isCurrentPostPublished,
-			isCurrentPostScheduled,
-		} = select( editorStore );
+		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
+			select( editorStore );
 		return {
 			isSaving: isSavingPost(),
 			isPublished: isCurrentPostPublished(),

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

@@ -55,11 +55,11 @@ const termNamesToIds = ( names, terms ) => {
 };
 
 // Tries to create a term or fetch it if it already exists.
-function findOrCreateTerm( termName, restBase ) {
+function findOrCreateTerm( termName, restBase, namespace ) {
 	const escapedTermName = escapeString( termName );
 
 	return apiFetch( {
-		path: `/wp/v2/${ restBase }`,
+		path: `/${ namespace }/${ restBase }`,
 		method: 'POST',
 		data: { name: escapedTermName },
 	} )
@@ -68,7 +68,7 @@ function findOrCreateTerm( termName, restBase ) {
 			if ( errorCode === 'term_exists' ) {
 				// If the terms exist, fetch it instead of creating a new one.
 				const addRequest = apiFetch( {
-					path: addQueryArgs( `/wp/v2/${ restBase }`, {
+					path: addQueryArgs( `/${ namespace }/${ restBase }`, {
 						...DEFAULT_QUERY,
 						search: escapedTermName,
 					} ),
@@ -100,14 +100,10 @@ function FlatTermSelector( { slug } ) {
 		hasResolvedTerms,
 	} = useSelect(
 		( select ) => {
-			const { getCurrentPost, getEditedPostAttribute } = select(
-				editorStore
-			);
-			const {
-				getEntityRecords,
-				getTaxonomy,
-				hasFinishedResolution,
-			} = select( coreStore );
+			const { getCurrentPost, getEditedPostAttribute } =
+				select( editorStore );
+			const { getEntityRecords, getTaxonomy, hasFinishedResolution } =
+				select( coreStore );
 			const post = getCurrentPost();
 			const _taxonomy = getTaxonomy( slug );
 			const _termIds = _taxonomy
@@ -228,9 +224,10 @@ function FlatTermSelector( { slug } ) {
 			return;
 		}
 
+		const namespace = taxonomy?.rest_namespace ?? 'wp/v2';
 		Promise.all(
 			newTermNames.map( ( termName ) =>
-				findOrCreateTerm( termName, taxonomy.rest_base )
+				findOrCreateTerm( termName, taxonomy.rest_base, namespace )
 			)
 		).then( ( newTerms ) => {
 			const newAvailableTerms = availableTerms.concat( newTerms );

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

@@ -173,12 +173,10 @@ function HierarchicalTermSelector( { slug } ) {
 		taxonomy,
 	} = useSelect(
 		( select ) => {
-			const { getCurrentPost, getEditedPostAttribute } = select(
-				editorStore
-			);
-			const { getTaxonomy, getEntityRecords, isResolving } = select(
-				coreStore
-			);
+			const { getCurrentPost, getEditedPostAttribute } =
+				select( editorStore );
+			const { getTaxonomy, getEntityRecords, isResolving } =
+				select( coreStore );
 			const _taxonomy = getTaxonomy( slug );
 
 			return {

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

@@ -37,37 +37,27 @@ function PostTitle( _, forwardedRef ) {
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
-	const {
-		insertDefaultBlock,
-		clearSelectedBlock,
-		insertBlocks,
-	} = useDispatch( blockEditorStore );
-	const {
-		isCleanNewPost,
-		title,
-		placeholder,
-		isFocusMode,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isCleanNewPost: _isCleanNewPost,
-		} = select( editorStore );
-		const { getSettings } = select( blockEditorStore );
-		const {
-			titlePlaceholder,
-			focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		} = getSettings();
-
-		return {
-			isCleanNewPost: _isCleanNewPost(),
-			title: getEditedPostAttribute( 'title' ),
-			placeholder: titlePlaceholder,
-			isFocusMode: focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		};
-	}, [] );
+	const { insertDefaultBlock, clearSelectedBlock, insertBlocks } =
+		useDispatch( blockEditorStore );
+	const { isCleanNewPost, title, placeholder, isFocusMode, hasFixedToolbar } =
+		useSelect( ( select ) => {
+			const { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost } =
+				select( editorStore );
+			const { getSettings } = select( blockEditorStore );
+			const {
+				titlePlaceholder,
+				focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			} = getSettings();
+
+			return {
+				isCleanNewPost: _isCleanNewPost(),
+				title: getEditedPostAttribute( 'title' ),
+				placeholder: titlePlaceholder,
+				isFocusMode: focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			};
+		}, [] );
 
 	useImperativeHandle( forwardedRef, () => ( {
 		focus: () => {