@wordpress/editor 14.10.0 → 14.11.0

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -22,27 +18,20 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 export default function PostCardPanel( {
 	postType,
 	postId,
 	onActionPerformed,
 } ) {
-	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
+	const { title, icon } = useSelect(
 		( select ) => {
 			const { __experimentalGetTemplateInfo } = select( editorStore );
-			const { canUser, getEditedEntityRecord } = select( coreStore );
-			const siteSettings = canUser( 'read', {
-				kind: 'root',
-				name: 'site',
-			} )
-				? getEditedEntityRecord( 'root', 'site' )
-				: undefined;
+			const { getEditedEntityRecord } = select( coreStore );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -52,31 +41,18 @@ export default function PostCardPanel( {
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 					postType
 				) && __experimentalGetTemplateInfo( _record );
-			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
-				if ( PATTERN_POST_TYPE === postType ) {
-					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
-					const currentSyncStatus =
-						_record?.meta?.wp_pattern_sync_status === 'unsynced'
-							? 'unsynced'
-							: _record?.wp_pattern_sync_status;
-					_isSync = currentSyncStatus !== 'unsynced';
-				} else {
-					_isSync = true;
-				}
-			}
 			return {
 				title: _templateInfo?.title || _record?.title,
 				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
-				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === postId,
-				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
 		[ postId, postType ]
 	);
+
+	const pageTypeBadge = usePageTypeBadge();
+
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -84,12 +60,7 @@ export default function PostCardPanel( {
 				className="editor-post-card-panel__header"
 				align="flex-start"
 			>
-				<Icon
-					className={ clsx( 'editor-post-card-panel__icon', {
-						'is-sync': isSync,
-					} ) }
-					icon={ icon }
-				/>
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
 				<Text
 					numberOfLines={ 2 }
 					truncate
@@ -99,14 +70,9 @@ export default function PostCardPanel( {
 					lineHeight="20px"
 				>
 					{ title ? decodeEntities( title ) : __( 'No title' ) }
-					{ isFrontPage && (
-						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Homepage' ) }
-						</span>
-					) }
-					{ isPostsPage && (
+					{ pageTypeBadge && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Posts Page' ) }
+							{ pageTypeBadge }
 						</span>
 					) }
 				</Text>

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

@@ -34,17 +34,9 @@
 	}
 }
 
-.editor-post-card-panel__icon.is-sync {
-	fill: var(--wp-block-synced-color);
-
-	& + .editor-post-card-panel__title {
-		color: var(--wp-block-synced-color);
-	}
-}
-
 .editor-post-card-panel__title-badge {
 	background: $gray-100;
-	color: $gray-700;
+	color: $gray-800;
 	padding: 0 $grid-unit-05;
 	border-radius: $radius-small;
 	font-size: 12px;

package/src/components/post-content-information/index.js

@@ -70,7 +70,7 @@ export default function PostContentInformation() {
 		readingTime <= 1
 			? __( '1 minute' )
 			: sprintf(
-					// translators: %s: the number of minutes to read the post.
+					/* translators: %s: the number of minutes to read the post. */
 					_n( '%s minute', '%s minutes', readingTime ),
 					readingTime.toLocaleString()
 			  );

package/src/components/post-featured-image/index.js

@@ -121,6 +121,35 @@ function PostFeaturedImage( {
 		} );
 	}
 
+	/**
+	 * Generates the featured image alt text for this editing context.
+	 *
+	 * @param {Object} imageMedia                               The image media object.
+	 * @param {string} imageMedia.alt_text                      The alternative text of the image.
+	 * @param {Object} imageMedia.media_details                 The media details of the image.
+	 * @param {Object} imageMedia.media_details.sizes           The sizes of the image.
+	 * @param {Object} imageMedia.media_details.sizes.full      The full size details of the image.
+	 * @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
+	 * @param {string} imageMedia.slug                          The slug of the image.
+	 * @return {string} The featured image alt text.
+	 */
+	function getImageDescription( imageMedia ) {
+		if ( imageMedia.alt_text ) {
+			return sprintf(
+				// Translators: %s: The selected image alt text.
+				__( 'Current image: %s' ),
+				imageMedia.alt_text
+			);
+		}
+		return sprintf(
+			// Translators: %s: The selected image filename.
+			__(
+				'The current image has no alternative text. The file name is: %s'
+			),
+			imageMedia.media_details.sizes?.full?.file || imageMedia.slug
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -130,21 +159,7 @@ function PostFeaturedImage( {
 						id={ `editor-post-featured-image-${ featuredImageId }-describedby` }
 						className="hidden"
 					>
-						{ media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image alt text.
-								__( 'Current image: %s' ),
-								media.alt_text
-							) }
-						{ ! media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image filename.
-								__(
-									'The current image has no alternative text. The file name is: %s'
-								),
-								media.media_details.sizes?.full?.file ||
-									media.slug
-							) }
+						{ getImageDescription( media ) }
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
@@ -188,7 +203,7 @@ function PostFeaturedImage( {
 										<img
 											className="editor-post-featured-image__preview-image"
 											src={ mediaSourceUrl }
-											alt=""
+											alt={ getImageDescription( media ) }
 										/>
 									) }
 									{ isLoading && <Spinner /> }

package/src/components/post-featured-image/style.scss

@@ -41,8 +41,6 @@
 .editor-post-featured-image__preview {
 	width: 100%;
 	padding: 0;
-	transition: all 0.1s ease-out;
-	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
 	outline-offset: -#{$border-width};
@@ -66,6 +64,11 @@
 
 .editor-post-featured-image__toggle {
 	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
 }
 
 .editor-post-featured-image__actions {

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

@@ -44,7 +44,7 @@ function PostLastRevision() {
 				icon={ backup }
 				iconPosition="right"
 				text={ sprintf(
-					/* translators: %s: number of revisions */
+					/* translators: %s: number of revisions. */
 					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }

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

@@ -48,7 +48,7 @@ export function getFullPostScheduleLabel( dateAttribute ) {
 
 	const timezoneAbbreviation = getTimezoneAbbreviation();
 	const formattedDate = dateI18n(
-		// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
+		// 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
 	);

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

@@ -35,23 +35,23 @@ function setupUseSelectMock( { hasStickyAction, postType } ) {
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
 		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
-		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
+		expect( screen.getByText( 'Can Show Sticky' ) ).toBeVisible();
 	} );
 } );

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

@@ -2,8 +2,12 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, withFilters } from '@wordpress/components';
+import { Fragment, useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	FormTokenField,
+	withFilters,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
@@ -288,8 +292,15 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 		singularName
 	);
 
+	const Wrapper = ( { children } ) =>
+		__nextHasNoMarginBottom ? (
+			<VStack spacing={ 4 }>{ children }</VStack>
+		) : (
+			<Fragment>{ children }</Fragment>
+		);
+
 	return (
-		<>
+		<Wrapper>
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }
@@ -306,7 +317,7 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</>
+		</Wrapper>
 	);
 }
 

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

@@ -310,7 +310,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		const defaultName =
 			slug === 'category' ? __( 'Category' ) : __( 'Term' );
 		const termAddedMessage = sprintf(
-			/* translators: %s: taxonomy name */
+			/* translators: %s: term name. */
 			_x( '%s added', 'term' ),
 			taxonomy?.labels?.singular_name ?? defaultName
 		);
@@ -341,7 +341,7 @@ export function HierarchicalTermSelector( { slug } ) {
 
 		const resultCount = getResultCount( newFilteredTermsTree );
 		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results */
+			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', resultCount ),
 			resultCount
 		);

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

@@ -76,7 +76,7 @@ export default function PostURL( { onClose } ) {
 		} );
 	} );
 	const postUrlSlugDescriptionId =
-		'editor-post-url__slug-descriotion-' + useInstanceId( PostURL );
+		'editor-post-url__slug-description-' + useInstanceId( PostURL );
 
 	return (
 		<div className="editor-post-url">

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

@@ -93,8 +93,10 @@ function PostURLToggle( { isOpen, onClick } ) {
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
+			aria-label={
+				// translators: %s: Current post link.
+				sprintf( __( 'Change link: %s' ), decodedSlug )
+			}
 			onClick={ onClick }
 		>
 			<>{ decodedSlug }</>

package/src/components/preview-dropdown/index.js

@@ -46,12 +46,10 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
 		setDeviceType( newDeviceType );
-		__unstableSetEditorMode( 'edit' );
 		resetZoomLevel();
 	};
 

package/src/components/provider/index.js

@@ -164,40 +164,47 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
-		const { editorSettings, selection, isReady, mode, postTypes } =
-			useSelect( ( select ) => {
-				const {
-					getEditorSettings,
-					getEditorSelection,
-					getRenderingMode,
-					__unstableIsEditorReady,
-				} = select( editorStore );
-				const { getPostTypes } = select( coreStore );
+		const { editorSettings, selection, isReady, mode, postTypeEntities } =
+			useSelect(
+				( select ) => {
+					const {
+						getEditorSettings,
+						getEditorSelection,
+						getRenderingMode,
+						__unstableIsEditorReady,
+					} = select( editorStore );
+					const { getEntitiesConfig } = select( coreStore );
 
-				return {
-					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady(),
-					mode: getRenderingMode(),
-					selection: getEditorSelection(),
-					postTypes: getPostTypes( { per_page: -1 } ),
-				};
-			}, [] );
+					return {
+						editorSettings: getEditorSettings(),
+						isReady: __unstableIsEditorReady(),
+						mode: getRenderingMode(),
+						selection: getEditorSelection(),
+						postTypeEntities:
+							post.type === 'wp_template'
+								? getEntitiesConfig( 'postType' )
+								: null,
+					};
+				},
+				[ post.type ]
+			);
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
-			// If it is a template, try to inherit the post type from the slug.
+			// If it is a template, try to inherit the post type from the name.
 			if ( post.type === 'wp_template' ) {
 				if ( post.slug === 'page' ) {
 					postContext.postType = 'page';
 				} else if ( post.slug === 'single' ) {
 					postContext.postType = 'post';
 				} else if ( post.slug.split( '-' )[ 0 ] === 'single' ) {
-					// If the slug is single-{postType}, infer the post type from the slug.
-					const postTypesSlugs =
-						postTypes?.map( ( entity ) => entity.slug ) || [];
+					// If the slug is single-{postType}, infer the post type from the name.
+					const postTypeNames =
+						postTypeEntities?.map( ( entity ) => entity.name ) ||
+						[];
 					const match = post.slug.match(
-						`^single-(${ postTypesSlugs.join( '|' ) })(?:-.+)?$`
+						`^single-(${ postTypeNames.join( '|' ) })(?:-.+)?$`
 					);
 					if ( match ) {
 						postContext.postType = match[ 1 ];
@@ -225,7 +232,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			post.slug,
 			rootLevelPost.type,
 			rootLevelPost.slug,
-			postTypes,
+			postTypeEntities,
 		] );
 		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
@@ -323,7 +330,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							useSubRegistry={ false }
 						>
 							{ children }
-							{ ! settings.__unstableIsPreviewMode && (
+							{ ! settings.isPreviewMode && (
 								<>
 									<PatternsMenuItems />
 									<TemplatePartMenuItems />

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

@@ -74,6 +74,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'imageDimensions',
 	'imageEditing',
 	'imageSizes',
+	'isPreviewMode',
 	'isRTL',
 	'locale',
 	'maxWidth',
@@ -85,7 +86,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'supportsLayout',
 	'widgetTypesToHideFromLegacyWidgetBlock',
 	'__unstableHasCustomAppender',
-	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
 ];

package/src/components/sidebar/header.js

@@ -20,8 +20,9 @@ const SidebarHeader = ( _, ref ) => {
 		const { getPostTypeLabel } = select( editorStore );
 
 		return {
-			// translators: Default label for the Document sidebar tab, not selected.
-			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
+			documentLabel:
+				// translators: Default label for the Document sidebar tab, not selected.
+				getPostTypeLabel() || _x( 'Document', 'noun, sidebar' ),
 		};
 	}, [] );
 

package/src/components/sidebar/index.js

@@ -13,7 +13,7 @@ import {
 	useEffect,
 	useRef,
 } from '@wordpress/element';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, _x } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
@@ -101,8 +101,10 @@ const SidebarContent = ( {
 			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
 			className="editor-sidebar__panel"
 			headerClassName="editor-sidebar__panel-tabs"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
+			title={
+				/* translators: button label text should, if possible, be under 16 characters. */
+				_x( 'Settings', 'sidebar button label' )
+			}
 			toggleShortcut={ keyboardShortcut }
 			icon={ isRTL() ? drawerLeft : drawerRight }
 			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }

package/src/components/time-to-read/index.js

@@ -47,10 +47,10 @@ export default function TimeToRead() {
 			  } )
 			: createInterpolateElement(
 					sprintf(
-						/* translators: %s is the number of minutes the post will take to read. */
+						/* translators: %s: the number of minutes to read the post. */
 						_n(
-							'<span>%d</span> minute',
-							'<span>%d</span> minutes',
+							'<span>%s</span> minute',
+							'<span>%s</span> minutes',
 							minutesToRead
 						),
 						minutesToRead