@wordpress/edit-site 5.9.0 → 5.11.0

package/src/components/resizable-frame/index.js

@@ -0,0 +1,253 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+import {
+	ResizableBox,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDE = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+// The minimum width of the frame (in px) while resizing.
+const FRAME_MIN_WIDTH = 340;
+// The reference width of the frame (in px) used to calculate the aspect ratio.
+const FRAME_REFERENCE_WIDTH = 1300;
+// 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
+const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;
+// The minimum distance (in px) between the frame resize handle and the
+// viewport's edge. If the frame is resized to be closer to the viewport's edge
+// than this distance, then "canvas mode" will be enabled.
+const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+
+function calculateNewHeight( width, initialAspectRatio ) {
+	const lerp = ( a, b, amount ) => {
+		return a + ( b - a ) * amount;
+	};
+
+	// Calculate the intermediate aspect ratio based on the current width.
+	const lerpFactor =
+		1 -
+		Math.max(
+			0,
+			Math.min(
+				1,
+				( width - FRAME_MIN_WIDTH ) /
+					( FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH )
+			)
+		);
+
+	// Calculate the height based on the intermediate aspect ratio
+	// ensuring the frame arrives at the target aspect ratio.
+	const intermediateAspectRatio = lerp(
+		initialAspectRatio,
+		FRAME_TARGET_ASPECT_RATIO,
+		lerpFactor
+	);
+
+	return width / intermediateAspectRatio;
+}
+
+function ResizableFrame( {
+	isFullWidth,
+	isReady,
+	children,
+	oversizedClassName,
+} ) {
+	const [ frameSize, setFrameSize ] = useState( {
+		width: '100%',
+		height: '100%',
+	} );
+	// The width of the resizable frame when a new resize gesture starts.
+	const [ startingWidth, setStartingWidth ] = useState();
+	const [ isResizing, setIsResizing ] = useState( false );
+	const [ isHovering, setIsHovering ] = useState( false );
+	const [ isOversized, setIsOversized ] = useState( false );
+	const [ resizeRatio, setResizeRatio ] = useState( 1 );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const initialAspectRatioRef = useRef( null );
+	// The width of the resizable frame on initial render.
+	const initialComputedWidthRef = useRef( null );
+	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
+	const frameRef = useRef( null );
+
+	// Remember frame dimensions on initial render.
+	useEffect( () => {
+		const { offsetWidth, offsetHeight } = frameRef.current.resizable;
+		initialComputedWidthRef.current = offsetWidth;
+		initialAspectRatioRef.current = offsetWidth / offsetHeight;
+	}, [] );
+
+	const handleResizeStart = ( _event, _direction, ref ) => {
+		// Remember the starting width so we don't have to get `ref.offsetWidth` on
+		// every resize event thereafter, which will cause layout thrashing.
+		setStartingWidth( ref.offsetWidth );
+		setIsResizing( true );
+	};
+
+	// Calculate the frame size based on the window width as its resized.
+	const handleResize = ( _event, _direction, _ref, delta ) => {
+		const normalizedDelta = delta.width / resizeRatio;
+		const deltaAbs = Math.abs( normalizedDelta );
+		const maxDoubledDelta =
+			delta.width < 0 // is shrinking
+				? deltaAbs
+				: ( initialComputedWidthRef.current - startingWidth ) / 2;
+		const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );
+		const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
+		const singleSegment = 1 - doubleSegment;
+
+		setResizeRatio( singleSegment + doubleSegment * 2 );
+
+		const updatedWidth = startingWidth + delta.width;
+
+		setIsOversized( updatedWidth > initialComputedWidthRef.current );
+
+		// Width will be controlled by the library (via `resizeRatio`),
+		// so we only need to update the height.
+		setFrameSize( {
+			height: isOversized
+				? '100%'
+				: calculateNewHeight(
+						updatedWidth,
+						initialAspectRatioRef.current
+				  ),
+		} );
+	};
+
+	const handleResizeStop = ( _event, _direction, ref ) => {
+		setIsResizing( false );
+
+		if ( ! isOversized ) {
+			return;
+		}
+
+		setIsOversized( false );
+
+		const remainingWidth =
+			ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
+
+		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
+			// Reset the initial aspect ratio if the frame is resized slightly
+			// above the sidebar but not far enough to trigger full screen.
+			setFrameSize( { width: '100%', height: '100%' } );
+		} else {
+			// Trigger full screen if the frame is resized far enough to the left.
+			setCanvasMode( 'edit' );
+		}
+	};
+
+	const frameAnimationVariants = {
+		default: {
+			flexGrow: 0,
+			height: frameSize.height,
+		},
+		fullWidth: {
+			flexGrow: 1,
+			height: frameSize.height,
+		},
+	};
+
+	return (
+		<ResizableBox
+			as={ motion.div }
+			ref={ frameRef }
+			initial={ false }
+			variants={ frameAnimationVariants }
+			animate={ isFullWidth ? 'fullWidth' : 'default' }
+			onAnimationComplete={ ( definition ) => {
+				if ( definition === 'fullWidth' )
+					setFrameSize( { width: '100%', height: '100%' } );
+			} }
+			transition={ FRAME_TRANSITION }
+			size={ frameSize }
+			enable={ {
+				top: false,
+				right: false,
+				bottom: false,
+				// Resizing will be disabled until the editor content is loaded.
+				left: isReady,
+				topRight: false,
+				bottomRight: false,
+				bottomLeft: false,
+				topLeft: false,
+			} }
+			resizeRatio={ resizeRatio }
+			handleClasses={ undefined }
+			handleStyles={ {
+				left: HANDLE_STYLES_OVERRIDE,
+				right: HANDLE_STYLES_OVERRIDE,
+			} }
+			minWidth={ FRAME_MIN_WIDTH }
+			maxWidth={ isFullWidth ? '100%' : '150%' }
+			maxHeight={ '100%' }
+			onMouseOver={ () => setIsHovering( true ) }
+			onMouseOut={ () => setIsHovering( false ) }
+			handleComponent={ {
+				left:
+					isHovering || isResizing ? (
+						<motion.div
+							key="handle"
+							className="edit-site-resizable-frame__handle"
+							title="Drag to resize"
+							initial={ {
+								opacity: 0,
+								left: 0,
+							} }
+							animate={ {
+								opacity: 1,
+								left: -15,
+							} }
+							exit={ {
+								opacity: 0,
+								left: 0,
+							} }
+							whileHover={ { scale: 1.1 } }
+						/>
+					) : null,
+			} }
+			onResizeStart={ handleResizeStart }
+			onResize={ handleResize }
+			onResizeStop={ handleResizeStop }
+			className={ classnames( 'edit-site-resizable-frame__inner', {
+				'is-resizing': isResizing,
+				[ oversizedClassName ]: isOversized,
+			} ) }
+		>
+			<motion.div
+				className="edit-site-resizable-frame__inner-content"
+				animate={ {
+					borderRadius: isFullWidth ? 0 : 8,
+				} }
+				transition={ FRAME_TRANSITION }
+			>
+				{ children }
+			</motion.div>
+		</ResizableBox>
+	);
+}
+
+export default ResizableFrame;

package/src/components/resizable-frame/style.scss

@@ -0,0 +1,69 @@
+.edit-site-resizable-frame__inner {
+	position: relative;
+
+	&.is-resizing {
+		@at-root {
+			body:has(&) {
+				cursor: col-resize;
+				user-select: none;
+				-webkit-user-select: none;
+			}
+		}
+
+		&::before {
+			// This covers the whole content which ensures mouse up triggers
+			// even if the content is "inert".
+			position: absolute;
+			z-index: 1;
+			inset: 0;
+			content: "";
+		}
+	}
+}
+
+.edit-site-resizable-frame__inner-content {
+	position: absolute;
+	z-index: 0;
+	inset: 0;
+}
+
+.edit-site-resizable-frame__handle {
+	position: absolute;
+	width: 5px;
+	height: 50px;
+	background-color: rgba(255, 255, 255, 0.3);
+	z-index: 100;
+	border-radius: 5px;
+	cursor: col-resize;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	top: 50%;
+	&::before {
+		position: absolute;
+		left: 100%;
+		height: 100%;
+		width: $grid-unit-30;
+		content: "";
+	}
+
+	&::after {
+		position: absolute;
+		right: 100%;
+		height: 100%;
+		width: $grid-unit-30;
+		content: "";
+	}
+
+	&:hover {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	.edit-site-resizable-frame__handle-label {
+		border-radius: 2px;
+		background: var(--wp-admin-theme-color);
+		padding: 4px 8px;
+		color: #fff;
+		margin-right: $grid-unit-10;
+	}
+}

package/src/components/revisions/index.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../private-apis';
+import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
+import EditorCanvasContainer from '../editor-canvas-container';
+
+const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
+	unlock( blockEditorPrivateApis );
+
+function Revisions( { onClose, userConfig, blocks } ) {
+	const { baseConfig } = useSelect(
+		( select ) => ( {
+			baseConfig:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		} ),
+		[]
+	);
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const renderedBlocksArray = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const editorStyles =
+		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
+	return (
+		<EditorCanvasContainer
+			title={ __( 'Revisions' ) }
+			onClose={ onClose }
+			closeButtonLabel={ __( 'Close revisions' ) }
+			enableResizing={ true }
+		>
+			<Iframe
+				className="edit-site-revisions__iframe"
+				name="revisions"
+				tabIndex={ 0 }
+			>
+				<EditorStyles styles={ editorStyles } />
+				<style>
+					{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
+					}
+				</style>
+				<Disabled className="edit-site-revisions__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocksArray }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</Iframe>
+		</EditorCanvasContainer>
+	);
+}
+
+export default Revisions;

package/src/components/routes/link.js

@@ -2,11 +2,18 @@
  * WordPress dependencies
  */
 import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from './index';
+import { unlock } from '../../private-apis';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export function useLink( params = {}, state, shouldReplace = false ) {
 	const history = useHistory();
@@ -26,6 +33,14 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 		window.location.href,
 		...Object.keys( currentArgs )
 	);
+
+	if ( isPreviewingTheme() ) {
+		params = {
+			...params,
+			theme_preview: currentlyPreviewingTheme(),
+		};
+	}
+
 	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
 
 	return {

package/src/components/routes/use-title.js

@@ -7,11 +7,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from './index';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useTitle( title ) {
 	const location = useLocation();

package/src/components/save-button/index.js

@@ -11,8 +11,14 @@ import { displayShortcut } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
+export default function SaveButton( {
+	className = 'edit-site-save-button__button',
+	variant = 'primary',
+	showTooltip = true,
+	icon,
+} ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
@@ -28,14 +34,28 @@ export default function SaveButton() {
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
-	const disabled = ! isDirty || isSaving;
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 
-	const label = __( 'Save' );
+	const getLabel = () => {
+		if ( disabled ) {
+			return __( 'Saved' );
+		}
+
+		if ( isPreviewingTheme() && isDirty ) {
+			return __( 'Activate & Save' );
+		} else if ( isPreviewingTheme() ) {
+			return __( 'Activate' );
+		}
+
+		return __( 'Save' );
+	};
+	const label = getLabel();
 
 	return (
 		<Button
-			variant="primary"
-			className="edit-site-save-button__button"
+			variant={ variant }
+			className={ className }
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
@@ -52,7 +72,8 @@ export default function SaveButton() {
 			 * of the button that we want to avoid. By setting `showTooltip`,
 			 & the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
-			showTooltip
+			showTooltip={ showTooltip }
+			icon={ icon }
 		>
 			{ label }
 		</Button>

package/src/components/save-hub/index.js

@@ -1,41 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
-import { sprintf, __, _n } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { sprintf, _n } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { displayShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import SaveButton from '../save-button';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
-	const { countUnsavedChanges, isDirty, isSaving, isSaveViewOpen } =
-		useSelect( ( select ) => {
+export default function SaveHub() {
+	const { countUnsavedChanges, isDirty, isSaving } = useSelect(
+		( select ) => {
 			const {
 				__experimentalGetDirtyEntityRecords,
 				isSavingEntityRecord,
 			} = select( coreStore );
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const { isSaveViewOpened } = select( editSiteStore );
 			return {
 				isDirty: dirtyEntityRecords.length > 0,
 				isSaving: dirtyEntityRecords.some( ( record ) =>
 					isSavingEntityRecord( record.kind, record.name, record.key )
 				),
-				isSaveViewOpen: isSaveViewOpened(),
 				countUnsavedChanges: dirtyEntityRecords.length,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const disabled = ! isDirty || isSaving;
+		},
+		[]
+	);
 
-	const label = disabled ? __( 'Saved' ) : __( 'Save' );
+	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
 
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
@@ -52,27 +49,12 @@ export default function SaveButton() {
 					) }
 				</span>
 			) }
-			<Button
+			<SaveButton
 				className="edit-site-save-hub__button"
-				variant={ disabled ? undefined : 'primary' }
-				aria-disabled={ disabled }
-				aria-expanded={ isSaveViewOpen }
-				isBusy={ isSaving }
-				onClick={
-					disabled ? undefined : () => setIsSaveViewOpened( true )
-				}
-				label={ label }
-				/*
-				 * We want the tooltip to show the keyboard shortcut only when the
-				 * button does something, i.e. when it's not disabled.
-				 */
-				shortcut={
-					disabled ? undefined : displayShortcut.primary( 's' )
-				}
-				icon={ disabled ? check : undefined }
-			>
-				{ label }
-			</Button>
+				variant={ disabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ disabled ? check : null }
+			/>
 		</HStack>
 	);
 }

package/src/components/save-panel/index.js

@@ -17,6 +17,7 @@ import { NavigableRegion } from '@wordpress/interface';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import { useActivateTheme } from '../../utils/use-activate-theme';
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -32,7 +33,18 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
+		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
+	) : (
+		<EntitiesSavedStates close={ onClose } />
+	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -44,7 +56,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				<EntitiesSavedStates close={ onClose } />
+				{ entitySavedStates }
 			</Modal>
 		) : null;
 	}
@@ -54,10 +66,10 @@ export default function SavePanel() {
 			className={ classnames( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
-			ariaLabel={ __( 'Save sidebar' ) }
+			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				<EntitiesSavedStates close={ onClose } />
+				entitySavedStates
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button