@wordpress/editor 13.27.2 → 13.28.0

package/src/components/post-author/select.js

@@ -2,36 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
+import { useDispatch } from '@wordpress/data';
 import { SelectControl } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
+import { useAuthorsQuery } from './hook';
 
-function PostAuthorSelect() {
+export default function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
-	const { postAuthor, authors } = useSelect( ( select ) => {
-		return {
-			postAuthor:
-				select( editorStore ).getEditedPostAttribute( 'author' ),
-			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
-		};
-	}, [] );
-
-	const authorOptions = useMemo( () => {
-		return ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-	}, [ authors ] );
+	const { authorId, authorOptions } = useAuthorsQuery();
 
 	const setAuthorId = ( value ) => {
 		const author = Number( value );
@@ -46,9 +28,7 @@ function PostAuthorSelect() {
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			onChange={ setAuthorId }
-			value={ postAuthor }
+			value={ authorId }
 		/>
 	);
 }
-
-export default PostAuthorSelect;

package/src/components/post-last-revision/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, _n } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
@@ -31,13 +31,13 @@ function LastRevision() {
 				} ) }
 				className="editor-post-last-revision__title"
 				icon={ backup }
-			>
-				{ sprintf(
-					/* translators: %d: number of revisions */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
+				iconPosition="right"
+				text={ sprintf(
+					/* translators: %s: number of revisions */
+					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }
-			</Button>
+			/>
 		</PostLastRevisionCheck>
 	);
 }

package/src/components/post-last-revision/style.scss

@@ -1,14 +1,11 @@
 .editor-post-last-revision__title {
 	width: 100%;
-	font-weight: 600;
-
-	.dashicon {
-		margin-right: 5px;
-	}
+	font-weight: 500;
 }
 
-.components-button.editor-post-last-revision__title {
+.editor-post-last-revision__title.components-button.has-icon {
 	height: 100%;
+	justify-content: space-between;
 
 	&:hover,
 	&:active {

package/src/components/post-panel-row/style.scss

@@ -1,6 +1,6 @@
 .editor-post-panel__row {
 	width: 100%;
-	min-height: $button-size;
+	min-height: $button-size-next-default-40px;
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
 }
@@ -8,14 +8,14 @@
 .editor-post-panel__row-label {
 	width: 30%;
 	flex-shrink: 0;
-	min-height: $button-size;
+	min-height: $button-size-next-default-40px;
 	display: flex;
 	align-items: center;
 }
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
-	min-height: $button-size;
+	min-height: $button-size-next-default-40px;
 	display: flex;
 	align-items: center;
 }

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

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -34,12 +33,26 @@ const TagsPanel = () => {
 	);
 };
 
-class MaybeTagsPanel extends Component {
-	constructor( props ) {
-		super( props );
-		this.state = {
-			hadTagsWhenOpeningThePanel: props.hasTags,
+const MaybeTagsPanel = () => {
+	const { hasTags, isPostTypeSupported } = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
+		const _isPostTypeSupported = tagsTaxonomy?.types?.includes( postType );
+		const areTagsFetched = tagsTaxonomy !== undefined;
+		const tags =
+			tagsTaxonomy &&
+			select( editorStore ).getEditedPostAttribute(
+				tagsTaxonomy.rest_base
+			);
+		return {
+			hasTags: !! tags?.length,
+			isPostTypeSupported: areTagsFetched && _isPostTypeSupported,
 		};
+	}, [] );
+	const [ hadTagsWhenOpeningThePanel ] = useState( hasTags );
+
+	if ( ! isPostTypeSupported ) {
+		return null;
 	}
 
 	/*
@@ -52,34 +65,11 @@ class MaybeTagsPanel extends Component {
 	 * hiding this panel and keeping the user from adding
 	 * more than one tag.
 	 */
-	render() {
-		if ( ! this.state.hadTagsWhenOpeningThePanel ) {
-			return <TagsPanel />;
-		}
-
-		return null;
+	if ( ! hadTagsWhenOpeningThePanel ) {
+		return <TagsPanel />;
 	}
-}
 
-export default compose(
-	withSelect( ( select ) => {
-		const postType = select( editorStore ).getCurrentPostType();
-		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
-		const tags =
-			tagsTaxonomy &&
-			select( editorStore ).getEditedPostAttribute(
-				tagsTaxonomy.rest_base
-			);
-		return {
-			areTagsFetched: tagsTaxonomy !== undefined,
-			isPostTypeSupported:
-				tagsTaxonomy &&
-				tagsTaxonomy.types.some( ( type ) => type === postType ),
-			hasTags: tags && tags.length,
-		};
-	} ),
-	ifCondition(
-		( { areTagsFetched, isPostTypeSupported } ) =>
-			isPostTypeSupported && areTagsFetched
-	)
-)( MaybeTagsPanel );
+	return null;
+};
+
+export default MaybeTagsPanel;

package/src/components/post-publish-panel/style.scss

@@ -152,7 +152,9 @@
 	}
 
 	input[readonly] {
-		padding: $grid-unit-20;
+		// Do not increase top and bottom padding otherwise Firefox won't show the text overflow ellipsis.
+		// See https://github.com/WordPress/gutenberg/pull/57310
+		padding: $grid-unit-15;
 		background: $gray-100;
 		border-color: $gray-400;
 		overflow: hidden;

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

@@ -102,7 +102,7 @@ function getTimezoneAbbreviation() {
 	}
 
 	const symbol = timezone.offset < 0 ? '' : '+';
-	return `UTC${ symbol }${ timezone.offset }`;
+	return `UTC${ symbol }${ timezone.offsetFormatted }`;
 }
 
 function isTimezoneSameAsSiteTimezone( date ) {

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

@@ -40,6 +40,7 @@ export default function PostSchedulePanel() {
 					contentClassName="editor-post-schedule__dialog"
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
+							__next40pxDefaultSize
 							className="editor-post-schedule__dialog-toggle"
 							variant="tertiary"
 							onClick={ onToggle }

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

@@ -23,9 +23,11 @@ describe( 'getFullPostScheduleLabel', () => {
 		} );
 
 		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
-		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm AEST' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm AEST' );
 	} );
 
 	it( "should show site's timezone offset", () => {
@@ -33,13 +35,15 @@ describe( 'getFullPostScheduleLabel', () => {
 
 		setSettings( {
 			...settings,
-			timezone: { offset: 10 },
+			timezone: { offsetFormatted: 10 },
 		} );
 
 		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
-		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+10' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+10' );
 	} );
 } );
 
@@ -80,9 +84,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-04-28T15:30:00', { now } );
-		expect( label ).toBe( 'Today at 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'Today at 3:30\xa0pm' );
 	} );
 
 	it( "should show tomorrow if date is same day as now + 1 day and user timezone equals site's timezone", () => {
@@ -99,9 +105,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-04-29T15:30:00', { now } );
-		expect( label ).toBe( 'Tomorrow at 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'Tomorrow at 3:30\xa0pm' );
 	} );
 
 	it( "should hide year if date is same year as now and user timezone equals site's timezone", () => {
@@ -118,9 +126,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-12-25T15:30:00', { now } );
-		expect( label ).toBe( 'December 25 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'December 25 3:30\xa0pm' );
 	} );
 
 	it( "should show year if date is not same year as now and user timezone equals site's timezone", () => {
@@ -137,8 +147,10 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2023-04-28T15:30:00', { now } );
-		expect( label ).toBe( 'April 28, 2023 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2023 3:30\xa0pm' );
 	} );
 } );

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

@@ -46,6 +46,7 @@ export default function PostSwitchToDraftButton() {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
 					if ( ! isDisabled ) {

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

@@ -47,8 +47,14 @@ export default function PostSyncStatus() {
 		<PostPanelRow label={ __( 'Sync status' ) }>
 			<div className="editor-post-sync-status__value">
 				{ syncStatus === 'unsynced'
-					? __( 'Not synced' )
-					: __( 'Fully synced' ) }
+					? _x(
+							'Not synced',
+							'Text that indicates that the pattern is not synchronized'
+					  )
+					: _x(
+							'Synced',
+							'Text that indicates that the pattern is synchronized'
+					  ) }
 			</div>
 		</PostPanelRow>
 	);

package/src/components/post-taxonomies/check.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -10,22 +9,19 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
-	const hasTaxonomies = taxonomies?.some( ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
+export default function PostTaxonomiesCheck( { children } ) {
+	const hasTaxonomies = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const taxonomies = select( coreStore ).getTaxonomies( {
+			per_page: -1,
+		} );
+		return taxonomies?.some( ( taxonomy ) =>
+			taxonomy.types.includes( postType )
+		);
+	}, [] );
 	if ( ! hasTaxonomies ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomiesCheck );

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

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -15,19 +14,20 @@ import { store as editorStore } from '../../store';
 
 const identity = ( x ) => x;
 
-export function PostTaxonomies( {
-	postType,
-	taxonomies,
-	taxonomyWrapper = identity,
-} ) {
-	const availableTaxonomies = ( taxonomies ?? [] ).filter( ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
-	const visibleTaxonomies = availableTaxonomies.filter(
-		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
-		// https://github.com/WordPress/gutenberg/issues/40326
-		( taxonomy ) => taxonomy.visibility?.show_ui
+export function PostTaxonomies( { taxonomyWrapper = identity } ) {
+	const { postType, taxonomies } = useSelect( ( select ) => {
+		return {
+			postType: select( editorStore ).getCurrentPostType(),
+			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
+		};
+	}, [] );
+	const visibleTaxonomies = ( taxonomies ?? [] ).filter(
+		( taxonomy ) =>
+			// In some circumstances .visibility can end up as undefined so optional chaining operator required.
+			// https://github.com/WordPress/gutenberg/issues/40326
+			taxonomy.types.includes( postType ) && taxonomy.visibility?.show_ui
 	);
+
 	return visibleTaxonomies.map( ( taxonomy ) => {
 		const TaxonomyComponent = taxonomy.hierarchical
 			? HierarchicalTermSelector
@@ -43,11 +43,4 @@ export function PostTaxonomies( {
 	} );
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomies );
+export default PostTaxonomies;

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

@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { PostTaxonomies } from '../';
+import PostTaxonomies from '../';
 
 describe( 'PostTaxonomies', () => {
 	const genresTaxonomy = {
@@ -87,20 +87,30 @@ describe( 'PostTaxonomies', () => {
 	it( 'should render no children if taxonomy data not available', () => {
 		const taxonomies = null;
 
-		const { container } = render(
-			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'page' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue(
+			taxonomies
 		);
 
+		const { container } = render( <PostTaxonomies /> );
+
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render taxonomy components for taxonomies assigned to post type', () => {
-		const { rerender } = render(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [ genresTaxonomy, categoriesTaxonomy ] }
-			/>
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			categoriesTaxonomy,
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
@@ -112,59 +122,35 @@ describe( 'PostTaxonomies', () => {
 		expect(
 			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					genresTaxonomy,
-					{
-						...categoriesTaxonomy,
-						types: [ 'post', 'page', 'book' ],
-					},
-				] }
-			/>
-		);
-
-		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
-		expect(
-			screen.getByRole( 'group', { name: 'Categories' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new genre' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new category' } )
-		).toBeVisible();
 	} );
 
 	it( 'should not render taxonomy components that hide their ui', () => {
-		const { rerender } = render(
-			<PostTaxonomies postType="book" taxonomies={ [ genresTaxonomy ] } />
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			{
+				...categoriesTaxonomy,
+				types: [ 'post', 'page', 'book' ],
+				visibility: {
+					show_ui: false,
+				},
+			},
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
 			screen.getByRole( 'button', { name: 'Add new genre' } )
 		).toBeVisible();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					{
-						...genresTaxonomy,
-						visibility: { show_ui: false },
-					},
-				] }
-			/>
-		);
-
 		expect(
-			screen.queryByRole( 'group', { name: 'Genres' } )
+			screen.queryByRole( 'group', { name: 'Categories' } )
 		).not.toBeInTheDocument();
 		expect(
-			screen.queryByRole( 'button', { name: 'Add new genre' } )
+			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
 	} );
 } );

package/src/components/post-template/block-theme.js

@@ -24,18 +24,24 @@ const POPOVER_PROPS = {
 };
 
 export default function BlockThemeControl( { id } ) {
-	const { isTemplateHidden, getPostLinkProps, getEditorSettings, hasGoBack } =
-		useSelect( ( select ) => {
-			const { getRenderingMode, getEditorSettings: _getEditorSettings } =
-				unlock( select( editorStore ) );
-			const editorSettings = _getEditorSettings();
-			return {
-				isTemplateHidden: getRenderingMode() === 'post-only',
-				getPostLinkProps: editorSettings.getPostLinkProps,
-				getEditorSettings: _getEditorSettings,
-				hasGoBack: editorSettings.hasOwnProperty( 'goBack' ),
-			};
-		}, [] );
+	const {
+		isTemplateHidden,
+		onNavigateToEntityRecord,
+		getEditorSettings,
+		hasGoBack,
+	} = useSelect( ( select ) => {
+		const { getRenderingMode, getEditorSettings: _getEditorSettings } =
+			unlock( select( editorStore ) );
+		const editorSettings = _getEditorSettings();
+		return {
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			getEditorSettings: _getEditorSettings,
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+		};
+	}, [] );
 
 	const { editedRecord: template, hasResolved } = useEntityRecord(
 		'postType',
@@ -44,23 +50,19 @@ export default function BlockThemeControl( { id } ) {
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
-	const editTemplate = getPostLinkProps
-		? getPostLinkProps( {
-				postId: template.id,
-				postType: 'wp_template',
-		  } )
-		: {};
 
 	if ( ! hasResolved ) {
 		return null;
 	}
-	// The site editor does not have a `goBack` setting as it uses its own routing
+
+	// The site editor does not have a `onNavigateToPreviousEntityRecord` setting as it uses its own routing
 	// and assigns its own backlink to focusMode pages.
 	const notificationAction = hasGoBack
 		? [
 				{
 					label: __( 'Go back' ),
-					onClick: () => getEditorSettings().goBack(),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
 				},
 		  ]
 		: undefined;
@@ -69,6 +71,7 @@ export default function BlockThemeControl( { id } ) {
 			popoverProps={ POPOVER_PROPS }
 			focusOnMount
 			toggleProps={ {
+				__next40pxDefaultSize: true,
 				variant: 'tertiary',
 			} }
 			label={ __( 'Template options' ) }
@@ -79,8 +82,11 @@ export default function BlockThemeControl( { id } ) {
 				<>
 					<MenuGroup>
 						<MenuItem
-							onClick={ ( event ) => {
-								editTemplate.onClick( event );
+							onClick={ () => {
+								onNavigateToEntityRecord( {
+									postId: template.id,
+									postType: 'wp_template',
+								} );
 								onClose();
 								createSuccessNotice(
 									__(
@@ -95,6 +101,7 @@ export default function BlockThemeControl( { id } ) {
 						>
 							{ __( 'Edit template' ) }
 						</MenuItem>
+
 						<SwapTemplateButton onClick={ onClose } />
 						<ResetDefaultTemplate onClick={ onClose } />
 						<CreateNewTemplate onClick={ onClose } />