@wordpress/edit-site 5.10.0 → 5.12.0

package/src/components/page-content-lock/use-page-content-lock-notifications.js

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Hook that displays notifications that guide the user towards using the
+ * content vs. template editing modes.
+ *
+ * @return {import('react').RefObject<HTMLElement>} Ref which should be passed
+ *                                                  (using useMergeRefs()) to
+ *                                                  the editor iframe canvas.
+ */
+export function usePageContentLockNotifications() {
+	const ref = useEditTemplateNotification();
+	useBackToPageNotification();
+	return ref;
+}
+
+/**
+ * Hook that displays a 'Edit your template to edit this block' notification
+ * when the user is focusing on editing page content and clicks on a locked
+ * template block.
+ *
+ * @return {import('react').RefObject<HTMLElement>} Ref which should be passed
+ *                                                  (using useMergeRefs()) to
+ *                                                  the editor iframe canvas.
+ */
+function useEditTemplateNotification() {
+	const hasPageContentLock = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentLock(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+	return useRefEffect(
+		( node ) => {
+			const handleClick = ( event ) => {
+				if (
+					! alreadySeen.current &&
+					hasPageContentLock &&
+					event.target.classList.contains( 'is-root-container' )
+				) {
+					createInfoNotice(
+						__( 'Edit your template to edit this block' ),
+						{
+							isDismissible: true,
+							type: 'snackbar',
+							actions: [
+								{
+									label: __( 'Edit template' ),
+									onClick: () =>
+										setHasPageContentLock( false ),
+								},
+							],
+						}
+					);
+					alreadySeen.current = true;
+				}
+			};
+			node.addEventListener( 'click', handleClick );
+			return () => node.removeEventListener( 'click', handleClick );
+		},
+		[
+			hasPageContentLock,
+			alreadySeen,
+			createInfoNotice,
+			setHasPageContentLock,
+		]
+	);
+}
+
+/**
+ * Hook that displays a 'You are editing a template' notification when the user
+ * switches from focusing on editing page content to editing a template.
+ */
+function useBackToPageNotification() {
+	const hasPageContentLock = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentLock(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+	const prevHasPageContentLock = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if (
+			! alreadySeen.current &&
+			prevHasPageContentLock.current &&
+			! hasPageContentLock
+		) {
+			createInfoNotice( __( 'You are editing a template' ), {
+				isDismissible: true,
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Back to page' ),
+						onClick: () => setHasPageContentLock( true ),
+					},
+				],
+			} );
+			alreadySeen.current = true;
+		}
+		prevHasPageContentLock.current = hasPageContentLock;
+	}, [
+		alreadySeen,
+		prevHasPageContentLock,
+		hasPageContentLock,
+		createInfoNotice,
+		setHasPageContentLock,
+	] );
+}

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

@@ -0,0 +1,263 @@
+/**
+ * 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,
+		},
+	};
+
+	const resizeHandleVariants = {
+		default: {
+			opacity: 1,
+			left: -16,
+		},
+		resizing: {
+			opacity: 1,
+			left: -16,
+			scaleY: 1.3,
+		},
+	};
+
+	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"
+							variants={ resizeHandleVariants }
+							animate={ isResizing ? 'resizing' : 'default' }
+							title="Drag to resize"
+							initial={ {
+								opacity: 0,
+								left: 0,
+							} }
+							exit={ {
+								opacity: 0,
+								left: 0,
+							} }
+							whileHover={ { scaleY: 1.3 } }
+						/>
+					) : 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,71 @@
+.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 {
+	align-items: center;
+	background-color: rgba($gray-700, 0.4);
+	border-radius: $grid-unit-05;
+	cursor: col-resize;
+	display: flex;
+	height: $grid-unit-80;
+	justify-content: flex-end;
+	position: absolute;
+	top: calc(50% - #{$grid-unit-40});
+	width: $grid-unit-05;
+	z-index: 100;
+
+	&::before {
+		content: "";
+		height: 100%;
+		left: 100%;
+		position: absolute;
+		width: $grid-unit-40;
+	}
+
+	&::after {
+		content: "";
+		height: 100%;
+		position: absolute;
+		right: 100%;
+		width: $grid-unit-40;
+	}
+
+	&:hover,
+	.is-resizing & {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	.edit-site-resizable-frame__handle-label {
+		background: var(--wp-admin-theme-color);
+		border-radius: 2px;
+		color: #fff;
+		margin-right: $grid-unit-10;
+		padding: 4px 8px;
+	}
+}

package/src/components/revisions/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,6 +25,10 @@ import EditorCanvasContainer from '../editor-canvas-container';
 const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
 	unlock( blockEditorPrivateApis );
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 function Revisions( { onClose, userConfig, blocks } ) {
 	const { baseConfig } = useSelect(
 		( select ) => ( {
@@ -42,7 +41,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	);
 
 	const mergedConfig = useMemo( () => {
-		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
 			return mergeBaseAndUserConfigs( baseConfig, userConfig );
 		}
 		return {};
@@ -65,7 +64,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
 
 	const editorStyles =
-		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
 			? globalStyles
 			: settings.styles;
 
@@ -74,6 +73,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 			title={ __( 'Revisions' ) }
 			onClose={ onClose }
 			closeButtonLabel={ __( 'Close revisions' ) }
+			enableResizing={ true }
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"

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

@@ -17,6 +17,7 @@ export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
+	defaultLabel,
 	icon,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
@@ -38,10 +39,15 @@ export default function SaveButton( {
 	const disabled = isSaving || ! activateSaveEnabled;
 
 	const getLabel = () => {
+		if ( isSaving ) {
+			return __( 'Saving' );
+		}
 		if ( disabled ) {
 			return __( 'Saved' );
 		}
 
+		if ( defaultLabel ) return defaultLabel;
+
 		if ( isPreviewingTheme() && isDirty ) {
 			return __( 'Activate & Save' );
 		} else if ( isPreviewingTheme() ) {