@wordpress/edit-site 5.15.0 → 5.16.0

package/src/components/layout/style.scss

@@ -58,7 +58,7 @@
 	display: flex;
 }
 
-.edit-site-layout__sidebar {
+.edit-site-layout__sidebar-region {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
 	flex-shrink: 0;
@@ -75,7 +75,7 @@
 		top: 0;
 	}
 
-	> div {
+	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;

package/src/components/page/index.js

@@ -26,17 +26,17 @@ export default function Page( {
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
-			{ ! hideTitleFromUI && title && (
-				<Header
-					title={ title }
-					subTitle={ subTitle }
-					actions={ actions }
-				/>
-			) }
 			<div className="edit-site-page-content">
+				{ ! hideTitleFromUI && title && (
+					<Header
+						title={ title }
+						subTitle={ subTitle }
+						actions={ actions }
+					/>
+				) }
 				{ children }
-				<EditorSnackbars />
 			</div>
+			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }

package/src/components/page/style.scss

@@ -2,7 +2,7 @@
 	color: $gray-800;
 	background: $white;
 	flex-grow: 1;
-	overflow: auto;
+	overflow: hidden;
 	margin: 0;
 	margin-top: $header-height;
 	@include break-medium() {
@@ -13,8 +13,7 @@
 
 .edit-site-page-header {
 	padding: 0 $grid-unit-40;
-	height: $header-height;
-	padding-left: $grid-unit-40;
+	min-height: $header-height;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -33,6 +32,10 @@
 }
 
 .edit-site-page-content {
-	padding: $grid-unit-40 $grid-unit-40;
-	overflow-x: auto;
+	height: 100%;
+	display: flex;
+	overflow: auto;
+	flex-flow: column;
+	position: relative;
+	z-index: z-index(".edit-site-page-content");
 }

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -49,7 +49,7 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
 		const isPageContent =
 			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
 			! isDescendentOfQueryLoop;

package/src/components/page-patterns/patterns-list.js

@@ -27,7 +27,7 @@ import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
-import { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY, PATTERNS } from './utils';
 import Pagination from './pagination';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -63,9 +63,12 @@ export default function PatternsList( { categoryId, type } ) {
 
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
 
+	const isUncategorizedThemePatterns =
+		type === PATTERNS && categoryId === 'uncategorized';
+
 	const { patterns, isResolving } = usePatterns(
 		type,
-		categoryId !== 'uncategorized' ? categoryId : '',
+		isUncategorizedThemePatterns ? '' : categoryId,
 		{
 			search: deferredFilterValue,
 			syncStatus:
@@ -75,6 +78,16 @@ export default function PatternsList( { categoryId, type } ) {
 		}
 	);
 
+	const updateSearchFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setFilterValue( value );
+	};
+
+	const updateSyncFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
+
 	const id = useId();
 	const titleId = `${ id }-title`;
 	const descriptionId = `${ id }-description`;
@@ -87,14 +100,12 @@ export default function PatternsList( { categoryId, type } ) {
 	const pageIndex = currentPage - 1;
 	const numPages = Math.ceil( patterns.length / PAGE_SIZE );
 
-	const list = useMemo(
-		() =>
-			patterns.slice(
-				pageIndex * PAGE_SIZE,
-				pageIndex * PAGE_SIZE + PAGE_SIZE
-			),
-		[ pageIndex, patterns ]
-	);
+	const list = useMemo( () => {
+		return patterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, patterns ] );
 
 	const asyncList = useAsyncList( list, { step: 10 } );
 
@@ -135,7 +146,9 @@ export default function PatternsList( { categoryId, type } ) {
 					<FlexBlock className="edit-site-patterns__search-block">
 						<SearchControl
 							className="edit-site-patterns__search"
-							onChange={ ( value ) => setFilterValue( value ) }
+							onChange={ ( value ) =>
+								updateSearchFilter( value )
+							}
 							placeholder={ __( 'Search patterns' ) }
 							label={ __( 'Search patterns' ) }
 							value={ filterValue }
@@ -149,7 +162,7 @@ export default function PatternsList( { categoryId, type } ) {
 							label={ __( 'Filter by sync status' ) }
 							value={ syncFilter }
 							isBlock
-							onChange={ ( value ) => setSyncFilter( value ) }
+							onChange={ ( value ) => updateSyncFilter( value ) }
 							__nextHasNoMarginBottom
 						>
 							{ Object.entries( SYNC_FILTERS ).map(

package/src/components/page-patterns/style.scss

@@ -6,14 +6,6 @@
 	padding: 0;
 	overflow-x: auto;
 
-	.edit-site-page-content {
-		height: 100%;
-		position: relative;
-		padding: 0;
-		display: flex;
-		flex-flow: column;
-	}
-
 	.components-base-control {
 		width: 100%;
 		@include break-medium {
@@ -68,6 +60,9 @@
 			width: 300px;
 		}
 	}
+	.edit-site-patterns__sync-status-filter-option:not([aria-checked="true"]) {
+		color: $gray-600;
+	}
 	.edit-site-patterns__sync-status-filter-option:active {
 		background: $gray-700;
 		color: $gray-100;
@@ -128,6 +123,12 @@
 	@include break-large {
 		grid-template-columns: 1fr 1fr;
 	}
+	@include break-huge {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+	@include break-xhuge {
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+	}
 	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;

package/src/components/page-patterns/use-patterns.js

@@ -4,6 +4,7 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -39,14 +40,12 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
-const templatePartHasCategory = ( item, category ) =>
-	item.templatePart.area === category;
-
 const selectTemplatePartsAsPatterns = (
 	select,
 	{ categoryId, search = '' } = {}
 ) => {
 	const { getEntityRecords, getIsResolving } = select( coreStore );
+	const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
 	const query = { per_page: -1 };
 	const rawTemplateParts =
 		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
@@ -55,6 +54,23 @@ const selectTemplatePartsAsPatterns = (
 		templatePartToPattern( templatePart )
 	);
 
+	// In the case where a custom template part area has been removed we need
+	// the current list of areas to cross check against so orphaned template
+	// parts can be treated as uncategorized.
+	const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+	const templatePartAreas = knownAreas.map( ( area ) => area.area );
+
+	const templatePartHasCategory = ( item, category ) => {
+		if ( category !== 'uncategorized' ) {
+			return item.templatePart.area === category;
+		}
+
+		return (
+			item.templatePart.area === category ||
+			! templatePartAreas.includes( item.templatePart.area )
+		);
+	};
+
 	const isResolving = getIsResolving( 'getEntityRecords', [
 		'postType',
 		'wp_template_part',

package/src/components/page-template-parts/index.js

@@ -39,7 +39,6 @@ export default function PageTemplateParts() {
 							params={ {
 								postId: templatePart.id,
 								postType: templatePart.type,
-								canvas: 'view',
 							} }
 							state={ { backPath: '/wp_template_part/all' } }
 						>

package/src/components/page-templates/index.js

@@ -8,8 +8,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -21,7 +20,6 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 
 export default function PageTemplates() {
 	const { records: templates } = useEntityRecords(
@@ -32,15 +30,6 @@ export default function PageTemplates() {
 		}
 	);
 
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			postType: select( coreStore ).getPostType( 'wp_template' ),
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	} );
-
 	const columns = [
 		{
 			header: __( 'Template' ),
@@ -89,13 +78,11 @@ export default function PageTemplates() {
 		<Page
 			title={ __( 'Templates' ) }
 			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ 'wp_template' }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				)
+				<AddNewTemplate
+					templateType={ 'wp_template' }
+					showIcon={ false }
+					toggleProps={ { variant: 'primary' } }
+				/>
 			}
 		>
 			{ templates && <Table data={ templates } columns={ columns } /> }

package/src/components/resizable-frame/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	ResizableBox,
 	Tooltip,
@@ -82,6 +82,8 @@ function ResizableFrame( {
 	setIsOversized,
 	isReady,
 	children,
+	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
+	defaultSize,
 	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
@@ -95,22 +97,13 @@ function ResizableFrame( {
 		[]
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const initialAspectRatioRef = useRef( null );
-	// The width of the resizable frame on initial render.
-	const initialComputedWidthRef = useRef( null );
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
 	const resizableHandleHelpId = useInstanceId(
 		ResizableFrame,
 		'edit-site-resizable-frame-handle-help'
 	);
-
-	// Remember frame dimensions on initial render.
-	useEffect( () => {
-		const { offsetWidth, offsetHeight } = frameRef.current.resizable;
-		initialComputedWidthRef.current = offsetWidth;
-		initialAspectRatioRef.current = offsetWidth / offsetHeight;
-	}, [] );
+	const defaultAspectRatio = defaultSize.width / defaultSize.height;
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -126,7 +119,7 @@ function ResizableFrame( {
 		const maxDoubledDelta =
 			delta.width < 0 // is shrinking
 				? deltaAbs
-				: ( initialComputedWidthRef.current - startingWidth ) / 2;
+				: ( defaultSize.width - startingWidth ) / 2;
 		const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );
 		const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
 		const singleSegment = 1 - doubleSegment;
@@ -135,17 +128,14 @@ function ResizableFrame( {
 
 		const updatedWidth = startingWidth + delta.width;
 
-		setIsOversized( updatedWidth > initialComputedWidthRef.current );
+		setIsOversized( updatedWidth > defaultSize.width );
 
 		// Width will be controlled by the library (via `resizeRatio`),
 		// so we only need to update the height.
 		setFrameSize( {
 			height: isOversized
 				? '100%'
-				: calculateNewHeight(
-						updatedWidth,
-						initialAspectRatioRef.current
-				  ),
+				: calculateNewHeight( updatedWidth, defaultAspectRatio ),
 		} );
 	};
 
@@ -186,15 +176,12 @@ function ResizableFrame( {
 				FRAME_MIN_WIDTH,
 				frameRef.current.resizable.offsetWidth + delta
 			),
-			initialComputedWidthRef.current
+			defaultSize.width
 		);
 
 		setFrameSize( {
 			width: newWidth,
-			height: calculateNewHeight(
-				newWidth,
-				initialAspectRatioRef.current
-			),
+			height: calculateNewHeight( newWidth, defaultAspectRatio ),
 		} );
 	};
 
@@ -291,9 +278,7 @@ function ResizableFrame( {
 									undefined
 								}
 								aria-valuemin={ FRAME_MIN_WIDTH }
-								aria-valuemax={
-									initialComputedWidthRef.current
-								}
+								aria-valuemax={ defaultSize.width }
 								onKeyDown={ handleResizableHandleKeyDown }
 								initial="hidden"
 								exit="hidden"

package/src/components/save-button/index.js

@@ -19,6 +19,7 @@ export default function SaveButton( {
 	showTooltip = true,
 	defaultLabel,
 	icon,
+	__next40pxDefaultSize = false,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
@@ -83,6 +84,7 @@ export default function SaveButton( {
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		>
 			{ label }
 		</Button>

package/src/components/save-hub/index.js

@@ -27,12 +27,13 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 ];
 
 export default function SaveHub() {
+	const saveNoticeId = 'site-edit-save-notice';
 	const { params } = useLocation();
 
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } =
+	const { createSuccessNotice, createErrorNotice, removeNotice } =
 		useDispatch( noticesStore );
 
 	const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } =
@@ -107,6 +108,7 @@ export default function SaveHub() {
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;
 
+		removeNotice( saveNoticeId );
 		const { kind, name, key, property } = dirtyCurrentEntity;
 
 		try {
@@ -132,6 +134,7 @@ export default function SaveHub() {
 
 			createSuccessNotice( __( 'Site updated.' ), {
 				type: 'snackbar',
+				id: saveNoticeId,
 			} );
 		} catch ( error ) {
 			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
@@ -148,6 +151,7 @@ export default function SaveHub() {
 					disabled={ isSaving }
 					aria-disabled={ isSaving }
 					className="edit-site-save-hub__button"
+					__next40pxDefaultSize
 				>
 					{ label }
 				</Button>
@@ -158,6 +162,7 @@ export default function SaveHub() {
 					showTooltip={ false }
 					icon={ disabled && ! isSaving ? check : null }
 					defaultLabel={ label }
+					__next40pxDefaultSize
 				/>
 			) }
 		</HStack>

package/src/components/save-hub/style.scss

@@ -3,7 +3,7 @@
 	border-top: 1px solid $gray-800;
 	flex-shrink: 0;
 	margin: 0;
-	padding: $canvas-padding;
+	padding: $grid-unit-20 + $grid-unit-05 $canvas-padding;
 }
 
 .edit-site-save-hub__button {

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -7,7 +7,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
-import { navigation as navigationIcon } from '@wordpress/icons';
+import { navigation, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,11 +18,13 @@ import TemplateAreas from './template-areas';
 import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
 
+const CARD_ICONS = {
+	wp_block: symbol,
+	wp_navigation: navigation,
+};
+
 export default function TemplatePanel() {
-	const {
-		info: { title, description, icon },
-		record,
-	} = useSelect( ( select ) => {
+	const { title, description, icon, record } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -31,10 +33,14 @@ export default function TemplatePanel() {
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 		const _record = getEditedEntityRecord( 'postType', postType, postId );
+		const info = getTemplateInfo( _record );
 
-		const info = _record ? getTemplateInfo( _record ) : {};
-
-		return { info, record: _record };
+		return {
+			title: info.title,
+			description: info.description,
+			icon: info.icon,
+			record: _record,
+		};
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -46,9 +52,7 @@ export default function TemplatePanel() {
 			<SidebarCard
 				className="edit-site-template-card"
 				title={ decodeEntities( title ) }
-				icon={
-					record?.type === 'wp_navigation' ? navigationIcon : icon
-				}
+				icon={ CARD_ICONS[ record?.type ] ?? icon }
 				description={ decodeEntities( description ) }
 				actions={ <TemplateActions template={ record } /> }
 			>

package/src/components/sidebar-navigation-screen/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -11,6 +16,7 @@ import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +29,8 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -31,7 +39,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
-	backPath,
+	backPath: backPathProp,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -40,6 +48,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const location = useLocation();
 	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
@@ -47,7 +56,12 @@ export default function SidebarNavigationScreen( {
 	return (
 		<>
 			<VStack
-				className="edit-site-sidebar-navigation-screen__main"
+				className={ classnames(
+					'edit-site-sidebar-navigation-screen__main',
+					{
+						'has-footer': !! footer,
+					}
+				) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
@@ -56,13 +70,17 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot && ! backPath && (
+					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								if ( navigator.location.isInitial ) {
-									navigator.goToParent( { replace: true } );
+								const backPath =
+									backPathProp ?? location.state?.backPath;
+								if ( backPath ) {
+									navigator.goTo( backPath, {
+										isBack: true,
+									} );
 								} else {
-									navigator.goBack();
+									navigator.goToParent();
 								}
 							} }
 							icon={ icon }
@@ -70,16 +88,6 @@ export default function SidebarNavigationScreen( {
 							showTooltip={ false }
 						/>
 					) }
-					{ ! isRoot && backPath && (
-						<SidebarButton
-							onClick={ () =>
-								navigator.goTo( backPath, { isBack: true } )
-							}
-							icon={ icon }
-							label={ __( 'Back' ) }
-							showTooltip={ false }
-						/>
-					) }
 					{ isRoot && (
 						<SidebarButton
 							icon={ icon }

package/src/components/sidebar-navigation-screen/style.scss

@@ -9,6 +9,10 @@
 	// Ensure the sidebar is always at least as tall as the viewport.
 	// This allows the footer section to be sticky at the bottom of the viewport.
 	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content {

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -18,6 +18,7 @@
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
 	width: 100px;
+	flex-shrink: 0;
 }
 
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {