@wordpress/editor 14.9.0 → 14.11.0

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
 		);
@@ -411,6 +411,7 @@ export function HierarchicalTermSelector( { slug } ) {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }
+					placeholder={ filterLabel }
 					value={ filterValue }
 					onChange={ setFilter }
 				/>

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

@@ -177,8 +177,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => {
 							onNavigateToEntityRecord( {

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

@@ -17,7 +17,7 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -70,25 +70,29 @@ export default function PostURL( { onClose } ) {
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
 	const copyButtonRef = useCopyToClipboard( permalink, () => {
-		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+		createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
 	} );
+	const postUrlSlugDescriptionId =
+		'editor-post-url__slug-description-' + useInstanceId( PostURL );
+
 	return (
 		<div className="editor-post-url">
 			<InspectorPopoverHeader
-				title={ __( 'Link' ) }
+				title={ __( 'Slug' ) }
 				onClose={ onClose }
 			/>
 			<VStack spacing={ 3 }>
 				{ isEditable && (
-					<div>
+					<p className="editor-post-url__intro">
 						{ createInterpolateElement(
 							__(
-								'Customize the last part of the URL. <a>Learn more.</a>'
+								'<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'
 							),
 							{
+								span: <span id={ postUrlSlugDescriptionId } />,
 								a: (
 									<ExternalLink
 										href={ __(
@@ -98,59 +102,67 @@ export default function PostURL( { onClose } ) {
 								),
 							}
 						) }
-					</div>
+					</p>
 				) }
 				<div>
 					{ isEditable && (
-						<InputControl
-							__next40pxDefaultSize
-							prefix={
-								<InputControlPrefixWrapper>
-									/
-								</InputControlPrefixWrapper>
-							}
-							suffix={
-								<InputControlSuffixWrapper variant="control">
-									<Button
-										icon={ copySmall }
-										ref={ copyButtonRef }
-										size="small"
-										label="Copy"
-									/>
-								</InputControlSuffixWrapper>
-							}
-							label={ __( 'Link' ) }
-							hideLabelFromVision
-							value={ forceEmptyField ? '' : postSlug }
-							autoComplete="off"
-							spellCheck="false"
-							type="text"
-							className="editor-post-url__input"
-							onChange={ ( newValue ) => {
-								editPost( { slug: newValue } );
-								// When we delete the field the permalink gets
-								// reverted to the original value.
-								// The forceEmptyField logic allows the user to have
-								// the field temporarily empty while typing.
-								if ( ! newValue ) {
-									if ( ! forceEmptyField ) {
-										setForceEmptyField( true );
-									}
-									return;
+						<>
+							<InputControl
+								__next40pxDefaultSize
+								prefix={
+									<InputControlPrefixWrapper>
+										/
+									</InputControlPrefixWrapper>
 								}
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											icon={ copySmall }
+											ref={ copyButtonRef }
+											size="small"
+											label="Copy"
+										/>
+									</InputControlSuffixWrapper>
 								}
-							} }
-							onBlur={ ( event ) => {
-								editPost( {
-									slug: cleanForSlug( event.target.value ),
-								} );
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
-								}
-							} }
-							help={
+								label={ __( 'Slug' ) }
+								hideLabelFromVision
+								value={ forceEmptyField ? '' : postSlug }
+								autoComplete="off"
+								spellCheck="false"
+								type="text"
+								className="editor-post-url__input"
+								onChange={ ( newValue ) => {
+									editPost( { slug: newValue } );
+									// When we delete the field the permalink gets
+									// reverted to the original value.
+									// The forceEmptyField logic allows the user to have
+									// the field temporarily empty while typing.
+									if ( ! newValue ) {
+										if ( ! forceEmptyField ) {
+											setForceEmptyField( true );
+										}
+										return;
+									}
+									if ( forceEmptyField ) {
+										setForceEmptyField( false );
+									}
+								} }
+								onBlur={ ( event ) => {
+									editPost( {
+										slug: cleanForSlug(
+											event.target.value
+										),
+									} );
+									if ( forceEmptyField ) {
+										setForceEmptyField( false );
+									}
+								} }
+								aria-describedby={ postUrlSlugDescriptionId }
+							/>
+							<p className="editor-post-url__permalink">
+								<span className="editor-post-url__permalink-visual-label">
+									{ __( 'Permalink:' ) }
+								</span>
 								<ExternalLink
 									className="editor-post-url__link"
 									href={ postLink }
@@ -166,8 +178,8 @@ export default function PostURL( { onClose } ) {
 										{ permalinkSuffix }
 									</span>
 								</ExternalLink>
-							}
-						/>
+							</p>
+						</>
 					) }
 					{ ! isEditable && (
 						<ExternalLink

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

@@ -3,11 +3,7 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { Dropdown, Button, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -26,6 +22,20 @@ import { store as editorStore } from '../../store';
  * @return {JSX.Element} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
+	const { isFrontPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const _id = getCurrentPostId();
+		return {
+			isFrontPage: siteSettings?.page_on_front === _id,
+		};
+	}, [] );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -42,41 +52,38 @@ export default function PostURLPanel() {
 		[ popoverAnchor ]
 	);
 
+	const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
-				<Dropdown
-					popoverProps={ popoverProps }
-					className="editor-post-url__panel-dropdown"
-					contentClassName="editor-post-url__panel-dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostURL onClose={ onClose } />
-					) }
-				/>
+			<PostPanelRow label={ label } ref={ setPopoverAnchor }>
+				{ ! isFrontPage && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="editor-post-url__panel-dropdown"
+						contentClassName="editor-post-url__panel-dialog"
+						focusOnMount
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<PostURLToggle
+								isOpen={ isOpen }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ ( { onClose } ) => (
+							<PostURL onClose={ onClose } />
+						) }
+					/>
+				) }
+				{ isFrontPage && <FrontPageLink /> }
 			</PostPanelRow>
 		</PostURLCheck>
 	);
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
-		const { getCurrentPostId, getCurrentPost } = select( editorStore );
-		const { getEditedEntityRecord, canUser } = select( coreStore );
-		const siteSettings = canUser( 'read', {
-			kind: 'root',
-			name: 'site',
-		} )
-			? getEditedEntityRecord( 'root', 'site' )
-			: undefined;
-		const _id = getCurrentPostId();
+	const { slug } = useSelect( ( select ) => {
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),
-			isFrontPage: siteSettings?.page_on_front === _id,
-			postLink: getCurrentPost()?.link,
 		};
 	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
@@ -86,13 +93,32 @@ 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 }
 		>
-			<Truncate numberOfLines={ 1 }>
-				{ isFrontPage ? postLink : `/${ decodedSlug }` }
-			</Truncate>
+			<>{ decodedSlug }</>
 		</Button>
 	);
 }
+
+function FrontPageLink() {
+	const { postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		return {
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
+
+	return (
+		<ExternalLink
+			className="editor-post-url__front-page-link"
+			href={ postLink }
+			target="_blank"
+		>
+			{ postLink }
+		</ExternalLink>
+	);
+}

package/src/components/post-url/style.scss

@@ -9,14 +9,19 @@
 }
 
 /* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
 	direction: ltr;
 	word-break: break-word;
-	margin-top: $grid-unit-05;
-	color: $gray-700;
 }
 /* rtl:end:ignore */
 
+.editor-post-url__front-page-link {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
@@ -30,3 +35,16 @@
 .editor-post-url__panel-toggle {
 	word-break: break-word;
 }
+
+.editor-post-url__intro {
+	margin: 0;
+}
+
+.editor-post-url__permalink {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+
+	&-visual-label {
+		display: block;
+	}
+}

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 ];
@@ -222,9 +229,10 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			shouldRenderTemplate,
 			post.id,
 			post.type,
+			post.slug,
 			rootLevelPost.type,
 			rootLevelPost.slug,
-			postTypes,
+			postTypeEntities,
 		] );
 		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
@@ -322,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

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -61,7 +61,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			) {
 				return;
 			}
-			setIsDialogOpen( true );
+
+			if ( ! event.defaultPrevented ) {
+				event.preventDefault();
+				setIsDialogOpen( true );
+			}
 		};
 
 		const canvas = contentRef.current;