@wordpress/editor 13.27.1 → 13.28.0

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,30 @@ const POPOVER_PROPS = {
 };
 
 export default function BlockThemeControl( { id } ) {
-	const { isTemplateHidden } = useSelect( ( select ) => {
-		const { getRenderingMode } = unlock( select( editorStore ) );
+	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',
 		'wp_template',
 		id
 	);
-	const { getEditorSettings } = useSelect( editorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
 
@@ -43,11 +55,23 @@ export default function BlockThemeControl( { id } ) {
 		return null;
 	}
 
+	// 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().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
 	return (
 		<DropdownMenu
 			popoverProps={ POPOVER_PROPS }
 			focusOnMount
 			toggleProps={ {
+				__next40pxDefaultSize: true,
 				variant: 'tertiary',
 			} }
 			label={ __( 'Template options' ) }
@@ -59,7 +83,10 @@ export default function BlockThemeControl( { id } ) {
 					<MenuGroup>
 						<MenuItem
 							onClick={ () => {
-								setRenderingMode( 'template-only' );
+								onNavigateToEntityRecord( {
+									postId: template.id,
+									postType: 'wp_template',
+								} );
 								onClose();
 								createSuccessNotice(
 									__(
@@ -67,22 +94,14 @@ export default function BlockThemeControl( { id } ) {
 									),
 									{
 										type: 'snackbar',
-										actions: [
-											{
-												label: __( 'Go back' ),
-												onClick: () =>
-													setRenderingMode(
-														getEditorSettings()
-															.defaultRenderingMode
-													),
-											},
-										],
+										actions: notificationAction,
 									}
 								);
 							} }
 						>
 							{ __( 'Edit template' ) }
 						</MenuItem>
+
 						<SwapTemplateButton onClick={ onClose } />
 						<ResetDefaultTemplate onClick={ onClose } />
 						<CreateNewTemplate onClick={ onClose } />

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

@@ -44,6 +44,7 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			className="edit-post-post-template__toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
@@ -63,12 +64,16 @@ function PostTemplateDropdownContent( { onClose } ) {
 		selectedTemplateSlug,
 		canCreate,
 		canEdit,
+		currentTemplateId,
+		onNavigateToEntityRecord,
+		getEditorSettings,
 	} = useSelect(
 		( select ) => {
 			const { canUser, getEntityRecords } = select( coreStore );
 			const editorSettings = select( editorStore ).getEditorSettings();
 			const canCreateTemplates = canUser( 'create', 'templates' );
-
+			const _currentTemplateId =
+				select( editorStore ).getCurrentTemplateId();
 			return {
 				availableTemplates: editorSettings.availableTemplates,
 				fetchedTemplates: canCreateTemplates
@@ -88,7 +93,11 @@ function PostTemplateDropdownContent( { onClose } ) {
 					allowSwitchingTemplate &&
 					canCreateTemplates &&
 					editorSettings.supportsTemplateMode &&
-					!! select( editorStore ).getCurrentTemplateId(),
+					!! _currentTemplateId,
+				currentTemplateId: _currentTemplateId,
+				onNavigateToEntityRecord:
+					editorSettings.onNavigateToEntityRecord,
+				getEditorSettings: select( editorStore ).getEditorSettings,
 			};
 		},
 		[ allowSwitchingTemplate ]
@@ -113,9 +122,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 		options.find( ( option ) => ! option.value ); // The default option has '' value.
 
 	const { editPost } = useDispatch( editorStore );
-	const { getEditorSettings } = useSelect( editorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
 	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
 
 	return (
@@ -155,12 +162,15 @@ function PostTemplateDropdownContent( { onClose } ) {
 					}
 				/>
 			) }
-			{ canEdit && (
+			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
 						variant="link"
 						onClick={ () => {
-							setRenderingMode( 'template-only' );
+							onNavigateToEntityRecord( {
+								postId: currentTemplateId,
+								postType: 'wp_template',
+							} );
 							onClose();
 							createSuccessNotice(
 								__(
@@ -172,10 +182,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 										{
 											label: __( 'Go back' ),
 											onClick: () =>
-												setRenderingMode(
-													getEditorSettings()
-														.defaultRenderingMode
-												),
+												getEditorSettings().onNavigateToPreviousEntityRecord(),
 										},
 									],
 								}

package/src/components/post-template/create-new-template-modal.js

@@ -23,15 +23,20 @@ import { store as editorStore } from '../../store';
 const DEFAULT_TITLE = __( 'Custom Template' );
 
 export default function CreateNewTemplateModal( { onClose } ) {
-	const defaultBlockTemplate = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().defaultBlockTemplate,
-		[]
+	const { defaultBlockTemplate, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const { getEditorSettings, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				defaultBlockTemplate: getEditorSettings().defaultBlockTemplate,
+				onNavigateToEntityRecord:
+					getEditorSettings().onNavigateToEntityRecord,
+				getTemplateId: getCurrentTemplateId,
+			};
+		}
 	);
 
-	const { createTemplate, setRenderingMode } = unlock(
-		useDispatch( editorStore )
-	);
+	const { createTemplate } = unlock( useDispatch( editorStore ) );
 
 	const [ title, setTitle ] = useState( '' );
 
@@ -86,15 +91,18 @@ export default function CreateNewTemplateModal( { onClose } ) {
 				),
 			] );
 
-		await createTemplate( {
+		const newTemplate = await createTemplate( {
 			slug: cleanForSlug( title || DEFAULT_TITLE ),
 			content: newTemplateContent,
 			title: title || DEFAULT_TITLE,
 		} );
 
 		setIsBusy( false );
+		onNavigateToEntityRecord( {
+			postId: newTemplate.id,
+			postType: 'wp_template',
+		} );
 		cancel();
-		setRenderingMode( 'template-only' );
 	};
 
 	return (

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

@@ -47,7 +47,11 @@ export default function PostTemplatePanel() {
 		return canCreateTemplates;
 	}, [] );
 
-	if ( ! isBlockTheme && isVisible ) {
+	const canViewTemplates = useSelect( ( select ) => {
+		return select( coreStore ).canUser( 'read', 'templates' ) ?? false;
+	}, [] );
+
+	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
 		return (
 			<PostPanelRow label={ __( 'Template' ) }>
 				<ClassicThemeControl />

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

@@ -38,6 +38,7 @@ export default function PostTrash() {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="editor-post-trash"
 				isDestructive
 				variant="secondary"

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

@@ -47,6 +47,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 	const label = usePostURLLabel();
 	return (
 		<Button
+			__next40pxDefaultSize
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }

package/src/components/provider/index.js

@@ -29,6 +29,19 @@ const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
 
+/**
+ * These are global entities that are only there to split blocks into logical units
+ * They don't provide a "context" for the current post/page being rendered.
+ * So we should not use their ids as post context. This is important to allow post blocks
+ * (post content, post title) to be used within them without issues.
+ */
+const NON_CONTEXTUAL_POST_TYPES = [
+	'wp_block',
+	'wp_template',
+	'wp_navigation',
+	'wp_template_part',
+];
+
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -113,8 +126,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
 			const postContext =
-				rootLevelPost.type !== 'wp_template' ||
-				( shouldRenderTemplate && mode !== 'template-only' )
+				! NON_CONTEXTUAL_POST_TYPES.includes( rootLevelPost.type ) ||
+				shouldRenderTemplate
 					? { postId: post.id, postType: post.type }
 					: {};
 
@@ -126,12 +139,11 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						: undefined,
 			};
 		}, [
-			mode,
+			shouldRenderTemplate,
 			post.id,
 			post.type,
 			rootLevelPost.type,
-			rootLevelPost?.slug,
-			shouldRenderTemplate,
+			rootLevelPost.slug,
 		] );
 		const { editorSettings, selection, isReady } = useSelect(
 			( select ) => {
@@ -200,7 +212,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Synchronizes the active post with the state
 		useEffect( () => {
 			setEditedPost( post.type, post.id );
-		}, [ post.type, post.id ] );
+		}, [ post.type, post.id, setEditedPost ] );
 
 		// Synchronize the editor settings as they change.
 		useEffect( () => {

package/src/components/provider/use-block-editor-settings.js

@@ -51,7 +51,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'fontSizes',
 	'gradients',
 	'generateAnchors',
-	'getPostLinkProps',
+	'onNavigateToEntityRecord',
 	'hasInlineToolbar',
 	'imageDefaultSize',
 	'imageDimensions',