@wordpress/edit-site 5.30.0 → 5.32.0

package/src/components/global-styles/variations/style.scss

@@ -5,40 +5,49 @@
 	cursor: pointer;
 
 	.edit-site-global-styles-variations_item-preview {
-		padding: $border-width * 2;
 		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 $border-width $gray-200;
 		// Shown in Windows 10 high contrast mode.
 		outline: 1px solid transparent;
+		position: relative;
+		// Add the same transition that block style variations and other buttons have.
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -$border-width;
+			left: -$border-width;
+			bottom: -$border-width;
+			right: -$border-width;
+			// Visually resembles the $radius-block-ui.
+			border-radius: $radius-block-ui + $border-width;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+			// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+			border: $border-width solid transparent;
+			box-sizing: inherit;
+			// Add the same transition that block style variations and other buttons have.
+			transition: box-shadow 0.1s linear;
+			@include reduce-motion("transition");
+		}
 
 		.edit-site-global-styles-color-variations & {
 			padding: $grid-unit-10;
 		}
 	}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
+		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
 	}
 
-	&:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&:focus-visible {
+	&.is-active .edit-site-global-styles-variations_item-preview,
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		// Shown in Windows 10 high contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: 0;
-	}
-}
+		outline-width: 3px;
 
-.edit-site-global-styles_preview-typography {
-	font-size: 22px;
-	line-height: 44px;
-	text-align: center;
+		&::after {
+			box-shadow: inset 0 0 0 1px $white;
+		}
+	}
 }

package/src/components/global-styles/variations/variations-color.js

@@ -5,21 +5,27 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import Subtitle from '../subtitle';
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
+import { useColorVariations } from '../hooks';
+import Subtitle from '../subtitle';
+
+export default function ColorVariations( { title, gap = 2 } ) {
+	const colorVariations = useColorVariations();
+
+	if ( ! colorVariations?.length ) {
+		return null;
+	}
 
-export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
-			<Grid columns={ 3 }>
-				{ variations.map( ( variation, index ) => (
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid columns={ 3 } gap={ gap }>
+				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }
 					</Variation>

package/src/components/global-styles/variations/variations-typography.js

@@ -1,84 +1,65 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
 import {
 	__experimentalGrid as Grid,
+	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
-import { unlock } from '../../../lock-unlock';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import PreviewTypography from '../preview-typography';
-import Subtitle from '../subtitle';
-import { getFontFamilies } from '../utils';
+import { useTypographyVariations } from '../hooks';
+import TypographyExample from '../typography-example';
+import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
+import Subtitle from '../subtitle';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-export default function TypographyVariations() {
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-			filter: ( variation ) =>
-				variation?.settings?.typography?.fontFamilies &&
-				Object.keys( variation?.settings?.typography?.fontFamilies )
-					.length,
-		} );
-
-	const { base } = useContext( GlobalStylesContext );
-
-	/*
-	 * Filter duplicate variations based on the font families used in the variation.
-	 */
-	const uniqueTypographyVariations = typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-					if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
+export default function TypographyVariations( { title, gap = 2 } ) {
+	const typographyVariations = useTypographyVariations();
 
-					return acc;
-				}, {} )
-		  )
-		: [];
+	if ( ! typographyVariations?.length ) {
+		return null;
+	}
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid
 				columns={ 3 }
+				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ typographyVariations && typographyVariations.length
-					? uniqueTypographyVariations.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation }>
-								{ () => (
-									<PreviewTypography
-										variation={ variation }
-									/>
-								) }
-							</Variation>
-					  ) )
-					: null }
+				{ typographyVariations &&
+					typographyVariations.length &&
+					typographyVariations.map( ( variation, index ) => (
+						<Variation key={ index } variation={ variation }>
+							{ ( isFocused ) => (
+								<PreviewIframe
+									label={ variation?.title }
+									isFocused={ isFocused }
+								>
+									{ ( { ratio, key } ) => (
+										<HStack
+											key={ key }
+											spacing={ 10 * ratio }
+											justify="center"
+											style={ {
+												height: '100%',
+												overflow: 'hidden',
+											} }
+										>
+											<TypographyExample
+												variation={ variation }
+												fontSize={ 85 * ratio }
+											/>
+										</HStack>
+									) }
+								</PreviewIframe>
+							) }
+						</Variation>
+					) ) }
 			</Grid>
 		</VStack>
 	);

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

@@ -154,6 +154,7 @@ export default function HeaderEditMode() {
 										? __( 'Show block tools' )
 										: __( 'Hide block tools' )
 								}
+								size="compact"
 							/>
 						</>
 					) }

package/src/components/header-edit-mode/style.scss

@@ -1,5 +1,3 @@
-$header-toolbar-min-width: 335px;
-
 .edit-site-header-edit-mode {
 	height: $header-height;
 	align-items: center;
@@ -16,46 +14,62 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		border: none;
 		align-items: center;
+		flex-grow: 1;
 		flex-shrink: 2;
-		// We need this to be overflow hidden so the block toolbar can
-		// overflow scroll. If the overflow is visible, flexbox allows
-		// the toolbar to grow outside of the allowed container space.
-		overflow: hidden;
 		// Take up the full height of the header so the border focus
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			// Account for the site hub, which is 60x60px.
+			flex-basis: calc(37.5% - 60px);
 			padding-right: 2px;
+			// We need this to be overflow hidden so the block toolbar can
+			// overflow scroll. If the overflow is visible, flexbox allows
+			// the toolbar to grow outside of the allowed container space.
+			overflow: hidden;
 		}
 	}
 
 	.edit-site-header-edit-mode__end {
 		display: flex;
 		justify-content: flex-end;
+		height: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+
+		@include break-medium() {
+			flex-basis: 37.5%;
+		}
 	}
 
 	.edit-site-header-edit-mode__center {
-		display: flex;
 		align-items: center;
-		height: 100%;
+		display: flex;
+		flex-basis: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-20;
+		flex-shrink: 2;
+		height: 100%;
 		justify-content: center;
+
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
+
+		@include break-medium() {
+			flex-basis: 25%;
+		}
 	}
 
 }
 
 .edit-site-header-edit-mode__toolbar {
-	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-20;
+	display: flex;
 	gap: $grid-unit-10;
+	padding-left: $grid-unit-20;
 
 	@include break-medium() {
 		padding-left: $grid-unit-50 * 0.5;
@@ -87,12 +101,9 @@ $header-toolbar-min-width: 335px;
 	display: inline-flex;
 	align-items: center;
 	flex-wrap: nowrap;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-10;
-	}
-
+	// Ensure actions do not press against .edit-site-header-edit-mode__center.
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
 	gap: $grid-unit-10;
 }
 

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -46,4 +46,8 @@ export const textFormattingShortcuts = [
 			'Convert the current paragraph or heading to a heading of level 1 to 6.'
 		),
 	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
 ];

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -142,6 +142,10 @@ export default function KeyboardShortcutHelpModal() {
 				title={ __( 'Text formatting' ) }
 				shortcuts={ textFormattingShortcuts }
 			/>
+			<ShortcutCategorySection
+				title={ __( 'List View shortcuts' ) }
+				categoryName="list-view"
+			/>
 		</Modal>
 	);
 }

package/src/components/keyboard-shortcuts/global.js

@@ -4,29 +4,41 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function KeyboardShortcutsGlobal() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
+	const { hasNonPostEntityChanges } = useSelect( editorStore );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const isDirty = !! dirtyEntityRecords.length;
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
 		const isSaving = dirtyEntityRecords.some( ( record ) =>
 			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
-
-		if ( ! isSaving && isDirty ) {
-			setIsSaveViewOpened( true );
+		const _hasNonPostEntityChanges = hasNonPostEntityChanges();
+		const isViewMode = getCanvasMode() === 'view';
+		if (
+			( ! hasDirtyEntities || ! _hasNonPostEntityChanges || isSaving ) &&
+			! isViewMode
+		) {
+			return;
 		}
+		// At this point, we know that there are dirty entities, other than
+		// the edited post, and we're not in the process of saving, so open
+		// save view.
+		setIsSaveViewOpened( true );
 	} );
 
 	return null;

package/src/components/layout/animation.js

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { Controller } from '@react-spring/web';
+
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
+
+function getAbsolutePosition( element ) {
+	return {
+		top: element.offsetTop,
+		left: element.offsetLeft,
+	};
+}
+
+const ANIMATION_DURATION = 300;
+
+/**
+ * Hook used to compute the styles required to move a div into a new position.
+ *
+ * The way this animation works is the following:
+ *  - It first renders the element as if there was no animation.
+ *  - It takes a snapshot of the position of the block to use it
+ *    as a destination point for the animation.
+ *  - It restores the element to the previous position using a CSS transform
+ *  - It uses the "resetAnimation" flag to reset the animation
+ *    from the beginning in order to animate to the new destination point.
+ *
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ */
+function useMovingAnimation( { triggerAnimationOnChange } ) {
+	const ref = useRef();
+
+	// Whenever the trigger changes, we need to take a snapshot of the current
+	// position of the block to use it as a destination point for the animation.
+	const { previous, prevRect } = useMemo(
+		() => ( {
+			previous: ref.current && getAbsolutePosition( ref.current ),
+			prevRect: ref.current && ref.current.getBoundingClientRect(),
+		} ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ triggerAnimationOnChange ]
+	);
+
+	useLayoutEffect( () => {
+		if ( ! previous || ! ref.current ) {
+			return;
+		}
+
+		// We disable the animation if the user has a preference for reduced
+		// motion.
+		const disableAnimation = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches;
+
+		if ( disableAnimation ) {
+			return;
+		}
+
+		const controller = new Controller( {
+			x: 0,
+			y: 0,
+			width: prevRect.width,
+			height: prevRect.height,
+			config: { duration: ANIMATION_DURATION },
+			onChange( { value } ) {
+				if ( ! ref.current ) {
+					return;
+				}
+				let { x, y, width, height } = value;
+				x = Math.round( x );
+				y = Math.round( y );
+				width = Math.round( width );
+				height = Math.round( height );
+				const finishedMoving = x === 0 && y === 0;
+				ref.current.style.transformOrigin = 'center center';
+				ref.current.style.transform = finishedMoving
+					? null // Set to `null` to explicitly remove the transform.
+					: `translate3d(${ x }px,${ y }px,0)`;
+				ref.current.style.width = finishedMoving
+					? null
+					: `${ width }px`;
+				ref.current.style.height = finishedMoving
+					? null
+					: `${ height }px`;
+			},
+		} );
+
+		ref.current.style.transform = undefined;
+		const destination = ref.current.getBoundingClientRect();
+
+		const x = Math.round( prevRect.left - destination.left );
+		const y = Math.round( prevRect.top - destination.top );
+		const width = destination.width;
+		const height = destination.height;
+
+		controller.start( {
+			x: 0,
+			y: 0,
+			width,
+			height,
+			from: { x, y, width: prevRect.width, height: prevRect.height },
+		} );
+
+		return () => {
+			controller.stop();
+			controller.set( {
+				x: 0,
+				y: 0,
+				width: prevRect.width,
+				height: prevRect.height,
+			} );
+		};
+	}, [ previous, prevRect ] );
+
+	return ref;
+}
+
+export default useMovingAnimation;

package/src/components/layout/index.js

@@ -51,12 +51,13 @@ import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
+import useMovingAnimation from './animation';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-const ANIMATION_DURATION = 0.5;
+const ANIMATION_DURATION = 0.3;
 
 export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
@@ -114,7 +115,10 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const animationRef = useMovingAnimation( {
+		triggerAnimationOnChange: canvasMode + '__' + routeKey,
+	} );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -239,7 +243,9 @@ export default function Layout() {
 								} }
 								transition={ {
 									type: 'tween',
-									duration: disableMotion ? 0 : 0.2,
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 							>
@@ -315,22 +321,7 @@ export default function Layout() {
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
 							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration: disableMotion
-															? 0
-															: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
+								<div
 									className={ classnames(
 										'edit-site-layout__canvas',
 										{
@@ -338,13 +329,7 @@ export default function Layout() {
 												isResizableFrameOversized,
 										}
 									) }
-									transition={ {
-										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+									ref={ animationRef }
 								>
 									<ErrorBoundary>
 										<ResizableFrame
@@ -373,7 +358,7 @@ export default function Layout() {
 											{ areas.preview }
 										</ResizableFrame>
 									</ErrorBoundary>
-								</motion.div>
+								</div>
 							) }
 						</div>
 					) }