@wordpress/edit-site 5.1.0 → 5.2.0

package/src/components/layout/index.js

@@ -11,6 +11,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	ResizableBox,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -18,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -35,13 +36,28 @@ import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
+import ResizeHandle from '../block-editor/resize-handle';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const ANIMATION_DURATION = 0.5;
+const emptyResizeHandleStyles = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
 
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
+	useSyncCanvasModeWithURL();
 
+	const hubRef = useRef();
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
@@ -86,6 +102,14 @@ export default function Layout( { onError } ) {
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
+	const [ forcedWidth, setForcedWidth ] = useState( null );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const isResizingEnabled = ! isMobileViewport && canvasMode === 'view';
+	const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
+	let canvasWidth = isResizing ? '100%' : fullSize.width;
+	if ( showFrame && ! isResizing ) {
+		canvasWidth = canvasSize.width - canvasPadding;
+	}
 	useEffect( () => {
 		if ( canvasMode === 'view' && isMobileViewport ) {
 			setIsMobileCanvasVisible( false );
@@ -96,6 +120,13 @@ export default function Layout( { onError } ) {
 		}
 	}, [ canvasMode, isMobileViewport ] );
 
+	// Synchronizing the URL with the store value of canvasMode happens in an effect
+	// This condition ensures the component is only rendered after the synchronization happens
+	// which prevents any animations due to potential canvasMode value change.
+	if ( canvasMode === 'init' ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ fullResizer }
@@ -112,7 +143,14 @@ export default function Layout( { onError } ) {
 				) }
 			>
 				<SiteHub
+					ref={ hubRef }
 					className="edit-site-layout__hub"
+					style={ {
+						width:
+							isResizingEnabled && forcedWidth
+								? forcedWidth - 48
+								: undefined,
+					} }
 					isMobileCanvasVisible={ isMobileCanvasVisible }
 					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
@@ -149,7 +187,7 @@ export default function Layout( { onError } ) {
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
 						{ showSidebar && (
-							<NavigableRegion
+							<ResizableBox
 								as={ motion.div }
 								initial={ {
 									opacity: 0,
@@ -162,22 +200,73 @@ export default function Layout( { onError } ) {
 								} }
 								transition={ {
 									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
+									duration:
+										disableMotion || isResizing
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
+								size={ {
+									height: '100%',
+									width:
+										isResizingEnabled && forcedWidth
+											? forcedWidth
+											: defaultSidebarWidth,
+								} }
 								className="edit-site-layout__sidebar"
-								ariaLabel={ __( 'Navigation sidebar' ) }
+								enable={ {
+									right: isResizingEnabled,
+								} }
+								onResizeStop={ ( event, direction, elt ) => {
+									setForcedWidth( elt.clientWidth );
+									setIsResizing( false );
+								} }
+								onResizeStart={ () => {
+									setIsResizing( true );
+								} }
+								onResize={ ( event, direction, elt ) => {
+									// This is a performance optimization
+									// We set the width imperatively to avoid re-rendering
+									// the whole component while resizing.
+									hubRef.current.style.width =
+										elt.clientWidth - 48 + 'px';
+								} }
+								handleComponent={ {
+									right: (
+										<ResizeHandle
+											direction="right"
+											variation="separator"
+										/>
+									),
+								} }
+								handleClasses={ undefined }
+								handleStyles={ {
+									right: emptyResizeHandleStyles,
+								} }
+								minWidth={ isResizingEnabled ? 320 : undefined }
+								maxWidth={
+									isResizingEnabled && fullSize
+										? fullSize.width - 360
+										: undefined
+								}
 							>
-								<Sidebar />
-							</NavigableRegion>
+								<NavigableRegion
+									ariaLabel={ __( 'Navigation sidebar' ) }
+								>
+									<Sidebar />
+								</NavigableRegion>
+							</ResizableBox>
 						) }
 					</AnimatePresence>
 
 					{ showCanvas && (
 						<div
-							className="edit-site-layout__canvas-container"
+							className={ classnames(
+								'edit-site-layout__canvas-container',
+								{
+									'is-resizing': isResizing,
+								}
+							) }
 							style={ {
 								paddingTop: showFrame ? canvasPadding : 0,
 								paddingBottom: showFrame ? canvasPadding : 0,
@@ -191,9 +280,10 @@ export default function Layout( { onError } ) {
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
+										duration:
+											disableMotion || isResizing
+												? 0
+												: ANIMATION_DURATION,
 										ease: 'easeOut',
 									} }
 								>
@@ -206,16 +296,14 @@ export default function Layout( { onError } ) {
 										} }
 										initial={ false }
 										animate={ {
-											width: showFrame
-												? canvasSize.width -
-												  canvasPadding
-												: fullSize.width,
+											width: canvasWidth,
 										} }
 										transition={ {
 											type: 'tween',
-											duration: disableMotion
-												? 0
-												: ANIMATION_DURATION,
+											duration:
+												disableMotion || isResizing
+													? 0
+													: ANIMATION_DURATION,
 											ease: 'easeOut',
 										} }
 									>

package/src/components/layout/style.scss

@@ -63,6 +63,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 .edit-site-layout__content {
 	flex-grow: 1;
 	display: flex;
+	gap: $canvas-padding;
 
 	// Hide scrollbars during the edit/view animation.
 	overflow: hidden;
@@ -70,9 +71,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
-	overflow-y: auto;
 	width: 100vw;
-	@include custom-scrollbars-on-hover;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -80,17 +79,39 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
-		position: fixed;
+		position: fixed !important;
 		height: 100vh;
 		left: 0;
 		top: 0;
 	}
+
+	.resizable-editor__drag-handle.is-right {
+		right: math.div(-$grid-unit-15, 2);
+	}
+
+	> div {
+		overflow-y: auto;
+		min-height: 100%;
+		@include custom-scrollbars-on-hover;
+	}
 }
 
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	&.is-resizing::after {
+		// This covers the whole content which ensures mouse up triggers
+		// even if the content is "inert".
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
+	}
 }
 
 .edit-site-layout__canvas {
@@ -99,12 +120,13 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 
 	& > div {
 		color: $gray-900;
 		background: $white;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
+
 	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
@@ -125,7 +147,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 		bottom: 0;
 		width: 100%;
-		border-radius: 0;
+
+		& > div {
+			border-radius: 0;
+		}
 	}
 }
 

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js

@@ -180,6 +180,8 @@ export default function NavigationInspector() {
 			) }
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
+					__nextHasNoMarginBottom
+					className="edit-site-navigation-inspector__select-menu"
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss

@@ -22,6 +22,10 @@
 	.block-editor-list-view-block__menu-cell {
 		padding-right: 0;
 	}
+
+	.edit-site-navigation-inspector__select-menu {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {

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

@@ -17,6 +17,7 @@ import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,122 +30,132 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-function SiteHub( {
-	className,
-	isMobileCanvasVisible,
-	setIsMobileCanvasVisible,
-} ) {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink, entityConfig } = useSelect(
-		( select ) => {
-			select( editSiteStore ).getEditedPostType();
-			const { __unstableGetCanvasMode, getSettings, getEditedPostType } =
-				select( editSiteStore );
-			return {
-				canvasMode: __unstableGetCanvasMode(),
-				dashboardLink: getSettings().__experimentalDashboardLink,
-				entityConfig: select( coreStore ).getEntityConfig(
-					'postType',
-					getEditedPostType()
-				),
-			};
-		},
-		[]
-	);
-	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const showEditButton =
-		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
-		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
-	const isBackToDashboardButton =
-		( ! isMobileViewport && canvasMode === 'view' ) ||
-		( isMobileViewport && ! isMobileCanvasVisible );
-	const showLabels = canvasMode !== 'edit';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setIsMobileCanvasVisible( false );
-					__unstableSetCanvasMode( 'view' );
-				},
-		  };
-	const { getTitle } = useEditedEntityRecord();
+const SiteHub = forwardRef(
+	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
+		const { params } = useLocation();
+		const isListPage = getIsListPage( params );
+		const isEditorPage = ! isListPage;
+		const { canvasMode, dashboardLink, entityConfig } = useSelect(
+			( select ) => {
+				select( editSiteStore ).getEditedPostType();
+				const {
+					__unstableGetCanvasMode,
+					getSettings,
+					getEditedPostType,
+				} = select( editSiteStore );
+				return {
+					canvasMode: __unstableGetCanvasMode(),
+					dashboardLink: getSettings().__experimentalDashboardLink,
+					entityConfig: select( coreStore ).getEntityConfig(
+						'postType',
+						getEditedPostType()
+					),
+				};
+			},
+			[]
+		);
+		const disableMotion = useReducedMotion();
+		const isMobileViewport = useViewportMatch( 'medium', '<' );
+		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { clearSelectedBlock } = useDispatch( blockEditorStore );
+		const showEditButton =
+			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+			( isMobileViewport &&
+				canvasMode === 'view' &&
+				isMobileCanvasVisible );
+		const isBackToDashboardButton =
+			( ! isMobileViewport && canvasMode === 'view' ) ||
+			( isMobileViewport && ! isMobileCanvasVisible );
+		const showLabels = canvasMode !== 'edit';
+		const siteIconButtonProps = isBackToDashboardButton
+			? {
+					href: dashboardLink || 'index.php',
+					'aria-label': __( 'Go back to the dashboard' ),
+			  }
+			: {
+					label: __( 'Open Navigation Sidebar' ),
+					onClick: () => {
+						clearSelectedBlock();
+						setIsMobileCanvasVisible( false );
+						__unstableSetCanvasMode( 'view' );
+					},
+			  };
+		const { getTitle } = useEditedEntityRecord();
 
-	return (
-		<motion.div
-			className={ classnames( 'edit-site-site-hub', className ) }
-			layout
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
+		return (
+			<motion.div
+				ref={ ref }
+				{ ...props }
+				className={ classnames(
+					'edit-site-site-hub',
+					props.className
+				) }
+				layout
+				transition={ {
+					type: 'tween',
+					duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+					ease: 'easeOut',
+				} }
 			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
 				>
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</motion.div>
+
+					{ showLabels && (
+						<VStack spacing={ 0 }>
+							<div className="edit-site-site-hub__title">
+								{ getTitle() }
+							</div>
+							<div className="edit-site-site-hub__post-type">
+								{ entityConfig?.label }
+							</div>
+						</VStack>
+					) }
+				</HStack>
+
+				{ showEditButton && (
 					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+						className="edit-site-site-hub__edit-button"
+						label={ __( 'Open the editor' ) }
+						onClick={ () => {
+							__unstableSetCanvasMode( 'edit' );
+						} }
+						variant="primary"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						{ __( 'Edit' ) }
 					</Button>
-				</motion.div>
-
-				{ showLabels && (
-					<VStack spacing={ 0 }>
-						<div className="edit-site-site-hub__title">
-							{ getTitle() }
-						</div>
-						<div className="edit-site-site-hub__post-type">
-							{ entityConfig?.label }
-						</div>
-					</VStack>
 				) }
-			</HStack>
-
-			{ showEditButton && (
-				<Button
-					className="edit-site-site-hub__edit-button"
-					label={ __( 'Open the editor' ) }
-					onClick={ () => {
-						__unstableSetCanvasMode( 'edit' );
-					} }
-					variant="primary"
-				>
-					{ __( 'Edit' ) }
-				</Button>
-			) }
 
-			{ isMobileViewport && ! isMobileCanvasVisible && (
-				<Button
-					onClick={ () => setIsMobileCanvasVisible( true ) }
-					variant="primary"
-				>
-					{ __( 'View Editor' ) }
-				</Button>
-			) }
-		</motion.div>
-	);
-}
+				{ isMobileViewport && ! isMobileCanvasVisible && (
+					<Button
+						onClick={ () => setIsMobileCanvasVisible( true ) }
+						variant="primary"
+					>
+						{ __( 'View Editor' ) }
+					</Button>
+				) }
+			</motion.div>
+		);
+	}
+);
 
 export default SiteHub;

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncCanvasModeWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const canvasMode = useSelect(
+		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const currentCanvasMode = useRef( canvasMode );
+	const { canvas: canvasInUrl = 'view' } = params;
+	const currentCanvasInUrl = useRef( canvasInUrl );
+	useEffect( () => {
+		currentCanvasMode.current = canvasMode;
+		if ( currentCanvasMode !== currentCanvasInUrl ) {
+			history.push( {
+				...params,
+				canvas: canvasMode,
+			} );
+		}
+	}, [ canvasMode ] );
+
+	useEffect( () => {
+		currentCanvasInUrl.current = canvasInUrl;
+		if ( canvasInUrl !== currentCanvasMode.current ) {
+			__unstableSetCanvasMode( canvasInUrl );
+		}
+	}, [ canvasInUrl ] );
+}

package/src/components/template-details/edit-template-title.js

@@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
 			help={

package/src/components/template-details/template-part-area-selector.js

@@ -28,6 +28,7 @@ export default function TemplatePartAreaSelector( { id } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }

package/src/hooks/push-changes-to-global-styles/index.js

@@ -97,7 +97,7 @@ function PushChangesToGlobalStylesControl( {
 		createSuccessNotice(
 			sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
-				__( 'Pushed styles to all %s blocks.' ),
+				__( '%s styles applied.' ),
 				getBlockType( name ).title
 			),
 			{
@@ -124,7 +124,7 @@ function PushChangesToGlobalStylesControl( {
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
 				__(
-					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
 				),
 				getBlockType( name ).title
 			) }
@@ -137,7 +137,7 @@ function PushChangesToGlobalStylesControl( {
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
-				{ __( 'Push changes to Global Styles' ) }
+				{ __( 'Apply globally' ) }
 			</Button>
 		</BaseControl>
 	);

package/src/store/reducer.js

@@ -131,7 +131,7 @@ export function saveViewPanel( state = false, action ) {
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  */
-function canvasMode( state = 'view', action ) {
+function canvasMode( state = 'init', action ) {
 	switch ( action.type ) {
 		case 'SET_CANVAS_MODE':
 			return action.mode;