@wordpress/edit-site 6.4.0 → 6.5.0

package/src/components/add-new-pattern/index.js

@@ -173,9 +173,14 @@ export default function AddNewPattern() {
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
 						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
-							const currentCategory = categoryMap
-								.values()
-								.find( ( term ) => term.name === categoryId );
+							/*
+							 * categoryMap.values() returns an iterator.
+							 * Iterator.prototype.find() is not yet widely supported.
+							 * Convert to array to use the Array.prototype.find method.
+							 */
+							const currentCategory = Array.from(
+								categoryMap.values()
+							).find( ( term ) => term.name === categoryId );
 							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||

package/src/components/add-new-post/index.js

@@ -95,9 +95,10 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			size="small"
 		>
 			<form onSubmit={ createPost }>
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

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

@@ -166,9 +166,11 @@ export function usePostTypeArchiveMenuItems() {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: postType.icon?.startsWith( 'dashicons-' )
-							? postType.icon.slice( 10 )
-							: archive,
+						icon:
+							typeof postType.icon === 'string' &&
+							postType.icon.startsWith( 'dashicons-' )
+								? postType.icon.slice( 10 )
+								: archive,
 						templatePrefix: 'archive',
 					};
 				} ) || [],
@@ -272,9 +274,11 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: icon?.startsWith( 'dashicons-' )
-							? icon.slice( 10 )
-							: post,
+						icon:
+							typeof icon === 'string' &&
+							icon.startsWith( 'dashicons-' )
+								? icon.slice( 10 )
+								: post,
 						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;

package/src/components/editor/index.js

@@ -7,8 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -22,6 +22,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
+import { Icon, homeButton } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -51,7 +52,32 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
+const toggleHomeIconVariants = {
+	edit: {
+		opacity: 0,
+		scale: 0.2,
+	},
+	hover: {
+		opacity: 1,
+		scale: 1,
+		clipPath: 'inset( 22% round 2px )',
+	},
+};
+
+const siteIconVariants = {
+	edit: {
+		clipPath: 'inset(0% round 0)',
+	},
+	hover: {
+		clipPath: 'inset( 22% round 2px )',
+	},
+	tap: {
+		clipPath: 'inset(0% round 0)',
+	},
+};
+
 export default function EditSiteEditor( { isPostsList = false } ) {
+	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
 	const isLoading = useIsSiteEditorLoading();
 	const {
@@ -65,6 +91,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
+		hasSiteIcon,
 	} = useSelect( ( select ) => {
 		const {
 			getEditorCanvasContainerView,
@@ -75,8 +102,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			getEditedPostId,
 		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
-		const { getCurrentTheme } = select( coreDataStore );
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const _context = getEditedPostContext();
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
@@ -93,6 +121,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
+			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
 	useEditorTitle();
@@ -179,6 +208,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
 
 	const isReady = ! isLoading;
+	const transition = {
+		duration: disableMotion ? 0 : 0.2,
+	};
 
 	return (
 		<>
@@ -217,26 +249,52 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<Button
-										label={ __( 'Open Navigation' ) }
-										className="edit-site-layout__view-mode-toggle"
-										onClick={ () => {
-											setCanvasMode( 'view' );
-											// TODO: this is a temporary solution to navigate to the posts list if we are
-											// come here through `posts list` and are in focus mode editing a template, template part etc..
-											if (
-												isPostsList &&
-												params?.focusMode
-											) {
-												history.push( {
-													page: 'gutenberg-posts-dashboard',
-													postType: 'post',
-												} );
-											}
-										} }
+									<motion.div
+										className="edit-site-editor__view-mode-toggle"
+										transition={ transition }
+										animate="edit"
+										initial="edit"
+										whileHover="hover"
+										whileTap="tap"
 									>
-										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-									</Button>
+										<Button
+											label={ __( 'Open Navigation' ) }
+											showTooltip
+											tooltipPosition="middle right"
+											onClick={ () => {
+												setCanvasMode( 'view' );
+												// TODO: this is a temporary solution to navigate to the posts list if we are
+												// come here through `posts list` and are in focus mode editing a template, template part etc..
+												if (
+													isPostsList &&
+													params?.focusMode
+												) {
+													history.push( {
+														page: 'gutenberg-posts-dashboard',
+														postType: 'post',
+													} );
+												}
+											} }
+										>
+											<motion.div
+												variants={ siteIconVariants }
+											>
+												<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
+											</motion.div>
+										</Button>
+										<motion.div
+											className={ clsx(
+												'edit-site-editor__back-icon',
+												{
+													'has-site-icon':
+														hasSiteIcon,
+												}
+											) }
+											variants={ toggleHomeIconVariants }
+										>
+											<Icon icon={ homeButton } />
+										</motion.div>
+									</motion.div>
 								)
 							}
 						</BackButton>

package/src/components/editor/style.scss

@@ -1,7 +1,7 @@
 .edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
-	@include reduce-motion("transition");
+	@include reduce-motion( "transition" );
 
 	&.is-loading {
 		opacity: 0;
@@ -17,3 +17,61 @@
 	display: flex;
 	justify-content: center;
 }
+
+.edit-site-editor__view-mode-toggle {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable */
+	top: 0;
+	left: 0;
+	height: $header-height;
+	width: $header-height;
+	z-index: 100;
+
+	.components-button {
+		color: $white;
+		height: 100%;
+		width: 100%;
+		border-radius: 0;
+		overflow: hidden;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&:hover,
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	.edit-site-editor__view-mode-toggle-icon {
+		svg,
+		img {
+			background: $gray-900;
+			display: block;
+		}
+	}
+}
+
+.edit-site-editor__back-icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 60px;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: hsla(0, 0%, 80%);
+	pointer-events: none;
+
+	&.has-site-icon {
+		background-color: hsla(0, 0%, 100%, 0.6);
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+	}
+}

package/src/components/global-styles/font-families.js

@@ -26,7 +26,7 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { baseCustomFonts, modalTabOpen, setModalTabOpen, setNotice } =
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
 		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
 	const [ baseFontFamilies ] = useGlobalSetting(
@@ -69,7 +69,7 @@ function FontFamilies() {
 								_x( 'Theme', 'font source' )
 							}
 						</Subtitle>
-						<ItemGroup isBordered isSeparated>
+						<ItemGroup size="large" isBordered isSeparated>
 							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
@@ -87,7 +87,7 @@ function FontFamilies() {
 								_x( 'Custom', 'font source' )
 							}
 						</Subtitle>
-						<ItemGroup isBordered isSeparated>
+						<ItemGroup size="large" isBordered isSeparated>
 							{ customFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
@@ -112,8 +112,6 @@ function FontFamilies() {
 					variant="secondary"
 					__next40pxDefaultSize
 					onClick={ () => {
-						// Reset notice when opening the modal.
-						setNotice( null );
 						setModalTabOpen(
 							hasInstalledFonts
 								? 'installed-fonts'

package/src/components/global-styles/font-library-modal/context.js

@@ -54,7 +54,6 @@ function FontLibraryProvider( { children } ) {
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
-	const [ notice, setNotice ] = useState( null );
 
 	const refreshLibrary = () => {
 		setRefreshKey( Date.now() );
@@ -139,8 +138,6 @@ function FontLibraryProvider( { children } ) {
 	}, [ modalTabOpen ] );
 
 	const handleSetLibraryFontSelected = ( font ) => {
-		setNotice( null );
-
 		// If font is null, reset the selected font
 		if ( ! font ) {
 			setLibraryFontSelected( null );
@@ -527,8 +524,6 @@ function FontLibraryProvider( { children } ) {
 				modalTabOpen,
 				setModalTabOpen,
 				refreshLibrary,
-				notice,
-				setNotice,
 				saveFontFamilies,
 				isResolvingLibrary,
 				isInstalling,

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -25,6 +25,7 @@ import {
 	DropdownMenu,
 	SearchControl,
 	ProgressBar,
+	CheckboxControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -62,20 +63,15 @@ function FontCollection( { slug } ) {
 	};
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
+	const [ notice, setNotice ] = useState( false );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const {
-		collections,
-		getFontCollection,
-		installFonts,
-		isInstalling,
-		notice,
-		setNotice,
-	} = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts, isInstalling } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
 	);
@@ -115,8 +111,7 @@ function FontCollection( { slug } ) {
 
 	useEffect( () => {
 		setSelectedFont( null );
-		setNotice( null );
-	}, [ slug, setNotice ] );
+	}, [ slug ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install
@@ -175,6 +170,25 @@ function FontCollection( { slug } ) {
 		setFontsToInstall( [] );
 	};
 
+	const selectFontCount =
+		fontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;
+
+	// Check if any fonts are selected.
+	const isIndeterminate =
+		selectFontCount > 0 &&
+		selectFontCount !== selectedFont?.fontFace?.length;
+
+	// Check if all fonts are selected.
+	const isSelectAllChecked =
+		selectFontCount === selectedFont?.fontFace?.length;
+
+	// Toggle select all fonts.
+	const toggleSelectAll = () => {
+		const newFonts = isSelectAllChecked ? [] : [ selectedFont ];
+
+		setFontsToInstall( newFonts );
+	};
+
 	const handleInstall = async () => {
 		setNotice( null );
 
@@ -301,6 +315,8 @@ function FontCollection( { slug } ) {
 								</FlexItem>
 								<FlexItem>
 									<SelectControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
 										label={ __( 'Category' ) }
 										value={ filters.category }
 										onChange={ handleCategoryFilter }
@@ -400,6 +416,14 @@ function FontCollection( { slug } ) {
 								{ __( 'Select font variants to install.' ) }
 							</Text>
 							<Spacer margin={ 4 } />
+							<CheckboxControl
+								className="font-library-modal__select-all"
+								label={ __( 'Select all' ) }
+								checked={ isSelectAllChecked }
+								onChange={ toggleSelectAll }
+								indeterminate={ isIndeterminate }
+								__nextHasNoMarginBottom
+							/>
 							<VStack spacing={ 0 }>
 								<Spacer margin={ 8 } />
 								{ getSortedFontFaces( selectedFont ).map(

package/src/components/global-styles/font-library-modal/index.js

@@ -44,7 +44,7 @@ function FontLibraryModal( {
 	onRequestClose,
 	defaultTabId = 'installed-fonts',
 } ) {
-	const { collections, setNotice } = useContext( FontLibraryContext );
+	const { collections } = useContext( FontLibraryContext );
 	const canUserCreate = useSelect( ( select ) => {
 		return select( coreStore ).canUser( 'create', {
 			kind: 'postType',
@@ -59,11 +59,6 @@ function FontLibraryModal( {
 		tabs.push( ...tabsFromCollections( collections || [] ) );
 	}
 
-	// Reset notice when new tab is selected.
-	const onSelect = () => {
-		setNotice( null );
-	};
-
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
@@ -72,7 +67,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
+				<Tabs defaultTabId={ defaultTabId }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -53,14 +53,13 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		notice,
-		setNotice,
 	} = useContext( FontLibraryContext );
 
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies'
 	);
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
 		undefined,
@@ -120,6 +119,24 @@ function InstalledFonts() {
 		setIsConfirmDeleteOpen( true );
 	};
 
+	const handleUpdate = async () => {
+		setNotice( null );
+		try {
+			await saveFontFamilies( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family updated successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error updating the font family. ' ) +
+					error.message,
+			} );
+		}
+	};
+
 	const getFontFacesToDisplay = ( font ) => {
 		if ( ! font ) {
 			return [];
@@ -265,6 +282,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -305,6 +323,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -337,6 +356,7 @@ function InstalledFonts() {
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );
+										setNotice( null );
 									} }
 									label={ __( 'Back' ) }
 								/>
@@ -406,9 +426,7 @@ function InstalledFonts() {
 						) }
 						<Button
 							variant="primary"
-							onClick={ () => {
-								saveFontFamilies( fontFamilies );
-							} }
+							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }
 							accessibleWhenDisabled
 						>

package/src/components/global-styles/font-library-modal/style.scss

@@ -69,6 +69,7 @@ $footer-height: 70px;
 	color: $gray-900;
 }
 
+// TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
 .font-library-modal__tabpanel-layout .components-base-control__field {
 	margin-bottom: 0;
 }
@@ -194,4 +195,3 @@ button.font-library-modal__upload-area {
 		padding-left: $grid-unit-20;
 	}
 }
-

package/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -25,9 +25,9 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 
 function UploadFonts() {
-	const { installFonts, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const { installFonts } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );

package/src/components/global-styles/screen-typeset.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyVariations from './variations/variations-typography';
+import ScreenHeader from './header';
+import FontFamilies from './font-families';
+
+function ScreenTypeset() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Typesets' ) }
+				description={ __(
+					'Fonts and typographic styling applied across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations />
+
+					{ fontLibraryEnabled && <FontFamilies /> }
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenTypeset;

package/src/components/global-styles/screen-typography-element.js

@@ -67,30 +67,44 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
+							showTooltip
+							aria-label={ __( 'All headings' ) }
 							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"
+							showTooltip
+							aria-label={ __( 'Heading 1' ) }
 							label={ __( 'H1' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h2"
+							showTooltip
+							aria-label={ __( 'Heading 2' ) }
 							label={ __( 'H2' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h3"
+							showTooltip
+							aria-label={ __( 'Heading 3' ) }
 							label={ __( 'H3' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h4"
+							showTooltip
+							aria-label={ __( 'Heading 4' ) }
 							label={ __( 'H4' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h5"
+							showTooltip
+							aria-label={ __( 'Heading 5' ) }
 							label={ __( 'H5' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h6"
+							showTooltip
+							aria-label={ __( 'Heading 6' ) }
 							label={ __( 'H6' ) }
 						/>
 					</ToggleGroupControl>