@wordpress/edit-site 5.12.5 → 5.12.7

package/src/components/global-styles/palette.js

@@ -91,15 +91,16 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ themeColors?.length > 0 && (
-				<Button
-					variant="secondary"
-					icon={ shuffle }
-					onClick={ randomizeThemeColors }
-				>
-					{ __( 'Randomize colors' ) }
-				</Button>
-			) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 		</VStack>
 	);
 }

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/header-edit-mode/document-actions/style.scss

@@ -16,6 +16,14 @@
 		color: currentColor;
 		background: $gray-200;
 	}
+
+	@include break-medium() {
+		width: 50%;
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
 }
 
 .edit-site-document-actions__command {

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

@@ -108,6 +108,9 @@ export default function HeaderEditMode() {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
+
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -213,14 +216,18 @@ export default function HeaderEditMode() {
 						) }
 						{ isLargeViewport && (
 							<>
-								<ToolbarItem
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
+								{ ! hasFixedToolbar && (
+									<ToolbarItem
+										as={ ToolSelector }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
+										disabled={ ! isVisualMode }
+									/>
+								) }
 								<ToolbarItem
 									as={ UndoButton }
 									showTooltip={ ! showIconLabels }
@@ -257,7 +264,8 @@ export default function HeaderEditMode() {
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
-									! isDistractionFree && (
+									! isDistractionFree &&
+									! hasFixedToolbar && (
 										<ToolbarItem
 											as={ Button }
 											className="edit-site-header-edit-mode__zoom-out-view-toggle"

package/src/components/layout/index.js

@@ -143,7 +143,7 @@ export default function Layout() {
 		headerAnimationState = canvasMode; // edit, view, init
 	}
 
-	// Sets the right context for the command center
+	// Sets the right context for the command palette
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
 			? 'site-editor-edit'

package/src/components/layout/style.scss

@@ -4,17 +4,6 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-
-	// Expand the fixed block toolbar to cover the document title control.
-	.block-editor-block-contextual-toolbar {
-		@include break-medium() {
-			&.is-fixed {
-				// the combined with of the tools at the right of the header and the margin left
-				width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
-			}
-		}
-	}
-
 }
 
 .edit-site-layout__hub {

package/src/components/page/header.js

@@ -18,7 +18,7 @@ export default function Header( { title, subTitle, actions } ) {
 		<HStack as="header" alignment="left" className="edit-site-page-header">
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
-					as="h1"
+					as="h2"
 					level={ 4 }
 					className="edit-site-page-header__title"
 				>

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-content-focus-manager/disable-non-page-content-blocks.js

@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
+	return null;
 }
 
 /**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
-		const mode = isContent ? 'contentOnly' : undefined;
+		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isPageContent =
+			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+			! isDescendentOfQueryLoop;
+		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},

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,78 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					onKeyDown={ isUserPattern ? onKeyDown : undefined }
 					aria-label={ item.title }
 					aria-describedby={
-						ariaDescription ? descriptionId : undefined
+						ariaDescriptions.length
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.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,29 +75,29 @@ 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">
 							{ __(
-								'Patterns that are kept in sync across your site'
+								'Patterns that are kept in sync across the site'
 							) }
 						</Text>
 					</VStack>
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ __( 'Synced patterns' ) }
+						label={ __( 'Synced' ) }
 						items={ syncedPatterns }
 					/>
 				</>
 			) }
 			{ ! 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">
 							{ __(
-								'Patterns that can be changed freely without affecting your site'
+								'Patterns that can be changed freely without affecting the site'
 							) }
 						</Text>
 					</VStack>

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,9 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
+const templatePartHasCategory = ( item, category ) =>
+	item.templatePart.area === category;
+
 const useTemplatePartsAsPatterns = (
 	categoryId,
 	postType = TEMPLATE_PARTS,
@@ -83,7 +86,7 @@ const useTemplatePartsAsPatterns = (
 
 		return searchItems( templateParts, filterValue, {
 			categoryId,
-			hasCategory: ( item, area ) => item.templatePart.area === area,
+			hasCategory: templatePartHasCategory,
 		} );
 	}, [ templateParts, filterValue, categoryId ] );
 
@@ -145,7 +148,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status,
+	syncStatus: reusableBlock.wp_pattern_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',