@wordpress/edit-site 5.12.1 → 5.12.3

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,
+	postList,
+	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: postList,
+	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/create-pattern-modal/index.js

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

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

@@ -180,6 +180,7 @@ export default function Editor( { isLoading } ) {
 						<SidebarComplementaryAreaFills />
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
+							isDistractionFree={ true }
 							enableRegionNavigation={ false }
 							className={ classnames(
 								'edit-site-editor__interface-skeleton',

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useCallback, useRef } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	ToolSelector,
@@ -21,6 +21,7 @@ import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
 import {
+	__unstableMotion as motion,
 	Button,
 	ToolbarItem,
 	MenuGroup,
@@ -60,6 +61,7 @@ export default function HeaderEditMode() {
 		isListViewOpen,
 		listViewShortcut,
 		isVisualMode,
+		isDistractionFree,
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
@@ -99,6 +101,10 @@ export default function HeaderEditMode() {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
 		};
 	}, [] );
 
@@ -108,6 +114,7 @@ export default function HeaderEditMode() {
 		setIsListViewOpened,
 	} = useDispatch( editSiteStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const disableMotion = useReducedMotion();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -156,6 +163,19 @@ export default function HeaderEditMode() {
 		window?.__experimentalEnableZoomedOutView && isVisualMode;
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
+	const toolbarVariants = {
+		isDistractionFree: { y: '-50px' },
+		isDistractionFreeHovering: { y: 0 },
+		view: { y: 0 },
+		edit: { y: 0 },
+	};
+
+	const toolbarTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : 0.2,
+		ease: 'easeOut',
+	};
+
 	return (
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
@@ -164,26 +184,33 @@ export default function HeaderEditMode() {
 		>
 			{ hasDefaultEditorCanvasView && (
 				<NavigableToolbar
+					as={ motion.div }
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
 					shouldUseKeyboardFocusShortcut={
 						! blockToolbarCanBeFocused
 					}
+					variants={ toolbarVariants }
+					transition={ toolbarTransition }
 				>
 					<div className="edit-site-header-edit-mode__toolbar">
-						<ToolbarItem
-							ref={ inserterButton }
-							as={ Button }
-							className="edit-site-header-edit-mode__inserter-toggle"
-							variant="primary"
-							isPressed={ isInserterOpen }
-							onMouseDown={ preventDefault }
-							onClick={ toggleInserter }
-							disabled={ ! isVisualMode }
-							icon={ plus }
-							label={ showIconLabels ? shortLabel : longLabel }
-							showTooltip={ ! showIconLabels }
-						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								ref={ inserterButton }
+								as={ Button }
+								className="edit-site-header-edit-mode__inserter-toggle"
+								variant="primary"
+								isPressed={ isInserterOpen }
+								onMouseDown={ preventDefault }
+								onClick={ toggleInserter }
+								disabled={ ! isVisualMode }
+								icon={ plus }
+								label={
+									showIconLabels ? shortLabel : longLabel
+								}
+								showTooltip={ ! showIconLabels }
+							/>
+						) }
 						{ isLargeViewport && (
 							<>
 								<ToolbarItem
@@ -208,57 +235,70 @@ export default function HeaderEditMode() {
 										showIconLabels ? 'tertiary' : undefined
 									}
 								/>
-								<ToolbarItem
-									as={ Button }
-									className="edit-site-header-edit-mode__list-view-toggle"
-									disabled={
-										! isVisualMode || isZoomedOutView
-									}
-									icon={ listView }
-									isPressed={ isListViewOpen }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'List View' ) }
-									onClick={ toggleListView }
-									shortcut={ listViewShortcut }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-								/>
-								{ isZoomedOutViewExperimentEnabled && (
+								{ ! isDistractionFree && (
 									<ToolbarItem
 										as={ Button }
-										className="edit-site-header-edit-mode__zoom-out-view-toggle"
-										icon={ chevronUpDown }
-										isPressed={ isZoomedOutView }
+										className="edit-site-header-edit-mode__list-view-toggle"
+										disabled={
+											! isVisualMode || isZoomedOutView
+										}
+										icon={ listView }
+										isPressed={ isListViewOpen }
 										/* translators: button label text should, if possible, be under 16 characters. */
-										label={ __( 'Zoom-out View' ) }
-										onClick={ () => {
-											setPreviewDeviceType( 'desktop' );
-											__unstableSetEditorMode(
-												isZoomedOutView
-													? 'edit'
-													: 'zoom-out'
-											);
-										} }
+										label={ __( 'List View' ) }
+										onClick={ toggleListView }
+										shortcut={ listViewShortcut }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
 									/>
 								) }
+								{ isZoomedOutViewExperimentEnabled &&
+									! isDistractionFree && (
+										<ToolbarItem
+											as={ Button }
+											className="edit-site-header-edit-mode__zoom-out-view-toggle"
+											icon={ chevronUpDown }
+											isPressed={ isZoomedOutView }
+											/* translators: button label text should, if possible, be under 16 characters. */
+											label={ __( 'Zoom-out View' ) }
+											onClick={ () => {
+												setPreviewDeviceType(
+													'desktop'
+												);
+												__unstableSetEditorMode(
+													isZoomedOutView
+														? 'edit'
+														: 'zoom-out'
+												);
+											} }
+										/>
+									) }
 							</>
 						) }
 					</div>
 				</NavigableToolbar>
 			) }
 
-			<div className="edit-site-header-edit-mode__center">
-				{ ! hasDefaultEditorCanvasView ? (
-					getEditorCanvasContainerTitle( editorCanvasView )
-				) : (
-					<DocumentActions />
-				) }
-			</div>
+			{ ! isDistractionFree && (
+				<div className="edit-site-header-edit-mode__center">
+					{ ! hasDefaultEditorCanvasView ? (
+						getEditorCanvasContainerTitle( editorCanvasView )
+					) : (
+						<DocumentActions />
+					) }
+				</div>
+			) }
 
 			<div className="edit-site-header-edit-mode__end">
-				<div className="edit-site-header-edit-mode__actions">
+				<motion.div
+					className="edit-site-header-edit-mode__actions"
+					variants={ toolbarVariants }
+					transition={ toolbarTransition }
+				>
 					{ ! isFocusMode && hasDefaultEditorCanvasView && (
 						<div
 							className={ classnames(
@@ -290,9 +330,11 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<SaveButton />
-					<PinnedItems.Slot scope="core/edit-site" />
+					{ ! isDistractionFree && (
+						<PinnedItems.Slot scope="core/edit-site" />
+					) }
 					<MoreMenu showIconLabels={ showIconLabels } />
-				</div>
+				</motion.div>
 			</div>
 		</div>
 	);