@wordpress/edit-site 5.10.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

@@ -74,6 +74,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 			title={ __( 'Revisions' ) }
 			onClose={ onClose }
 			closeButtonLabel={ __( 'Close revisions' ) }
+			enableResizing={ true }
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -19,6 +19,8 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
@@ -31,7 +33,6 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div

package/src/components/sidebar/index.js

@@ -18,10 +18,10 @@ import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
-import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 import { unlock } from '../../private-apis';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
@@ -39,12 +39,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
 			</NavigatorScreen>
+			<NavigatorScreen path="/navigation/:postType/:postId">
+				<SidebarNavigationScreenNavigationMenu />
+			</NavigatorScreen>
 			<NavigatorScreen path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
 			</NavigatorScreen>
-			<NavigatorScreen path="/navigation/:postType/:postId">
-				<SidebarNavigationScreenNavigationItem />
-			</NavigatorScreen>
 			<NavigatorScreen path="/page">
 				<SidebarNavigationScreenPages />
 			</NavigatorScreen>

package/src/components/sidebar-edit-mode/template-revisions/index.js

@@ -19,8 +19,7 @@ const useRevisionData = () => {
 		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
 
 	const revisionsCount =
-		( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +
-		1;
+		currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 
 	return {
 		currentTemplate,

package/src/components/sidebar-navigation-item/style.scss

@@ -19,6 +19,15 @@
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
 		fill: $gray-700;
 	}
+
+	&:is(a) {
+		text-decoration: none;
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {

package/src/components/sidebar-navigation-screen/style.scss

@@ -6,7 +6,7 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
+	margin: 0 0 $grid-unit-20 0;
 	color: $gray-600;
 	//z-index: z-index(".edit-site-sidebar-navigation-screen__content");
 }
@@ -34,7 +34,6 @@
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
-	padding-right: $grid-unit-20;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,8 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { edit, seen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,29 +16,111 @@ import StyleVariationsContainer from '../global-styles/style-variations-containe
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import StyleBook from '../style-book';
 
-export default function SidebarNavigationScreenGlobalStyles() {
+export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+		[]
+	);
+	if ( hasGlobalStyleVariations ) {
+		return (
+			<NavigatorButton
+				{ ...props }
+				as={ SidebarNavigationItem }
+				path="/wp_global_styles"
+			/>
+		);
+	}
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Styles' ) }
-			description={ __(
-				'Choose a different style combination for the theme styles.'
-			) }
-			content={ <StyleVariationsContainer /> }
-			actions={
-				<SidebarButton
-					icon={ edit }
-					label={ __( 'Edit styles' ) }
-					onClick={ () => {
-						// switch to edit mode.
-						setCanvasMode( 'edit' );
-						// open global styles sidebar.
-						openGeneralSidebar( 'edit-site/global-styles' );
-					} }
-				/>
-			}
+		<SidebarNavigationItem
+			{ ...props }
+			onClick={ () => {
+				// switch to edit mode.
+				setCanvasMode( 'edit' );
+				// open global styles sidebar.
+				openGeneralSidebar( 'edit-site/global-styles' );
+			} }
 		/>
 	);
 }
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	const isStyleBookOpened = useSelect(
+		( select ) =>
+			'style-book' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	const openGlobalStyles = async () =>
+		Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+
+	const openStyleBook = async () => {
+		await openGlobalStyles();
+		// Open the Style Book once the canvas mode is set to edit,
+		// and the global styles sidebar is open. This ensures that
+		// the Style Book is not prematurely closed.
+		setEditorCanvasContainerView( 'style-book' );
+	};
+
+	return (
+		<>
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles.'
+				) }
+				content={ <StyleVariationsContainer /> }
+				actions={
+					<div>
+						{ ! isMobileViewport && (
+							<SidebarButton
+								icon={ seen }
+								label={ __( 'Style Book' ) }
+								onClick={ () =>
+									setEditorCanvasContainerView(
+										! isStyleBookOpened
+											? 'style-book'
+											: undefined
+									)
+								}
+								isPressed={ isStyleBookOpened }
+							/>
+						) }
+						<SidebarButton
+							icon={ edit }
+							label={ __( 'Edit styles' ) }
+							onClick={ async () => await openGlobalStyles() }
+						/>
+					</div>
+				}
+			/>
+			{ isStyleBookOpened && ! isMobileViewport && (
+				<StyleBook
+					enableResizing={ false }
+					isSelected={ () => false }
+					onClick={ openStyleBook }
+					onSelect={ openStyleBook }
+					showCloseButton={ false }
+					showTabs={ false }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/sidebar-navigation-screen-main/index.js

@@ -7,46 +7,36 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';
 
 export default function SidebarNavigationScreenMain() {
-	const { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				__experimentalGetCurrentThemeGlobalStylesVariations,
-			} = select( coreStore );
-			// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-			// to avoid double network calls.
-			const navigationMenus = getEntityRecords(
-				'postType',
-				'wp_navigation',
-				{
-					per_page: 1,
-					status: 'publish',
-					order: 'desc',
-					orderby: 'date',
-				}
-			);
-			return {
-				hasNavigationMenus: !! navigationMenus?.length,
-				hasGlobalStyleVariations:
-					!! __experimentalGetCurrentThemeGlobalStylesVariations()
-						?.length,
-			};
-		},
-		[]
+	const editorCanvasContainerView = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getEditorCanvasContainerView();
+	}, [] );
+
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
 	);
-	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
-		? hasNavigationMenus
-		: false;
+
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		if ( editorCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );
+
 	return (
 		<SidebarNavigationScreen
 			isRoot
@@ -56,27 +46,20 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					{ showNavigationScreen && (
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/navigation"
-							withChevron
-							icon={ navigation }
-						>
-							{ __( 'Navigation' ) }
-						</NavigatorButton>
-					) }
-					{ hasGlobalStyleVariations && (
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/wp_global_styles"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</NavigatorButton>
-					) }
+					<SidebarNavigationScreenNavigationMenuButton
+						withChevron
+						icon={ navigation }
+						as={ SidebarNavigationItem }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationScreenNavigationMenuButton>
 
+					<SidebarNavigationItemGlobalStyles
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/page"
@@ -99,7 +82,7 @@ export default function SidebarNavigationScreenMain() {
 						withChevron
 						icon={ symbol }
 					>
-						{ __( 'Template Parts' ) }
+						{ __( 'Library' ) }
 					</NavigatorButton>
 				</ItemGroup>
 			}