@wordpress/editor 13.27.2 → 13.28.1

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

@@ -35,10 +35,22 @@ const {
 	useLayoutClasses,
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
+	useFlashEditableBlocks,
 } = unlock( blockEditorPrivateApis );
 
 const noop = () => {};
 
+/**
+ * These post types have a special editor where they don't allow you to fill the title
+ * and they don't apply the layout styles.
+ */
+const DESIGN_POST_TYPES = [
+	'wp_block',
+	'wp_template',
+	'wp_navigation',
+	'wp_template_part',
+];
+
 /**
  * Given an array of nested blocks, find the first Post Content
  * block inside it, recursing through any nesting levels,
@@ -92,6 +104,7 @@ function EditorCanvas( {
 		wrapperUniqueId,
 		deviceType,
 		showEditorPadding,
+		isDesignPostType,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -109,7 +122,7 @@ function EditorCanvas( {
 
 		if ( postTypeSlug === 'wp_block' ) {
 			_wrapperBlockName = 'core/block';
-		} else if ( ! _renderingMode === 'post-only' ) {
+		} else if ( _renderingMode === 'post-only' ) {
 			_wrapperBlockName = 'core/post-content';
 		}
 
@@ -129,6 +142,7 @@ function EditorCanvas( {
 		return {
 			renderingMode: _renderingMode,
 			postContentAttributes: editorSettings.postContentAttributes,
+			isDesignPostType: DESIGN_POST_TYPES.includes( postTypeSlug ),
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
@@ -138,7 +152,8 @@ function EditorCanvas( {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			showEditorPadding: !! editorSettings.goBack,
+			showEditorPadding:
+				!! editorSettings.onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -162,7 +177,7 @@ function EditorCanvas( {
 	// fallbackLayout is used if there is no Post Content,
 	// and for Post Title.
 	const fallbackLayout = useMemo( () => {
-		if ( renderingMode !== 'post-only' ) {
+		if ( renderingMode !== 'post-only' || isDesignPostType ) {
 			return { type: 'default' };
 		}
 
@@ -173,7 +188,12 @@ function EditorCanvas( {
 		}
 		// Set default layout for classic themes so all alignments are supported.
 		return { type: 'default' };
-	}, [ renderingMode, themeSupportsLayout, globalLayoutSettings ] );
+	}, [
+		renderingMode,
+		themeSupportsLayout,
+		globalLayoutSettings,
+		isDesignPostType,
+	] );
 
 	const newestPostContentAttributes = useMemo( () => {
 		if (
@@ -290,6 +310,9 @@ function EditorCanvas( {
 	const contentRef = useMergeRefs( [
 		localRef,
 		renderingMode === 'post-only' ? typewriterRef : noop,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (
@@ -313,7 +336,8 @@ function EditorCanvas( {
 		>
 			{ themeSupportsLayout &&
 				! themeHasDisabledLayoutStyles &&
-				renderingMode === 'post-only' && (
+				renderingMode === 'post-only' &&
+				! isDesignPostType && (
 					<>
 						<LayoutStyle
 							selector=".editor-editor-canvas__post-title-wrapper"
@@ -332,7 +356,7 @@ function EditorCanvas( {
 						) }
 					</>
 				) }
-			{ renderingMode === 'post-only' && (
+			{ renderingMode === 'post-only' && ! isDesignPostType && (
 				<div
 					className={ classnames(
 						'editor-editor-canvas__post-title-wrapper',
@@ -362,10 +386,9 @@ function EditorCanvas( {
 					className={ classnames(
 						className,
 						'is-' + deviceType.toLowerCase() + '-preview',
-						renderingMode !== 'post-only'
+						renderingMode !== 'post-only' || isDesignPostType
 							? '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 +399,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 };
+}