@wordpress/editor 13.27.2 → 13.28.0

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

@@ -27,27 +27,17 @@ import { store as editorStore } from '../../store';
  *                                                                  editor iframe canvas.
  */
 export default function EditTemplateBlocksNotification( { contentRef } ) {
-	const { renderingMode, getPostLinkProps, templateId } = useSelect(
-		( select ) => {
-			const {
-				getRenderingMode,
-				getEditorSettings,
-				getCurrentTemplateId,
-			} = select( editorStore );
-			return {
-				renderingMode: getRenderingMode(),
-				getPostLinkProps: getEditorSettings().getPostLinkProps,
-				templateId: getCurrentTemplateId(),
-			};
-		},
-		[]
-	);
-	const editTemplate = getPostLinkProps
-		? getPostLinkProps( {
-				postId: templateId,
-				postType: 'wp_template',
-		  } )
-		: {};
+	const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentTemplateId } =
+			select( editorStore );
+
+		return {
+			onNavigateToEntityRecord:
+				getEditorSettings().onNavigateToEntityRecord,
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+
 	const { getNotices } = useSelect( noticesStore );
 
 	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
@@ -58,18 +48,17 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 
 	useEffect( () => {
 		const handleClick = async ( event ) => {
-			if ( renderingMode !== 'template-locked' ) {
-				return;
-			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
+
 			const isNoticeAlreadyShowing = getNotices().some(
 				( notice ) => notice.id === lastNoticeId.current
 			);
 			if ( isNoticeAlreadyShowing ) {
 				return;
 			}
+
 			const { notice } = await createInfoNotice(
 				__( 'Edit your template to edit this block.' ),
 				{
@@ -78,7 +67,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 					actions: [
 						{
 							label: __( 'Edit template' ),
-							onClick: () => editTemplate.onClick(),
+							onClick: () =>
+								onNavigateToEntityRecord( {
+									postId: templateId,
+									postType: 'wp_template',
+								} ),
 						},
 					],
 				}
@@ -87,9 +80,6 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 
 		const handleDblClick = ( event ) => {
-			if ( renderingMode !== 'template-locked' ) {
-				return;
-			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
@@ -106,7 +96,15 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ lastNoticeId, renderingMode, contentRef.current ] );
+	}, [
+		lastNoticeId,
+		contentRef,
+		getNotices,
+		createInfoNotice,
+		onNavigateToEntityRecord,
+		templateId,
+		removeNotice,
+	] );
 
 	return (
 		<ConfirmDialog
@@ -114,7 +112,10 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			confirmButtonText={ __( 'Edit template' ) }
 			onConfirm={ () => {
 				setIsDialogOpen( false );
-				editTemplate.onClick();
+				onNavigateToEntityRecord( {
+					postId: templateId,
+					postType: 'wp_template',
+				} );
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>

package/src/components/editor-canvas/index.js

@@ -35,6 +35,7 @@ const {
 	useLayoutClasses,
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
+	useFlashEditableBlocks,
 } = unlock( blockEditorPrivateApis );
 
 const noop = () => {};
@@ -138,7 +139,8 @@ function EditorCanvas( {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			showEditorPadding: !! editorSettings.goBack,
+			showEditorPadding:
+				!! editorSettings.onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -290,6 +292,9 @@ function EditorCanvas( {
 	const contentRef = useMergeRefs( [
 		localRef,
 		renderingMode === 'post-only' ? typewriterRef : noop,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (
@@ -364,8 +369,7 @@ function EditorCanvas( {
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only'
 							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
-						renderingMode !== 'all' && 'is-' + renderingMode
+							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 					) }
 					layout={ blockListLayout }
 					dropZoneElement={
@@ -376,8 +380,14 @@ function EditorCanvas( {
 							: localRef.current?.parentNode
 					}
 					renderAppender={ renderAppender }
+					__unstableDisableDropZone={
+						// In template preview mode, disable drop zones at the root of the template.
+						renderingMode === 'template-locked' ? true : false
+					}
 				/>
-				<EditTemplateBlocksNotification contentRef={ localRef } />
+				{ renderingMode === 'template-locked' && (
+					<EditTemplateBlocksNotification contentRef={ localRef } />
+				) }
 			</RecursionProvider>
 			{ children }
 		</BlockCanvas>

package/src/components/editor-snackbars/index.js

@@ -5,15 +5,18 @@ import { SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = notices.filter(
-		( { type } ) => type === 'snackbar'
-	);
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<SnackbarList

package/src/components/entities-saved-states/entity-record-item.js

@@ -39,10 +39,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={
-					<strong>
-						{ decodeEntities( entityRecordTitle ) ||
-							__( 'Untitled' ) }
-					</strong>
+					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
 				}
 				checked={ checked }
 				onChange={ onChange }

package/src/components/entities-saved-states/entity-type-list.js

@@ -30,7 +30,7 @@ function getEntityDescription( entity, count ) {
 			);
 		case 'page':
 		case 'post':
-			return __( 'The following content has been modified.' );
+			return __( 'The following has been modified.' );
 	}
 }
 
@@ -55,18 +55,15 @@ function GlobalStylesDescription( { record } ) {
 		}
 	);
 	return globalStylesChanges.length ? (
-		<>
-			<h3 className="entities-saved-states__description-heading">
-				{ __( 'Changes made to:' ) }
-			</h3>
-			<PanelRow>{ globalStylesChanges.join( ', ' ) }</PanelRow>
-		</>
+		<PanelRow className="entities-saved-states__change-summary">
+			{ globalStylesChanges.join( ', ' ) }.
+		</PanelRow>
 	) : null;
 }
 
 function EntityDescription( { record, count } ) {
 	if ( 'globalStyles' === record?.name ) {
-		return <GlobalStylesDescription record={ record } />;
+		return null;
 	}
 	const description = getEntityDescription( record?.name, count );
 	return description ? <PanelRow>{ description }</PanelRow> : null;
@@ -117,6 +114,9 @@ export default function EntityTypeList( {
 					/>
 				);
 			} ) }
+			{ 'globalStyles' === firstRecord?.name && (
+				<GlobalStylesDescription record={ firstRecord } />
+			) }
 		</PanelBody>
 	);
 }

package/src/components/entities-saved-states/index.js

@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useRef,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
@@ -215,8 +219,17 @@ export function EntitiesSavedStatesExtensible( {
 				{ additionalPrompt }
 				<p>
 					{ isDirty
-						? __(
-								'The following changes have been made to your site, templates, and content.'
+						? createInterpolateElement(
+								sprintf(
+									/* translators: %d: number of site changes waiting to be saved. */
+									_n(
+										'There is <strong>%d site change</strong> waiting to be saved.',
+										'There are <strong>%d site changes</strong> waiting to be saved.',
+										sortedPartitionedSavables.length
+									),
+									sortedPartitionedSavables.length
+								),
+								{ strong: <strong /> }
 						  )
 						: __( 'Select the items you want to save.' ) }
 				</p>

package/src/components/entities-saved-states/style.scss

@@ -19,3 +19,8 @@
 .entities-saved-states__description-heading {
 	font-size: $default-font-size;
 }
+
+.entities-saved-states__change-summary {
+	color: $gray-700;
+	font-size: $helptext-font-size;
+}

package/src/components/list-view-sidebar/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button, TabPanel } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
@@ -19,6 +22,8 @@ import ListViewOutline from './list-view-outline';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
+const { Tabs } = unlock( componentsPrivateApis );
+
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
 	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
@@ -51,7 +56,7 @@ export default function ListViewSidebar() {
 	// This ref refers to the sidebar as a whole.
 	const sidebarRef = useRef();
 	// This ref refers to the tab panel.
-	const tabPanelRef = useRef();
+	const tabsRef = useRef();
 	// This ref refers to the list view application area.
 	const listViewRef = useRef();
 
@@ -71,7 +76,7 @@ export default function ListViewSidebar() {
 	 */
 	function handleSidebarFocus( currentTab ) {
 		// Tab panel focus.
-		const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
+		const tabPanelFocus = focus.tabbable.find( tabsRef.current )[ 0 ];
 		// List view tab is selected.
 		if ( currentTab === 'list-view' ) {
 			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
@@ -108,22 +113,6 @@ export default function ListViewSidebar() {
 	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
 	useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );
 
-	/**
-	 * Render tab content for a given tab name.
-	 *
-	 * @param {string} tabName The name of the tab to render.
-	 */
-	function renderTabContent( tabName ) {
-		if ( tabName === 'list-view' ) {
-			return (
-				<div className="editor-list-view-sidebar__list-view-panel-content">
-					<ListView dropZoneElement={ dropZoneElement } />
-				</div>
-			);
-		}
-		return <ListViewOutline />;
-	}
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -131,39 +120,63 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<Button
-				className="editor-list-view-sidebar__close-button"
-				icon={ closeSmall }
-				label={ __( 'Close' ) }
-				onClick={ closeListView }
-			/>
-			<TabPanel
-				className="editor-list-view-sidebar__tab-panel"
-				ref={ tabPanelRef }
+			<Tabs
 				onSelect={ ( tabName ) => setTab( tabName ) }
 				selectOnMove={ false }
-				tabs={ [
-					{
-						name: 'list-view',
-						title: _x( 'List View', 'Post overview' ),
-						className: 'editor-list-view-sidebar__panel-tab',
-					},
-					{
-						name: 'outline',
-						title: _x( 'Outline', 'Post overview' ),
-						className: 'editor-list-view-sidebar__panel-tab',
-					},
-				] }
+				// The initial tab value is set explicitly to avoid an initial
+				// render where no tab is selected. This ensures that the
+				// tabpanel height is correct so the relevant scroll container
+				// can be rendered internally.
+				initialTabId="list-view"
 			>
-				{ ( currentTab ) => (
-					<div
-						className="editor-list-view-sidebar__list-view-container"
-						ref={ listViewContainerRef }
+				<div className="edit-post-editor__document-overview-panel__header">
+					<Button
+						className="editor-list-view-sidebar__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close' ) }
+						onClick={ closeListView }
+					/>
+					<Tabs.TabList
+						className="editor-list-view-sidebar__tabs-tablist"
+						ref={ tabsRef }
 					>
-						{ renderTabContent( currentTab.name ) }
+						<Tabs.Tab
+							className="editor-list-view-sidebar__tabs-tab"
+							tabId="list-view"
+						>
+							{ _x( 'List View', 'Post overview' ) }
+						</Tabs.Tab>
+						<Tabs.Tab
+							className="editor-list-view-sidebar__tabs-tab"
+							tabId="outline"
+						>
+							{ _x( 'Outline', 'Post overview' ) }
+						</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+
+				<Tabs.TabPanel
+					ref={ listViewContainerRef }
+					className="editor-list-view-sidebar__tabs-tabpanel"
+					tabId="list-view"
+					focusable={ false }
+				>
+					<div className="editor-list-view-sidebar__list-view-container">
+						<div className="editor-list-view-sidebar__list-view-panel-content">
+							<ListView dropZoneElement={ dropZoneElement } />
+						</div>
+					</div>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel
+					className="editor-list-view-sidebar__tabs-tabpanel"
+					tabId="outline"
+					focusable={ false }
+				>
+					<div className="editor-list-view-sidebar__list-view-container">
+						<ListViewOutline />
 					</div>
-				) }
-			</TabPanel>
+				</Tabs.TabPanel>
+			</Tabs>
 		</div>
 	);
 }

package/src/components/list-view-sidebar/style.scss

@@ -8,32 +8,31 @@
 		// @see packages/block-editor/src/components/inserter/style.scss
 		width: 350px;
 	}
-
+	.edit-post-editor__document-overview-panel__header {
+		display: flex;
+		border-bottom: $border-width solid $gray-300;
+	}
 	.editor-list-view-sidebar__close-button {
-		position: absolute;
-		right: $grid-unit-10;
-		top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-		z-index: 1;
 		background: $white;
+		order: 1;
+		align-self: center;
+		margin-right: $grid-unit-10;
 	}
+}
 
-	// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
-	.components-tab-panel__tabs {
-		border-bottom: $border-width solid $gray-300;
-		box-sizing: border-box;
-		display: flex;
-		width: 100%;
-		padding-right: $grid-unit-70;
+.editor-list-view-sidebar__tabs-tablist {
+	box-sizing: border-box;
+	flex-grow: 1;
 
-		.editor-list-view-sidebar__panel-tab {
-			width: 50%;
-			margin-bottom: -$border-width;
-		}
-	}
+}
 
-	.components-tab-panel__tab-content {
-		height: calc(100% - #{$grid-unit-60 - $border-width});
-	}
+.editor-list-view-sidebar__tabs-tab {
+	width: 50%;
+	margin-bottom: -$border-width;
+}
+
+.editor-list-view-sidebar__tabs-tabpanel {
+	height: calc(100% - #{$grid-unit-60 - $border-width});
 }
 
 .editor-list-view-sidebar__list-view-panel-content,
@@ -82,3 +81,4 @@
 		color: $gray-700;
 	}
 }
+

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

@@ -2,71 +2,22 @@
  * WordPress dependencies
  */
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-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 PostAuthorCombobox() {
+export default function PostAuthorCombobox() {
 	const [ fieldValue, setFieldValue ] = useState();
 
-	const { authorId, isLoading, authors, postAuthor } = useSelect(
-		( select ) => {
-			const { getUser, getUsers, isResolving } = select( coreStore );
-			const { getEditedPostAttribute } = select( editorStore );
-			const author = getUser( getEditedPostAttribute( 'author' ), {
-				context: 'view',
-			} );
-			const query = { ...AUTHORS_QUERY };
-
-			if ( fieldValue ) {
-				query.search = fieldValue;
-			}
-
-			return {
-				authorId: getEditedPostAttribute( 'author' ),
-				postAuthor: author,
-				authors: getUsers( query ),
-				isLoading: isResolving( 'core', 'getUsers', [ query ] ),
-			};
-		},
-		[ fieldValue ]
-	);
 	const { editPost } = useDispatch( editorStore );
-
-	const authorOptions = useMemo( () => {
-		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-
-		// Ensure the current author is included in the dropdown list.
-		const foundAuthor = fetchedAuthors.findIndex(
-			( { value } ) => postAuthor?.id === value
-		);
-
-		if ( foundAuthor < 0 && postAuthor ) {
-			return [
-				{
-					value: postAuthor.id,
-					label: decodeEntities( postAuthor.name ),
-				},
-				...fetchedAuthors,
-			];
-		}
-
-		return fetchedAuthors;
-	}, [ authors, postAuthor ] );
+	const { authorId, authorOptions } = useAuthorsQuery( fieldValue );
 
 	/**
 	 * Handle author selection.
@@ -89,10 +40,6 @@ function PostAuthorCombobox() {
 		setFieldValue( inputValue );
 	};
 
-	if ( ! postAuthor ) {
-		return null;
-	}
-
 	return (
 		<ComboboxControl
 			__nextHasNoMarginBottom
@@ -102,10 +49,7 @@ function PostAuthorCombobox() {
 			value={ authorId }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
-			isLoading={ isLoading }
 			allowReset={ false }
 		/>
 	);
 }
-
-export default PostAuthorCombobox;

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

@@ -1,6 +1,10 @@
+export const BASE_QUERY = {
+	_fields: 'id,name',
+	context: 'view', // Allows non-admins to perform requests.
+};
+
 export const AUTHORS_QUERY = {
 	who: 'authors',
 	per_page: 50,
-	_fields: 'id,name',
-	context: 'view', // Allows non-admins to perform requests.
+	...BASE_QUERY,
 };

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { AUTHORS_QUERY, BASE_QUERY } from './constants';
+
+export function useAuthorsQuery( search ) {
+	const { authorId, authors, postAuthor } = useSelect(
+		( select ) => {
+			const { getUser, getUsers } = select( coreStore );
+			const { getEditedPostAttribute } = select( editorStore );
+			const _authorId = getEditedPostAttribute( 'author' );
+			const query = { ...AUTHORS_QUERY };
+
+			if ( search ) {
+				query.search = search;
+			}
+
+			return {
+				authorId: _authorId,
+				authors: getUsers( query ),
+				postAuthor: getUser( _authorId, BASE_QUERY ),
+			};
+		},
+		[ search ]
+	);
+
+	const authorOptions = useMemo( () => {
+		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+
+		// Ensure the current author is included in the dropdown list.
+		const foundAuthor = fetchedAuthors.findIndex(
+			( { value } ) => postAuthor?.id === value
+		);
+
+		if ( foundAuthor < 0 && postAuthor ) {
+			return [
+				{
+					value: postAuthor.id,
+					label: decodeEntities( postAuthor.name ),
+				},
+				...fetchedAuthors,
+			];
+		}
+
+		return fetchedAuthors;
+	}, [ authors, postAuthor ] );
+
+	return { authorId, authorOptions };
+}