@wordpress/edit-site 5.32.0 → 5.34.0

package/src/components/editor/index.js

@@ -7,8 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
-import { useInstanceId, useViewportMatch } from '@wordpress/compose';
+import {
+	Notice,
+	__unstableAnimatePresence as AnimatePresence,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import {
+	useInstanceId,
+	useViewportMatch,
+	useReducedMotion,
+} from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
@@ -16,11 +24,6 @@ import {
 	store as blockEditorStore,
 	BlockInspector,
 } from '@wordpress/block-editor';
-import {
-	InterfaceSkeleton,
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import {
 	EditorKeyboardShortcutsRegister,
 	EditorKeyboardShortcuts,
@@ -31,6 +34,8 @@ import {
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,7 +45,7 @@ import {
 	SidebarInspectorFill,
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
-import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
+import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
@@ -59,8 +64,14 @@ const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
 	ListViewSidebar,
+	InterfaceSkeleton,
+	ComplementaryArea,
+	interfaceStore,
+	SavePublishPanels,
 } = unlock( editorPrivateApis );
 
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
@@ -70,8 +81,12 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
+	/* translators: accessibility text for the editor header landmark region. */
+	header: __( 'Editor top bar' ),
 };
 
+const ANIMATION_DURATION = 0.25;
+
 export default function Editor( { isLoading, onClick } ) {
 	const {
 		record: editedPost,
@@ -82,6 +97,7 @@ export default function Editor( { isLoading, onClick } ) {
 	const { type: editedPostType } = editedPost;
 
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const disableMotion = useReducedMotion();
 
 	const {
 		context,
@@ -128,9 +144,7 @@ export default function Editor( { isLoading, onClick } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isRightSidebarOpen: getActiveComplementaryArea(
-				editSiteStore.name
-			),
+			isRightSidebarOpen: getActiveComplementaryArea( 'core' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
@@ -177,6 +191,22 @@ export default function Editor( { isLoading, onClick } ) {
 	const { closeGeneralSidebar } = useDispatch( editSiteStore );
 
 	const settings = useSpecificEditorSettings();
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
 	const isReady =
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
@@ -211,8 +241,56 @@ export default function Editor( { isLoading, onClick } ) {
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
+								'is-entity-save-view-open':
+									!! entitiesSavedStatesCallback,
 							}
 						) }
+						header={
+							<AnimatePresence initial={ false }>
+								{ canvasMode === 'edit' && (
+									<motion.div
+										initial={ {
+											marginTop: -60,
+										} }
+										animate={ {
+											marginTop: 0,
+										} }
+										exit={ {
+											marginTop: -60,
+										} }
+										transition={ {
+											type: 'tween',
+											duration:
+												// Disable transition in mobile to emulate a full page transition.
+												disableMotion ||
+												! isLargeViewport
+													? 0
+													: ANIMATION_DURATION,
+											ease: [ 0.6, 0, 0.4, 1 ],
+										} }
+									>
+										<Header
+											setEntitiesSavedStatesCallback={
+												setEntitiesSavedStatesCallback
+											}
+										/>
+									</motion.div>
+								) }
+							</AnimatePresence>
+						}
+						actions={
+							<SavePublishPanels
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+							/>
+						}
 						notices={ <EditorSnackbars /> }
 						content={
 							<>
@@ -236,9 +314,9 @@ export default function Editor( { isLoading, onClick } ) {
 								) }
 								{ isEditMode && (
 									<>
-										<KeyboardShortcutsEditMode />
 										<EditorKeyboardShortcutsRegister />
 										<EditorKeyboardShortcuts />
+										<BlockKeyboardShortcuts />
 									</>
 								) }
 							</>
@@ -254,11 +332,9 @@ export default function Editor( { isLoading, onClick } ) {
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
-							! isDistractionFree &&
 							isEditMode &&
-							isRightSidebarOpen &&
 							! isDistractionFree && (
-								<ComplementaryArea.Slot scope="core/edit-site" />
+								<ComplementaryArea.Slot scope="core" />
 							)
 						}
 						footer={

package/src/components/editor/style.scss

@@ -22,11 +22,16 @@
 	justify-content: center;
 }
 
+// Adjust the position of the notices when breadcrumbs are present
+.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
+	bottom: 40px;
+}
+
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
 	position: absolute;
 	right: 0;
-	bottom: 40px;
+	bottom: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }

package/src/components/global-styles/background-panel.js

@@ -2,12 +2,18 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
+// Initial control values where no block style is set.
+const BACKGROUND_DEFAULT_VALUES = {
+	backgroundSize: 'auto',
+};
+
 const {
 	useGlobalStyle,
 	useGlobalSetting,
@@ -23,12 +29,22 @@ export default function BackgroundPanel() {
 	} );
 	const [ settings ] = useGlobalSetting( '' );
 
+	const defaultControls = {
+		backgroundImage: true,
+		backgroundSize:
+			!! style?.background?.backgroundImage &&
+			!! inheritedStyle?.background?.backgroundImage,
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
+			headerLabel={ __( 'Image' ) }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultControls={ defaultControls }
 		/>
 	);
 }

package/src/components/global-styles/block-preview-panel.js

@@ -6,6 +6,11 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { getVariationClassName } from './utils';
+
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const blockExample = getBlockType( name )?.example;
 	const blocks = useMemo( () => {
@@ -19,7 +24,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 				...example,
 				attributes: {
 					...example.attributes,
-					className: 'is-style-' + variation,
+					className: getVariationClassName( variation ),
 				},
 			};
 		}

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

@@ -35,12 +35,12 @@ import {
 	checkFontFaceInstalled,
 } from './utils';
 import { toggleFont } from './utils/toggleFont';
+import setNestedValue from '../../../utils/set-nested-value';
 
 export const FontLibraryContext = createContext( {} );
 
 function FontLibraryProvider( { children } ) {
-	const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
-		useDispatch( coreStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 	const { globalStylesId } = useSelect( ( select ) => {
 		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
 		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
@@ -94,11 +94,30 @@ function FontLibraryProvider( { children } ) {
 		'base'
 	);
 
-	// Save font families to the global styles post in the database.
-	const saveFontFamilies = () => {
-		saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-			'settings.typography.fontFamilies',
-		] );
+	/*
+	 * Save the font families to the database.
+
+	 * This function is called when the user activates or deactivates a font family.
+	 * It only updates the global styles post content in the database for new font families.
+	 * This avoids saving other styles/settings changed by the user using other parts of the editor.
+	 *
+	 * It uses the font families from the param to avoid using the font families from an outdated state.
+	 *
+	 * @param {Array} fonts - The font families that will be saved to the database.
+	 */
+	const saveFontFamilies = async ( fonts ) => {
+		// Gets the global styles database post content.
+		const updatedGlobalStyles = globalStyles.record;
+
+		// Updates the database version of global styles with the edited font families in the client.
+		setNestedValue(
+			updatedGlobalStyles,
+			[ 'settings', 'typography', 'fontFamilies' ],
+			fonts
+		);
+
+		// Saves a new version of the global styles in the database.
+		await saveEntityRecord( 'root', 'globalStyles', updatedGlobalStyles );
 	};
 
 	// Library Fonts
@@ -118,7 +137,7 @@ function FontLibraryProvider( { children } ) {
 	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
 	 *
 	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
-	 * Avoids incosistencies with the fonts listed in the font library modal as base (unactivated).
+	 * Avoids inconsistencies with the fonts listed in the font library modal as base (inactivated).
 	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
 	 */
 	const baseThemeFonts = baseFontFamilies?.theme
@@ -264,27 +283,27 @@ function FontLibraryProvider( { children } ) {
 				}
 
 				// Install the fonts (upload the font files to the server and create the post in the database).
-				let sucessfullyInstalledFontFaces = [];
-				let unsucessfullyInstalledFontFaces = [];
+				let successfullyInstalledFontFaces = [];
+				let unsuccessfullyInstalledFontFaces = [];
 				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
 					const response = await batchInstallFontFaces(
 						installedFontFamily.id,
 						makeFontFacesFormData( fontFamilyToInstall )
 					);
-					sucessfullyInstalledFontFaces = response?.successes;
-					unsucessfullyInstalledFontFaces = response?.errors;
+					successfullyInstalledFontFaces = response?.successes;
+					unsuccessfullyInstalledFontFaces = response?.errors;
 				}
 
-				// Use the sucessfully installed font faces
+				// Use the successfully installed font faces
 				// As well as any font faces that were already installed (those will be activated)
 				if (
-					sucessfullyInstalledFontFaces?.length > 0 ||
+					successfullyInstalledFontFaces?.length > 0 ||
 					alreadyInstalledFontFaces?.length > 0
 				) {
 					// Use font data from REST API not from client to ensure
 					// correct font information is used.
 					installedFontFamily.fontFace = [
-						...sucessfullyInstalledFontFaces,
+						...successfullyInstalledFontFaces,
 					];
 
 					fontFamiliesToActivate.push( installedFontFamily );
@@ -302,13 +321,13 @@ function FontLibraryProvider( { children } ) {
 				if (
 					isANewFontFamily &&
 					fontFamilyToInstall?.fontFace?.length > 0 &&
-					sucessfullyInstalledFontFaces?.length === 0
+					successfullyInstalledFontFaces?.length === 0
 				) {
 					await fetchUninstallFontFamily( installedFontFamily.id );
 				}
 
 				installationErrors = installationErrors.concat(
-					unsucessfullyInstalledFontFaces
+					unsuccessfullyInstalledFontFaces
 				);
 			}
 
@@ -322,15 +341,11 @@ function FontLibraryProvider( { children } ) {
 
 			if ( fontFamiliesToActivate.length > 0 ) {
 				// Activate the font family (add the font family to the global styles).
-				activateCustomFontFamilies( fontFamiliesToActivate );
-
-				// Save the global styles to the database.
-				await saveSpecifiedEntityEdits(
-					'root',
-					'globalStyles',
-					globalStylesId,
-					[ 'settings.typography.fontFamilies' ]
+				const activeFonts = activateCustomFontFamilies(
+					fontFamiliesToActivate
 				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
 
 				refreshLibrary();
 			}
@@ -360,14 +375,11 @@ function FontLibraryProvider( { children } ) {
 			// Deactivate the font family if delete request is successful
 			// (Removes the font family from the global styles).
 			if ( uninstalledFontFamily.deleted ) {
-				deactivateFontFamily( fontFamilyToUninstall );
-				// Save the global styles to the database.
-				await saveSpecifiedEntityEdits(
-					'root',
-					'globalStyles',
-					globalStylesId,
-					[ 'settings.typography.fontFamilies' ]
+				const activeFonts = deactivateFontFamily(
+					fontFamilyToUninstall
 				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
 			}
 
 			// Refresh the library (the library font families from database).
@@ -391,42 +403,54 @@ function FontLibraryProvider( { children } ) {
 		const newCustomFonts = initialCustomFonts.filter(
 			( f ) => f.slug !== font.slug
 		);
-		setFontFamilies( {
+		const activeFonts = {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
-		} );
+		};
+		setFontFamilies( activeFonts );
 
 		if ( font.fontFace ) {
 			font.fontFace.forEach( ( face ) => {
 				unloadFontFaceInBrowser( face, 'all' );
 			} );
 		}
+		return activeFonts;
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
-		// Removes the id from the families and faces to avoid saving that to global styles post content.
-		const fontsToActivate = fontsToAdd.map(
-			( { id: _familyDbId, fontFace, ...font } ) => ( {
-				...font,
-				...( fontFace && fontFace.length > 0
-					? {
-							fontFace: fontFace.map(
-								( { id: _faceDbId, ...face } ) => face
-							),
-					  }
-					: {} ),
-			} )
-		);
+		const fontsToActivate = cleanFontsForSave( fontsToAdd );
 
-		// Activate the fonts by set the new custom fonts array.
-		setFontFamilies( {
+		const activeFonts = {
 			...fontFamilies,
 			// Merge the existing custom fonts with the new fonts.
 			custom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),
-		} );
+		};
+
+		// Activate the fonts by set the new custom fonts array.
+		setFontFamilies( activeFonts );
+
+		loadFontsInBrowser( fontsToActivate );
+
+		return activeFonts;
+	};
 
+	// Removes the id from the families and faces to avoid saving that to global styles post content.
+	const cleanFontsForSave = ( fonts ) => {
+		return fonts.map( ( { id: _familyDbId, fontFace, ...font } ) => ( {
+			...font,
+			...( fontFace && fontFace.length > 0
+				? {
+						fontFace: fontFace.map(
+							( { id: _faceDbId, ...face } ) => face
+						),
+				  }
+				: {} ),
+		} ) );
+	};
+
+	const loadFontsInBrowser = ( fonts ) => {
 		// Add custom fonts to the browser.
-		fontsToActivate.forEach( ( font ) => {
+		fonts.forEach( ( font ) => {
 			if ( font.fontFace ) {
 				font.fontFace.forEach( ( face ) => {
 					// Load font faces just in the iframe because they already are in the document.
@@ -472,11 +496,15 @@ function FontLibraryProvider( { children } ) {
 
 	const loadFontFaceAsset = async ( fontFace ) => {
 		// If the font doesn't have a src, don't load it.
-		if ( ! fontFace.src ) return;
+		if ( ! fontFace.src ) {
+			return;
+		}
 		// Get the src of the font.
 		const src = getDisplaySrcFromFontFace( fontFace.src );
 		// If the font is already loaded, don't load it again.
-		if ( ! src || loadedFontUrls.has( src ) ) return;
+		if ( ! src || loadedFontUrls.has( src ) ) {
+			return;
+		}
 		// Load the font in the browser.
 		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.
@@ -494,7 +522,9 @@ function FontLibraryProvider( { children } ) {
 			const hasData = !! collections.find(
 				( collection ) => collection.slug === slug
 			)?.font_families;
-			if ( hasData ) return;
+			if ( hasData ) {
+				return;
+			}
 			const response = await fetchFontCollection( slug );
 			const updatedCollections = collections.map( ( collection ) =>
 				collection.slug === slug
@@ -518,6 +548,7 @@ function FontLibraryProvider( { children } ) {
 			value={ {
 				libraryFontSelected,
 				handleSetLibraryFontSelected,
+				fontFamilies,
 				themeFonts,
 				baseThemeFonts,
 				customFonts,