@wordpress/edit-site 5.15.0 → 5.17.0

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-actions/trash-page-menu-item.js

@@ -51,7 +51,11 @@ export default function TrashPageMenuItem( { postId, onRemove } ) {
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => removePage() } isDestructive>
+			<MenuItem
+				onClick={ () => removePage() }
+				isDestructive
+				variant="secondary"
+			>
 				{ __( 'Move to Trash' ) }
 			</MenuItem>
 		</>

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

@@ -3,15 +3,12 @@
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter, removeFilter } from '@wordpress/hooks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-
-const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 const PAGE_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
@@ -49,7 +46,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/duplicate-menu-item.js

@@ -78,27 +78,22 @@ export default function DuplicateMenuItem( {
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" created.' ),
-					title
+					__( '"%s" duplicated.' ),
+					item.title
 				),
 				{
 					type: 'snackbar',
 					id: 'edit-site-patterns-success',
-					actions: [
-						{
-							label: __( 'Edit' ),
-							onClick: () =>
-								history.push( {
-									postType: TEMPLATE_PARTS,
-									postId: result?.id,
-									categoryType: TEMPLATE_PARTS,
-									categoryId,
-								} ),
-						},
-					],
 				}
 			);
 
+			history.push( {
+				postType: TEMPLATE_PARTS,
+				postId: result?.id,
+				categoryType: TEMPLATE_PARTS,
+				categoryId,
+			} );
+
 			onClose();
 		} catch ( error ) {
 			const errorMessage =
@@ -139,41 +134,25 @@ export default function DuplicateMenuItem( {
 				{ throwOnError: true }
 			);
 
-			const actionLabel = isThemePattern
-				? __( 'View my patterns' )
-				: __( 'Edit' );
-
-			const newLocation = isThemePattern
-				? {
-						categoryType: USER_PATTERNS,
-						categoryId: USER_PATTERN_CATEGORY,
-						path: '/patterns',
-				  }
-				: {
-						categoryType: USER_PATTERNS,
-						categoryId: USER_PATTERN_CATEGORY,
-						postType: USER_PATTERNS,
-						postId: result?.id,
-				  };
-
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
-					__( '"%s" added to my patterns.' ),
-					title
+					__( '"%s" duplicated.' ),
+					item.title
 				),
 				{
 					type: 'snackbar',
 					id: 'edit-site-patterns-success',
-					actions: [
-						{
-							label: actionLabel,
-							onClick: () => history.push( newLocation ),
-						},
-					],
 				}
 			);
 
+			history.push( {
+				categoryType: USER_PATTERNS,
+				categoryId: USER_PATTERN_CATEGORY,
+				postType: USER_PATTERNS,
+				postId: result?.id,
+			} );
+
 			onClose();
 		} catch ( error ) {
 			const errorMessage =

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';
 
 /**
@@ -27,7 +28,9 @@ const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
 
 const templatePartToPattern = ( templatePart ) => ( {
-	blocks: parse( templatePart.content.raw ),
+	blocks: parse( templatePart.content.raw, {
+		__unstableSkipMigrationLogs: true,
+	} ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
 	isCustom: templatePart.source === 'custom',
@@ -39,14 +42,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 +56,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',
@@ -91,7 +109,9 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			...pattern,
 			keywords: pattern.keywords || [],
 			type: 'pattern',
-			blocks: parse( pattern.content ),
+			blocks: parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} ),
 		} ) );
 
 	if ( categoryId ) {
@@ -110,7 +130,9 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
-	blocks: parse( reusableBlock.content.raw ),
+	blocks: parse( reusableBlock.content.raw, {
+		__unstableSkipMigrationLogs: true,
+	} ),
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,

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/default-sidebar.js

@@ -35,6 +35,7 @@ export default function DefaultSidebar( {
 				scope="core/edit-site"
 				identifier={ identifier }
 				title={ title }
+				smallScreenTitle={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
 				header={ header }

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -8,6 +8,7 @@ import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editSiteStore } from '../../../store';
 
 export default function EditTemplate() {
-	const { context, hasResolved, title, blocks } = useSelect( ( select ) => {
+	const { context, hasResolved, template } = useSelect( ( select ) => {
 		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 			select( editSiteStore );
 		const { getEditedEntityRecord, hasFinishedResolution } =
@@ -26,15 +27,13 @@ export default function EditTemplate() {
 			getEditedPostType(),
 			getEditedPostId(),
 		];
-		const template = getEditedEntityRecord( ...queryArgs );
 		return {
 			context: _context,
 			hasResolved: hasFinishedResolution(
 				'getEditedEntityRecord',
 				queryArgs
 			),
-			title: template?.title,
-			blocks: template?.blocks,
+			template: getEditedEntityRecord( ...queryArgs ),
 		};
 	}, [] );
 
@@ -45,13 +44,22 @@ export default function EditTemplate() {
 		[ context ]
 	);
 
+	const blocks = useMemo(
+		() =>
+			template.blocks ??
+			( template.content && typeof template.content !== 'function'
+				? parse( template.content )
+				: [] ),
+		[ template.blocks, template.content ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
 		<VStack>
-			<div>{ decodeEntities( title ) }</div>
+			<div>{ decodeEntities( template.title ) }</div>
 			<div className="edit-site-page-panels__edit-template-preview">
 				<BlockContextProvider value={ blockContext }>
 					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />