@wordpress/edit-site 5.12.4 → 5.12.6

package/src/components/header-edit-mode/document-actions/index.js

@@ -20,6 +20,7 @@ import {
 	chevronLeftSmall as chevronLeftSmallIcon,
 	page as pageIcon,
 	navigation as navigationIcon,
+	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useState, useEffect, useRef } from '@wordpress/element';
@@ -118,10 +119,17 @@ function TemplateDocumentActions( { className, onBack } ) {
 
 	const entityLabel = getEntityLabel( record.type );
 
+	let typeIcon = icon;
+	if ( record.type === 'wp_navigation' ) {
+		typeIcon = navigationIcon;
+	} else if ( record.type === 'wp_block' ) {
+		typeIcon = symbol;
+	}
+
 	return (
 		<BaseDocumentActions
 			className={ className }
-			icon={ record.type === 'wp_navigation' ? navigationIcon : icon }
+			icon={ typeIcon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">

package/src/components/page/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { NavigableRegion } from '@wordpress/interface';
+import { EditorSnackbars } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -32,7 +33,10 @@ export default function Page( {
 					actions={ actions }
 				/>
 			) }
-			<div className="edit-site-page-content">{ children }</div>
+			<div className="edit-site-page-content">
+				{ children }
+				<EditorSnackbars />
+			</div>
 		</NavigableRegion>
 	);
 }

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

@@ -6,8 +6,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import PagePatterns from '../page-patterns';
+import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
-import PageLibrary from '../page-library';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -19,8 +20,10 @@ export default function PageMain() {
 
 	if ( path === '/wp_template/all' ) {
 		return <PageTemplates />;
-	} else if ( path === '/library' ) {
-		return <PageLibrary />;
+	} else if ( path === '/wp_template_part/all' ) {
+		return <PageTemplateParts />;
+	} else if ( path === '/patterns' ) {
+		return <PagePatterns />;
 	}
 
 	return null;

package/src/components/{page-library → page-patterns}/grid-item.js

@@ -15,12 +15,20 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	Flex,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, moreHorizontal } from '@wordpress/icons';
+import {
+	Icon,
+	header,
+	footer,
+	symbolFilled,
+	moreHorizontal,
+	lockSmall,
+} from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
@@ -31,9 +39,10 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 import { PATTERNS, USER_PATTERNS } from './utils';
 import { useLink } from '../routes/link';
 
+const THEME_PATTERN_TOOLTIP = __( 'Theme patterns cannot be edited.' );
+
 export default function GridItem( { categoryId, composite, icon, item } ) {
-	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+	const descriptionId = useId();
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
 	const { __experimentalDeleteReusableBlock } =
@@ -46,7 +55,6 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
 		categoryId,
 		categoryType: item.type,
-		canvas: 'view',
 	} );
 
 	const onKeyDown = ( event ) => {
@@ -56,10 +64,10 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 	};
 
 	const isEmpty = ! item.blocks?.length;
-	const patternClassNames = classnames( 'edit-site-library__pattern', {
+	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
 		'is-placeholder': isEmpty,
 	} );
-	const previewClassNames = classnames( 'edit-site-library__preview', {
+	const previewClassNames = classnames( 'edit-site-patterns__preview', {
 		'is-inactive': item.type === PATTERNS,
 	} );
 
@@ -79,14 +87,26 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 	};
 
 	const isUserPattern = item.type === USER_PATTERNS;
-	let ariaDescription;
+	const ariaDescriptions = [];
 	if ( isUserPattern ) {
 		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescription = __(
-			'Press Enter to edit, or Delete to delete the pattern.'
+		ariaDescriptions.push(
+			__( 'Press Enter to edit, or Delete to delete the pattern.' )
 		);
 	} else if ( item.description ) {
-		ariaDescription = item.description;
+		ariaDescriptions.push( item.description );
+	}
+	if ( item.type === PATTERNS ) {
+		ariaDescriptions.push( THEME_PATTERN_TOOLTIP );
+	}
+
+	let itemIcon = icon;
+	if ( categoryId === 'header' ) {
+		itemIcon = header;
+	} else if ( categoryId === 'footer' ) {
+		itemIcon = footer;
+	} else if ( categoryId === 'uncategorized' ) {
+		itemIcon = symbolFilled;
 	}
 
 	return (
@@ -101,43 +121,73 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					onKeyDown={ isUserPattern ? onKeyDown : undefined }
 					aria-label={ item.title }
 					aria-describedby={
-						ariaDescription ? descriptionId : undefined
+						ariaDescriptions.length
+							? ariaDescriptions.join( ' ' )
+							: undefined
 					}
 				>
 					{ isEmpty && __( 'Empty pattern' ) }
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
 				</CompositeItem>
-				{ ariaDescription && (
+				{ ariaDescriptions.map( ( ariaDescription, index ) => (
 					<div
-						aria-hidden="true"
-						style={ { display: 'none' } }
-						id={ descriptionId }
+						key={ index }
+						hidden
+						id={ `${ descriptionId }-${ index }` }
 					>
 						{ ariaDescription }
 					</div>
-				) }
+				) ) }
 				<HStack
 					aria-hidden="true"
-					className="edit-site-library__footer"
+					className="edit-site-patterns__footer"
 					justify="space-between"
 				>
 					<HStack
 						alignment="center"
 						justify="left"
 						spacing={ 3 }
-						className="edit-site-library__pattern-title"
+						className="edit-site-patterns__pattern-title"
 					>
-						{ icon && <Icon icon={ icon } /> }
-						<Heading level={ 5 }>{ item.title }</Heading>
+						{ icon && (
+							<Icon
+								className="edit-site-patterns__pattern-icon"
+								icon={ itemIcon }
+							/>
+						) }
+						<Flex
+							as={ Heading }
+							level={ 5 }
+							gap={ 0 }
+							justify="left"
+						>
+							{ item.title }
+							{ item.type === PATTERNS && (
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Theme patterns cannot be edited.'
+									) }
+								>
+									<span className="edit-site-patterns__pattern-lock-icon">
+										<Icon
+											style={ { fill: 'currentcolor' } }
+											icon={ lockSmall }
+											size={ 24 }
+										/>
+									</span>
+								</Tooltip>
+							) }
+						</Flex>
 					</HStack>
 					{ item.type === USER_PATTERNS && (
 						<DropdownMenu
 							icon={ moreHorizontal }
 							label={ __( 'Actions' ) }
-							className="edit-site-library__dropdown"
+							className="edit-site-patterns__dropdown"
 							popoverProps={ { placement: 'bottom-end' } }
 							toggleProps={ {
-								className: 'edit-site-library__button',
+								className: 'edit-site-patterns__button',
 								isSmall: true,
 								describedBy: sprintf(
 									/* translators: %s: pattern name */

package/src/components/{page-library → page-patterns}/grid.js

@@ -22,7 +22,7 @@ export default function Grid( { categoryId, label, icon, items } ) {
 		<Composite
 			{ ...composite }
 			role="listbox"
-			className="edit-site-library__grid"
+			className="edit-site-patterns__grid"
 			aria-label={ label }
 		>
 			{ items.map( ( item ) => (

package/src/components/{page-library → page-patterns}/index.js

@@ -11,16 +11,16 @@ import { getQueryArgs } from '@wordpress/url';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
 import Page from '../page';
 import PatternsList from './patterns-list';
-import useLibrarySettings from './use-library-settings';
+import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-export default function PageLibrary() {
+export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
 	const category = categoryId || DEFAULT_CATEGORY;
-	const settings = useLibrarySettings();
+	const settings = usePatternSettings();
 
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
@@ -28,8 +28,8 @@ export default function PageLibrary() {
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				className="edit-site-library"
-				title={ __( 'Library content' ) }
+				className="edit-site-patterns"
+				title={ __( 'Patterns content' ) }
 				hideTitleFromUI
 			>
 				<PatternsList type={ type } categoryId={ category } />

package/src/components/{page-library → page-patterns}/no-patterns.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 export default function NoPatterns() {
 	return (
-		<div className="edit-site-library__no-results">
+		<div className="edit-site-patterns__no-results">
 			{ __( 'No patterns found.' ) }
 		</div>
 	);

package/src/components/{page-library → page-patterns}/patterns-list.js

@@ -51,19 +51,19 @@ export default function PatternsList( { categoryId, type } ) {
 						icon={ isRTL() ? chevronRight : chevronLeft }
 						label={ __( 'Back' ) }
 						onClick={ () => {
-							// Go back in history if we came from the library page.
+							// Go back in history if we came from the Patterns page.
 							// Otherwise push a stack onto the history.
-							if ( location.state?.backPath === '/library' ) {
+							if ( location.state?.backPath === '/patterns' ) {
 								history.back();
 							} else {
-								history.push( { path: '/library' } );
+								history.push( { path: '/patterns' } );
 							}
 						} }
 					/>
 				) }
 				<FlexBlock>
 					<SearchControl
-						className="edit-site-library__search"
+						className="edit-site-patterns__search"
 						onChange={ ( value ) => setFilterValue( value ) }
 						placeholder={ __( 'Search patterns' ) }
 						label={ __( 'Search patterns' ) }
@@ -75,7 +75,7 @@ export default function PatternsList( { categoryId, type } ) {
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
+					<VStack className="edit-site-patterns__section-header">
 						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
@@ -93,7 +93,7 @@ export default function PatternsList( { categoryId, type } ) {
 			) }
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
+					<VStack className="edit-site-patterns__section-header">
 						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(

package/src/components/{page-library → page-patterns}/style.scss

@@ -1,4 +1,4 @@
-.edit-site-library {
+.edit-site-patterns {
 	background: rgba(0, 0, 0, 0.05);
 	margin: $header-height 0 0;
 	.components-text {
@@ -14,7 +14,7 @@
 	}
 }
 
-.edit-site-library__grid {
+.edit-site-patterns__grid {
 	column-gap: $grid-unit-30;
 	@include break-large() {
 		column-count: 2;
@@ -25,13 +25,13 @@
 	padding-top: $border-width-focus-fallback;
 	margin-bottom: $grid-unit-40;
 
-	.edit-site-library__pattern {
+	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;
 		flex-direction: column;
 		margin-bottom: $grid-unit-60;
 
-		.edit-site-library__preview {
+		.edit-site-patterns__preview {
 			border-radius: $radius-block-ui;
 			cursor: pointer;
 			overflow: hidden;
@@ -48,12 +48,12 @@
 			}
 		}
 
-		.edit-site-library__footer,
-		.edit-site-library__button {
+		.edit-site-patterns__footer,
+		.edit-site-patterns__button {
 			color: $gray-600;
 		}
 
-		&.is-placeholder .edit-site-library__preview {
+		&.is-placeholder .edit-site-patterns__preview {
 			min-height: $grid-unit-80;
 			color: $gray-600;
 			border: 1px dashed $gray-800;
@@ -67,7 +67,7 @@
 		}
 	}
 
-	.edit-site-library__preview {
+	.edit-site-patterns__preview {
 		flex: 1;
 		margin-bottom: $grid-unit-20;
 	}
@@ -75,7 +75,7 @@
 
 // The increased specificity here is to overcome component styles
 // without relying on internal component class names.
-.edit-site-library__search {
+.edit-site-patterns__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
 		color: $gray-200;
@@ -90,16 +90,20 @@
 	}
 }
 
-.edit-site-library__pattern-title {
+.edit-site-patterns__pattern-title {
 	color: $gray-600;
 
-	svg {
+	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
 		fill: $white;
 	}
+
+	.edit-site-patterns__pattern-lock-icon {
+		display: inline-flex;
+	}
 }
 
-.edit-site-library__no-results {
+.edit-site-patterns__no-results {
 	color: $gray-600;
 }

package/src/components/{page-library/use-library-settings.js → page-patterns/use-pattern-settings.js}

@@ -12,7 +12,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import { filterOutDuplicatesByName } from './utils';
 
-export default function useLibrarySettings() {
+export default function usePatternSettings() {
 	const storedSettings = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		return getSettings();

package/src/components/{page-library → page-patterns}/use-patterns.js

@@ -38,6 +38,15 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
+const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
+const templatePartHasCategory = ( item, category ) => {
+	if ( category === 'uncategorized' ) {
+		return ! templatePartCategories.includes( item.templatePart.area );
+	}
+
+	return item.templatePart.area === category;
+};
+
 const useTemplatePartsAsPatterns = (
 	categoryId,
 	postType = TEMPLATE_PARTS,
@@ -83,7 +92,7 @@ const useTemplatePartsAsPatterns = (
 
 		return searchItems( templateParts, filterValue, {
 			categoryId,
-			hasCategory: ( item, area ) => item.templatePart.area === area,
+			hasCategory: templatePartHasCategory,
 		} );
 	}, [ templateParts, filterValue, categoryId ] );
 
@@ -145,7 +154,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status,
+	syncStatus: reusableBlock.meta?.sync_status || SYNC_TYPES.full,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,

package/src/components/{page-library → page-patterns}/utils.js

@@ -1,9 +1,9 @@
-export const DEFAULT_CATEGORY = 'header';
-export const DEFAULT_TYPE = 'wp_template_part';
+export const DEFAULT_CATEGORY = 'my-patterns';
+export const DEFAULT_TYPE = 'wp_block';
 export const PATTERNS = 'pattern';
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const USER_PATTERNS = 'wp_block';
-export const USER_PATTERN_CATEGORY = 'custom-patterns';
+export const USER_PATTERN_CATEGORY = 'my-patterns';
 
 export const CORE_PATTERN_SOURCES = [
 	'core',

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

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__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 { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+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 PageTemplateParts() {
+	const { records: templateParts } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template Part' ),
+			cell: ( templatePart ) => (
+				<VStack>
+					<Heading level={ 5 }>
+						<Link
+							params={ {
+								postId: templatePart.id,
+								postType: templatePart.type,
+								canvas: 'view',
+							} }
+							state={ { backPath: '/wp_template_part/all' } }
+						>
+							{ decodeEntities(
+								templatePart.title?.rendered ||
+									templatePart.slug
+							) }
+						</Link>
+					</Heading>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( templatePart ) => (
+				<AddedBy
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( templatePart ) => (
+				<TemplateActions
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Template Parts' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template_part' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templateParts && (
+				<Table data={ templateParts } columns={ columns } />
+			) }
+		</Page>
+	);
+}

package/src/components/sidebar/index.js

@@ -12,9 +12,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
@@ -56,15 +56,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/library">
-				<SidebarNavigationScreenLibrary />
+			<NavigatorScreen path="/patterns">
+				<SidebarNavigationScreenPatterns />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -18,6 +18,12 @@ import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 
+const entityLabels = {
+	wp_navigation: __( 'Navigation' ),
+	wp_block: __( 'Pattern' ),
+	wp_template: __( 'Template' ),
+};
+
 const SettingsHeader = ( { sidebarName } ) => {
 	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
 		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
@@ -29,8 +35,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		};
 	} );
 
-	const entityLabel =
-		entityType === 'wp_navigation' ? __( 'Navigation' ) : __( 'Template' );
+	const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>