@wordpress/edit-site 5.31.0 → 5.33.0

package/src/components/global-styles/screen-style-variations.js

@@ -3,9 +3,7 @@
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZoomOut } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,43 +12,13 @@ import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { mode } = useSelect( ( select ) => {
-		return {
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
-		};
-	}, [] );
-
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
-	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
-	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
-			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
 
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a variation to change the look of the site.'

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

@@ -26,17 +26,14 @@ function ScreenTypography() {
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the typography settings for different elements.'
+					'Typography styles and the application of those styles on site elements.'
 				) }
 			/>
-			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 6 }>
-					<TypographyVariations />
-					{ ! window.__experimentalDisableFontLibrary && (
-						<VStack spacing={ 3 }>
-							{ fontLibraryEnabled && <FontFamilies /> }
-						</VStack>
-					) }
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations title={ __( 'Presets' ) } />
+					{ ! window.__experimentalDisableFontLibrary &&
+						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/global-styles/style-variations-container.js

@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
 
-export default function StyleVariationsContainer() {
+export default function StyleVariationsContainer( { gap = 2 } ) {
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -39,6 +39,7 @@ export default function StyleVariationsContainer() {
 		<Grid
 			columns={ 2 }
 			className="edit-site-global-styles-style-variations-container"
+			gap={ gap }
 		>
 			{ withEmptyVariation.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>

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

@@ -7,9 +7,9 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui;
-	display: block;
+	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
+	display: block;
 	width: 100%;
 }
 
@@ -29,9 +29,8 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-typography,
-.edit-site-global-styles-screen-css {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen {
+	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
 
 .edit-site-global-styles-screen-typography__indicator {
@@ -52,14 +51,16 @@
 	justify-content: center;
 }
 
-.edit-site-global-styles-screen-colors {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen .color-block-support-panel {
+	padding-left: 0;
+	padding-right: 0;
+	padding-top: 0;
+	border-top: none;
+	row-gap: calc(#{$grid-unit-05} * 3);
+}
 
-	.color-block-support-panel {
-		padding-left: 0;
-		padding-right: 0;
-		border-top: none;
-	}
+.edit-site-global-styles-screen-colors__palette-count {
+	color: $gray-700;
 }
 
 .edit-site-global-styles-header__description {
@@ -115,6 +116,7 @@
 	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
+	margin: $grid-unit-20;
 
 	.components-v-stack {
 		flex: 1 1 auto;

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

@@ -40,6 +40,7 @@ import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
+import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -344,6 +345,10 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ '/background' }>
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }

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

@@ -5,34 +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;
-	}
-
-	&:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	&: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);
 	}
 
-	&: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;
+
+		&::after {
+			box-shadow: inset 0 0 0 1px $white;
+		}
 	}
 }

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

@@ -12,8 +12,9 @@ import {
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
+import Subtitle from '../subtitle';
 
-export default function ColorVariations() {
+export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
 
 	if ( ! colorVariations?.length ) {
@@ -22,7 +23,8 @@ export default function ColorVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Grid columns={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid columns={ 3 } gap={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }

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

@@ -14,8 +14,9 @@ import { useTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
+import Subtitle from '../subtitle';
 
-export default function TypographyVariations() {
+export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
@@ -24,8 +25,10 @@ export default function TypographyVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid
 				columns={ 3 }
+				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations &&

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

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 import {
@@ -44,7 +43,8 @@ import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown, PinnedItems } =
+	unlock( editorPrivateApis );
 
 export default function HeaderEditMode() {
 	const {
@@ -201,9 +201,7 @@ export default function HeaderEditMode() {
 					) }
 					<PostViewLink />
 					<SaveButton size="compact" />
-					{ ! isDistractionFree && (
-						<PinnedItems.Slot scope="core/edit-site" />
-					) }
+					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
 					<MoreMenu showIconLabels={ showIconLabels } />
 				</motion.div>
 			</div>

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

@@ -11,7 +11,6 @@ import {
 	VisuallyHidden,
 	DropdownMenu,
 } from '@wordpress/components';
-import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -25,21 +24,14 @@ import {
 /**
  * Internal dependencies
  */
-import {
-	KEYBOARD_SHORTCUT_HELP_MODAL_NAME,
-	default as KeyboardShortcutHelpModal,
-} from '../../keyboard-shortcut-help-modal';
-import {
-	PREFERENCES_MODAL_NAME,
-	default as EditSitePreferencesModal,
-} from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ModeSwitcher, ActionItem, interfaceStore, PreferencesModal } =
+	unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );
@@ -120,7 +112,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 						<ModeSwitcher />
 						<ActionItem.Slot
-							name="core/edit-site/plugin-more-menu"
+							name="core/plugin-more-menu"
 							label={ __( 'Plugins' ) }
 							as={ MenuGroup }
 							fillProps={ { onClick: onClose } }
@@ -129,9 +121,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							{ isBlockBasedTheme && <SiteExport /> }
 							<MenuItem
 								onClick={ () =>
-									openModal(
-										KEYBOARD_SHORTCUT_HELP_MODAL_NAME
-									)
+									openModal( 'editor/keyboard-shortcut-help' )
 								}
 								shortcut={ displayShortcut.access( 'h' ) }
 							>
@@ -163,7 +153,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						<MenuGroup>
 							<MenuItem
 								onClick={ () =>
-									openModal( PREFERENCES_MODAL_NAME )
+									openModal( 'editor/preferences' )
 								}
 							>
 								{ __( 'Preferences' ) }
@@ -172,8 +162,7 @@ export default function MoreMenu( { showIconLabels } ) {
 					</>
 				) }
 			</DropdownMenu>
-			<KeyboardShortcutHelpModal />
-			<EditSitePreferencesModal />
+			<PreferencesModal />
 		</>
 	);
 }

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() {
-			padding-right: 2px;
+			padding-right: var(--wp-admin-border-width-focus);
+			// Account for the site hub, which is 60x60px.
+			flex-basis: calc(37.5% - 60px);
+			// 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-shortcuts/edit-mode.js

@@ -4,26 +4,9 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
-import { STORE_NAME } from '../../store/constants';
-
 function KeyboardShortcutsEditMode() {
-	const isBlockInspectorOpen = useSelect(
-		( select ) =>
-			select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			) === SIDEBAR_BLOCK,
-		[]
-	);
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
@@ -56,18 +39,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	};
 
-	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isBlockInspectorOpen ) {
-			disableComplementaryArea( STORE_NAME );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		}
-	} );
-
 	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);

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

@@ -20,26 +20,6 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-site/next-region',
 			category: 'global',

package/src/components/layout/animation.js

@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { Controller, easings } 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 = 400;
+
+/**
+ * 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,
+				easing: easings.easeInOutQuint,
+			},
+			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;