@wordpress/edit-site 5.13.0 → 5.14.0

package/src/components/add-new-template/new-template.js

@@ -12,12 +12,32 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Flex,
+	Icon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { plus } from '@wordpress/icons';
+import {
+	archive,
+	blockMeta,
+	calendar,
+	category,
+	commentAuthorAvatar,
+	edit,
+	home,
+	layout,
+	list,
+	media,
+	notFound,
+	page,
+	plus,
+	pin,
+	verse,
+	search,
+	tag,
+} from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -56,27 +76,64 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'404',
 ];
 
-function TemplateListItem( { title, description, onClick } ) {
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	home: verse,
+	single: pin,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: commentAuthorAvatar,
+	taxonomy: blockMeta,
+	date: calendar,
+	tag,
+	attachment: media,
+};
+
+function TemplateListItem( {
+	title,
+	direction,
+	className,
+	description,
+	icon,
+	onClick,
+	children,
+} ) {
 	return (
-		<Button onClick={ onClick }>
-			<VStack
+		<Button
+			className={ className }
+			onClick={ onClick }
+			label={ description }
+			showTooltip={ !! description }
+		>
+			<Flex
 				as="span"
 				spacing={ 2 }
-				justify="flex-start"
+				align="center"
+				justify="center"
 				style={ { width: '100%' } }
+				direction={ direction }
 			>
-				<Text
-					weight={ 500 }
-					lineHeight={ 1.53846153846 } // 20px
+				<div className="edit-site-add-new-template__template-icon">
+					<Icon icon={ icon } />
+				</div>
+				<VStack
+					className="edit-site-add-new-template__template-name"
+					alignment="center"
+					spacing={ 0 }
 				>
-					{ title }
-				</Text>
-				<Text
-					lineHeight={ 1.53846153846 } // 20px
-				>
-					{ description }
-				</Text>
-			</VStack>
+					<Text
+						weight={ 500 }
+						lineHeight={ 1.53846153846 } // 20px
+					>
+						{ title }
+					</Text>
+					{ children }
+				</VStack>
+			</Flex>
 		</Button>
 	);
 }
@@ -104,6 +161,26 @@ export default function NewTemplate( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
+
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
+	const TEMPLATE_SHORT_DESCRIPTIONS = {
+		'front-page': homeUrl,
+		date: sprintf(
+			// translators: %s: The homepage url.
+			__( 'E.g. %s' ),
+			homeUrl + '/' + new Date().getFullYear()
+		),
+	};
+
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -220,14 +297,25 @@ export default function NewTemplate( {
 							justify="center"
 							className="edit-site-add-new-template__template-list__contents"
 						>
+							<Flex className="edit-site-add-new-template__template-list__prompt">
+								{ __(
+									'Select what the new template should apply to:'
+								) }
+							</Flex>
 							{ missingTemplates.map( ( template ) => {
-								const { title, description, slug, onClick } =
-									template;
+								const { title, slug, onClick } = template;
 								return (
 									<TemplateListItem
 										key={ slug }
 										title={ title }
-										description={ description }
+										direction="column"
+										className="edit-site-add-new-template__template-button"
+										description={
+											TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
+										}
+										icon={
+											TEMPLATE_ICONS[ slug ] || layout
+										}
 										onClick={ () =>
 											onClick
 												? onClick( template )
@@ -238,15 +326,23 @@ export default function NewTemplate( {
 							} ) }
 							<TemplateListItem
 								title={ __( 'Custom template' ) }
-								description={ __(
-									'A custom template can be manually applied to any post or page.'
-								) }
+								direction="row"
+								className="edit-site-add-new-template__custom-template-button"
+								icon={ edit }
 								onClick={ () =>
 									setModalContent(
 										modalContentMap.customGenericTemplate
 									)
 								}
-							/>
+							>
+								<Text
+									lineHeight={ 1.53846153846 } // 20px
+								>
+									{ __(
+										'A custom template can be manually applied to any post or page.'
+									) }
+								</Text>
+							</TemplateListItem>
 						</Grid>
 					) }
 					{ modalContent === modalContentMap.customTemplate && (

package/src/components/add-new-template/style.scss

@@ -138,17 +138,39 @@
 	@include break-large() {
 		width: calc(100% - #{$grid-unit-80 * 2});
 	}
+
+	.edit-site-add-new-template__template-button,
+	.edit-site-add-new-template__custom-template-button {
+		svg {
+			fill: var(--wp-admin-theme-color);
+		}
+	}
+
+	.edit-site-add-new-template__custom-template-button {
+		.edit-site-add-new-template__template-name {
+			flex-grow: 1;
+			align-items: flex-start;
+		}
+	}
+
+	.edit-site-add-new-template__template-icon {
+		padding: $grid-unit-10;
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		border-radius: 100%;
+		max-height: $grid-unit-50;
+		max-width: $grid-unit-50;
+	}
 }
 
 .edit-site-custom-template-modal__contents,
 .edit-site-add-new-template__template-list__contents {
 	> .components-button {
-		padding: $grid-unit-30;
+		padding: $grid-unit-40;
 		border-radius: $radius-block-ui;
 		display: flex;
 		flex-direction: column;
 		border: $border-width solid $gray-300;
-		min-height: $grid-unit-80 * 3;
+		justify-content: center;
 
 		// Show the boundary of the button, in High Contrast Mode.
 		outline: 1px solid transparent;
@@ -183,6 +205,12 @@
 			}
 		}
 	}
+
+	.edit-site-add-new-template__custom-template-button,
+	.edit-site-add-new-template__template-list__prompt {
+		grid-column-start: 1;
+		grid-column-end: 4;
+	}
 }
 
 .edit-site-add-new-template__template-list__contents {

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

@@ -87,7 +87,9 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					// which isn't a requirement in auto resize mode.
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
-					canvasMode === 'view' ? 'cursor: pointer;' : ''
+					canvasMode === 'view'
+						? 'cursor: pointer; height: 100vh'
+						: ''
 				}}}`
 			}</style>
 			{ children }

package/src/components/block-editor/inserter-media-categories.js

@@ -20,27 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 
 /** @typedef {import('@wordpress/block-editor').InserterMediaRequest} InserterMediaRequest */
 /** @typedef {import('@wordpress/block-editor').InserterMediaItem} InserterMediaItem */
-/**
- * Interface for inserter media category labels.
- *
- * @typedef {Object} InserterMediaCategoryLabels
- * @property {string} name                    General name of the media category. It's used in the inserter media items list.
- * @property {string} [search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
- */
-/**
- * Interface for inserter media category.
- *
- * @typedef {Object} InserterMediaCategory
- * @property {string}                                                 name                 The name of the media category, that should be unique among all media categories.
- * @property {InserterMediaCategoryLabels}                            labels               Labels for the media category.
- * @property {('image'|'audio'|'video')}                              mediaType            The media type of the media category.
- * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                The function to fetch media items for the category.
- * @property {(InserterMediaItem) => string}                          [getReportUrl]       If the media category supports reporting media items, this function should return
- *                                                                                         the report url for the media item. It accepts the `InserterMediaItem` as an argument.
- * @property {boolean}                                                [isExternalResource] If the media category is an external resource, this should be set to true.
- *                                                                                         This is used to avoid making a request to the external resource when the user
- *                                                                                         opens the inserter for the first time.
- */
+/** @typedef {import('@wordpress/block-editor').InserterMediaCategory} InserterMediaCategory */
 
 const getExternalLink = ( url, text ) =>
 	`<a ${ getExternalLinkAttributes( url ) }>${ text }</a>`;

package/src/components/block-editor/site-editor-canvas.js

@@ -96,6 +96,8 @@ export default function SiteEditorCanvas() {
 			? false
 			: undefined;
 
+	const forceFullHeight = isNavigationFocusMode;
+
 	return (
 		<>
 			<EditorCanvasContainer.Slot>
@@ -123,7 +125,11 @@ export default function SiteEditorCanvas() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height ?? '100%' }
+								height={
+									sizes.height && ! forceFullHeight
+										? sizes.height
+										: '100%'
+								}
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }

package/src/components/block-editor/use-site-editor-settings.js

@@ -12,11 +12,13 @@ import { unlock } from '../../lock-unlock';
 import inserterMediaCategories from './inserter-media-categories';
 
 export default function useSiteEditorSettings( templateType ) {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
+	const { storedSettings, canvasMode } = useSelect( ( select ) => {
+		const { getSettings, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
 		return {
 			storedSettings: getSettings(),
+			canvasMode: getCanvasMode(),
 		};
 	}, [] );
 
@@ -70,6 +72,7 @@ export default function useSiteEditorSettings( templateType ) {
 		const {
 			__experimentalAdditionalBlockPatterns,
 			__experimentalAdditionalBlockPatternCategories,
+			focusMode,
 			...restStoredSettings
 		} = storedSettings;
 
@@ -78,14 +81,7 @@ export default function useSiteEditorSettings( templateType ) {
 			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
-			// Temporary fix for bug in Block Editor Provider:
-			// see: https://github.com/WordPress/gutenberg/issues/51489.
-			// Some Site Editor entities (e.g. `wp_navigation`) may utilise
-			// template locking in their settings. Therefore this must be
-			// explicitly "unset" to avoid the template locking UI remaining
-			// active for all entities.
-			templateLock: false,
-			template: false,
+			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+	}, [ storedSettings, blockPatterns, blockPatternCategories, canvasMode ] );
 }

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

@@ -2,21 +2,11 @@
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasSpinner() {
-	const [ textColor ] = useGlobalStyle( 'color.text' );
-
 	return (
 		<div className="edit-site-canvas-spinner">
-			<Spinner style={ { color: textColor } } />
+			<Spinner />
 		</div>
 	);
 }

package/src/components/canvas-spinner/style.scss

@@ -4,4 +4,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	circle {
+		stroke: rgba($black, 0.3);
+	}
 }

package/src/components/create-pattern-modal/index.js

@@ -18,7 +18,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-patterns/utils';
 
 export default function CreatePatternModal( {
 	closeModal,
@@ -26,7 +26,7 @@ export default function CreatePatternModal( {
 	onError,
 } ) {
 	const [ name, setName ] = useState( '' );
-	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.unsynced );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
 	const onSyncChange = () => {
@@ -54,7 +54,10 @@ export default function CreatePatternModal( {
 					title: name || __( 'Untitled Pattern' ),
 					content: '',
 					status: 'publish',
-					meta: { sync_status: syncType },
+					meta:
+						syncType === SYNC_TYPES.unsynced
+							? { wp_pattern_sync_status: syncType }
+							: undefined,
 				},
 				{ throwOnError: true }
 			);
@@ -73,12 +76,10 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create a pattern' ) }
+			title={ __( 'Create pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>
-			<p>{ __( 'Turn this block into a pattern to reuse later' ) }</p>
-
 			<form
 				onSubmit={ async ( event ) => {
 					event.preventDefault();
@@ -100,13 +101,11 @@ export default function CreatePatternModal( {
 						__nextHasNoMarginBottom
 					/>
 					<ToggleControl
-						label={ __( 'Synced' ) }
+						label={ __( 'Keep all pattern instances in sync' ) }
 						onChange={ onSyncChange }
-						help={
-							syncType === SYNC_TYPES.full
-								? __( 'Content is synced' )
-								: __( 'Content is not synced' )
-						}
+						help={ __(
+							'Editing the original pattern will also update anywhere the pattern is used.'
+						) }
 						checked={ syncType === SYNC_TYPES.full }
 					/>
 					<HStack justify="right">

package/src/components/create-template-part-modal/index.js

@@ -101,7 +101,7 @@ export default function CreateTemplatePartModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create a template part' ) }
+			title={ __( 'Create template part' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>

package/src/components/editor/index.js

@@ -63,6 +63,18 @@ const typeLabels = {
 	wp_block: __( 'Pattern' ),
 };
 
+// Prevent accidental removal of certain blocks, asking the user for
+// confirmation.
+const blockRemovalRules = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+	'core/footnotes': __(
+		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
+	),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -180,6 +192,7 @@ export default function Editor( { isLoading } ) {
 						<SidebarComplementaryAreaFills />
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
+							isDistractionFree={ true }
 							enableRegionNavigation={ false }
 							className={ classnames(
 								'edit-site-editor__interface-skeleton',
@@ -196,7 +209,9 @@ export default function Editor( { isLoading } ) {
 									{ showVisualEditor && editedPost && (
 										<>
 											<BlockEditor />
-											<BlockRemovalWarningModal />
+											<BlockRemovalWarningModal
+												rules={ blockRemovalRules }
+											/>
 										</>
 									) }
 									{ editorMode === 'text' &&

package/src/components/editor/style.scss

@@ -6,6 +6,10 @@
 	&.is-loading {
 		opacity: 0;
 	}
+
+	.interface-interface-skeleton__header {
+		border: 0;
+	}
 }
 
 .edit-site-editor__toggle-save-panel {

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/global-styles/stories/index.js

@@ -367,6 +367,7 @@ const BASE_SETTINGS = {
 			textColumns: false,
 			textDecoration: true,
 			textTransform: true,
+			writingMode: false,
 			fluid: true,
 			fontFamilies: {
 				theme: [

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

@@ -11,6 +11,7 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
+	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -142,33 +143,42 @@ function GlobalStylesRevisionsMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
-				{ ( { onClose } ) => (
-					<MenuGroup>
-						{ hasRevisions && (
+			{ canReset || hasRevisions ? (
+				<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ hasRevisions && (
+								<MenuItem
+									onClick={ loadRevisions }
+									icon={
+										<RevisionsCountBadge>
+											{ revisionsCount }
+										</RevisionsCountBadge>
+									}
+								>
+									{ __( 'Revision history' ) }
+								</MenuItem>
+							) }
 							<MenuItem
-								onClick={ loadRevisions }
-								icon={
-									<RevisionsCountBadge>
-										{ revisionsCount }
-									</RevisionsCountBadge>
-								}
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
 							>
-								{ __( 'Revision history' ) }
+								{ __( 'Reset to defaults' ) }
 							</MenuItem>
-						) }
-						<MenuItem
-							onClick={ () => {
-								onReset();
-								onClose();
-							} }
-							disabled={ ! canReset }
-						>
-							{ __( 'Reset to defaults' ) }
-						</MenuItem>
-					</MenuGroup>
-				) }
-			</DropdownMenu>
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) : (
+				<Button
+					label={ __( 'Revisions' ) }
+					icon={ backup }
+					disabled
+					__experimentalIsFocusable
+				/>
+			) }
 		</GlobalStylesMenuFill>
 	);
 }

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 {