@wordpress/editor 12.9.0 → 12.12.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/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 );
 	} );
 } );

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

@@ -4,8 +4,9 @@
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import { TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,25 +42,19 @@ export class PostSlug extends Component {
 	}
 
 	render() {
-		const { instanceId } = this.props;
 		const { editedSlug } = this.state;
-
-		const inputId = 'editor-post-slug-' + instanceId;
-
 		return (
 			<PostSlugCheck>
-				<label htmlFor={ inputId }>{ __( 'Slug' ) }</label>
-				<input
+				<TextControl
+					label={ __( 'Slug' ) }
 					autoComplete="off"
 					spellCheck="false"
-					type="text"
-					id={ inputId }
 					value={ editedSlug }
-					onChange={ ( event ) =>
-						this.setState( { editedSlug: event.target.value } )
+					onChange={ ( slug ) =>
+						this.setState( { editedSlug: slug } )
 					}
 					onBlur={ this.setSlug }
-					className="editor-post-slug__input"
+					className="editor-post-slug"
 				/>
 			</PostSlugCheck>
 		);
@@ -68,9 +63,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 {
@@ -87,5 +81,4 @@ export default compose( [
 			},
 		};
 	} ),
-	withInstanceId,
 ] )( PostSlug );

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

@@ -3,6 +3,11 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,7 @@ describe( 'PostSlug', () => {
 		it( 'should update internal slug', () => {
 			const wrapper = shallow( <PostSlug postSlug="index" /> );
 
-			wrapper.find( 'input' ).simulate( 'change', {
-				target: {
-					value: 'single',
-				},
-			} );
+			wrapper.find( TextControl ).prop( 'onChange' )( 'single' );
 
 			expect( wrapper.state().editedSlug ).toEqual( 'single' );
 		} );
@@ -28,7 +29,7 @@ describe( 'PostSlug', () => {
 				<PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } />
 			);
 
-			wrapper.find( 'input' ).simulate( 'blur', {
+			wrapper.find( TextControl ).prop( 'onBlur' )( {
 				target: {
 					value: 'single',
 				},

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,
 					} ),
@@ -86,7 +86,7 @@ function findOrCreateTerm( termName, restBase ) {
 		.then( unescapeTerm );
 }
 
-function FlatTermSelector( { slug } ) {
+export function FlatTermSelector( { slug } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
@@ -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

@@ -152,7 +152,7 @@ export function getFilterMatcher( filterValue ) {
  * @param {string} props.slug Taxonomy slug.
  * @return {WPElement}        Hierarchical term selector component.
  */
-function HierarchicalTermSelector( { slug } ) {
+export function HierarchicalTermSelector( { slug } ) {
 	const [ adding, setAdding ] = useState( false );
 	const [ formName, setFormName ] = useState( '' );
 	/**
@@ -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-taxonomies/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, identity, includes } from 'lodash';
+import { filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import HierarchicalTermSelector from './hierarchical-term-selector';
 import FlatTermSelector from './flat-term-selector';
 import { store as editorStore } from '../../store';
 
+const identity = ( x ) => x;
+
 export function PostTaxonomies( {
 	postType,
 	taxonomies,

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

@@ -16,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function PostTemplate( {} ) {
+export function PostTemplate() {
 	const { availableTemplates, selectedTemplate, isViewable } = useSelect(
 		( select ) => {
 			const {