@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -6,12 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	ResizableBox,
+	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,7 +36,7 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 // The minimum width of the frame (in px) while resizing.
-const FRAME_MIN_WIDTH = 340;
+const FRAME_MIN_WIDTH = 320;
 // 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.
@@ -42,6 +45,8 @@ const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;
 // 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;
+// Default size for the `frameSize` state.
+const INITIAL_FRAME_SIZE = { width: '100%', height: '100%' };
 
 function calculateNewHeight( width, initialAspectRatio ) {
 	const lerp = ( a, b, amount ) => {
@@ -73,34 +78,32 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
+	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
+	defaultSize,
 	innerContentStyle,
 } ) {
-	const [ frameSize, setFrameSize ] = useState( {
-		width: '100%',
-		height: '100%',
-	} );
+	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// 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 [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
+	const canvasMode = useSelect(
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
+		[]
+	);
 	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 resizableHandleHelpId = useInstanceId(
+		ResizableFrame,
+		'edit-site-resizable-frame-handle-help'
+	);
+	const defaultAspectRatio = defaultSize.width / defaultSize.height;
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -116,7 +119,7 @@ function ResizableFrame( {
 		const maxDoubledDelta =
 			delta.width < 0 // is shrinking
 				? deltaAbs
-				: ( initialComputedWidthRef.current - startingWidth ) / 2;
+				: ( defaultSize.width - startingWidth ) / 2;
 		const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );
 		const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
 		const singleSegment = 1 - doubleSegment;
@@ -125,17 +128,14 @@ function ResizableFrame( {
 
 		const updatedWidth = startingWidth + delta.width;
 
-		setIsOversized( updatedWidth > initialComputedWidthRef.current );
+		setIsOversized( updatedWidth > defaultSize.width );
 
 		// 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
-				  ),
+				: calculateNewHeight( updatedWidth, defaultAspectRatio ),
 		} );
 	};
 
@@ -154,13 +154,37 @@ function ResizableFrame( {
 		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%' } );
+			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
 			setCanvasMode( 'edit' );
 		}
 	};
 
+	// Handle resize by arrow keys
+	const handleResizableHandleKeyDown = ( event ) => {
+		if ( ! [ 'ArrowLeft', 'ArrowRight' ].includes( event.key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const step = 20 * ( event.shiftKey ? 5 : 1 );
+		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const newWidth = Math.min(
+			Math.max(
+				FRAME_MIN_WIDTH,
+				frameRef.current.resizable.offsetWidth + delta
+			),
+			defaultSize.width
+		);
+
+		setFrameSize( {
+			width: newWidth,
+			height: calculateNewHeight( newWidth, defaultAspectRatio ),
+		} );
+	};
+
 	const frameAnimationVariants = {
 		default: {
 			flexGrow: 0,
@@ -173,16 +197,26 @@ function ResizableFrame( {
 	};
 
 	const resizeHandleVariants = {
-		default: {
+		hidden: {
+			opacity: 0,
+			left: 0,
+		},
+		visible: {
 			opacity: 1,
 			left: -16,
 		},
-		resizing: {
+		active: {
 			opacity: 1,
 			left: -16,
 			scaleY: 1.3,
 		},
 	};
+	const currentResizeHandleVariant = ( () => {
+		if ( isResizing ) {
+			return 'active';
+		}
+		return shouldShowHandle ? 'visible' : 'hidden';
+	} )();
 
 	return (
 		<ResizableBox
@@ -217,35 +251,54 @@ function ResizableFrame( {
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
 			maxHeight={ '100%' }
-			onMouseOver={ () => setIsHovering( true ) }
-			onMouseOut={ () => setIsHovering( false ) }
+			onFocus={ () => setShouldShowHandle( true ) }
+			onBlur={ () => setShouldShowHandle( false ) }
+			onMouseOver={ () => setShouldShowHandle( true ) }
+			onMouseOut={ () => setShouldShowHandle( 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,
+				left: canvasMode === 'view' && (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<motion.button
+								key="handle"
+								role="separator"
+								aria-orientation="vertical"
+								className={ classnames(
+									'edit-site-resizable-frame__handle',
+									{ 'is-resizing': isResizing }
+								) }
+								variants={ resizeHandleVariants }
+								animate={ currentResizeHandleVariant }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ resizableHandleHelpId }
+								aria-valuenow={
+									frameRef.current?.resizable?.offsetWidth ||
+									undefined
+								}
+								aria-valuemin={ FRAME_MIN_WIDTH }
+								aria-valuemax={ defaultSize.width }
+								onKeyDown={ handleResizableHandleKeyDown }
+								initial="hidden"
+								exit="hidden"
+								whileFocus="active"
+								whileHover="active"
+							/>
+						</Tooltip>
+						<div hidden id={ resizableHandleHelpId }>
+							{ __(
+								'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'
+							) }
+						</div>
+					</>
+				),
 			} }
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
-				[ oversizedClassName ]: isOversized,
 			} ) }
 		>
 			<motion.div

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

@@ -30,11 +30,13 @@
 .edit-site-resizable-frame__handle {
 	align-items: center;
 	background-color: rgba($gray-700, 0.4);
+	border: 0;
 	border-radius: $grid-unit-05;
 	cursor: col-resize;
 	display: flex;
 	height: $grid-unit-80;
 	justify-content: flex-end;
+	padding: 0;
 	position: absolute;
 	top: calc(50% - #{$grid-unit-40});
 	width: $grid-unit-05;
@@ -56,16 +58,14 @@
 		width: $grid-unit-40;
 	}
 
-	&:hover,
-	.is-resizing & {
-		background-color: var(--wp-admin-theme-color);
+	&:focus-visible {
+		// Works with Windows high contrast mode while also hiding weird outline in Safari.
+		outline: 2px solid transparent;
 	}
 
-	.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;
+	&:hover,
+	&:focus,
+	&.is-resizing {
+		background-color: var(--wp-admin-theme-color);
 	}
 }

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

@@ -19,6 +19,7 @@ export default function SaveButton( {
 	showTooltip = true,
 	defaultLabel,
 	icon,
+	__next40pxDefaultSize = false,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
@@ -83,6 +84,7 @@ export default function SaveButton( {
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		>
 			{ label }
 		</Button>

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

@@ -27,12 +27,13 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 ];
 
 export default function SaveHub() {
+	const saveNoticeId = 'site-edit-save-notice';
 	const { params } = useLocation();
 
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } =
+	const { createSuccessNotice, createErrorNotice, removeNotice } =
 		useDispatch( noticesStore );
 
 	const { dirtyCurrentEntity, countUnsavedChanges, isDirty, isSaving } =
@@ -107,6 +108,7 @@ export default function SaveHub() {
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;
 
+		removeNotice( saveNoticeId );
 		const { kind, name, key, property } = dirtyCurrentEntity;
 
 		try {
@@ -132,6 +134,7 @@ export default function SaveHub() {
 
 			createSuccessNotice( __( 'Site updated.' ), {
 				type: 'snackbar',
+				id: saveNoticeId,
 			} );
 		} catch ( error ) {
 			createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` );
@@ -148,6 +151,7 @@ export default function SaveHub() {
 					disabled={ isSaving }
 					aria-disabled={ isSaving }
 					className="edit-site-save-hub__button"
+					__next40pxDefaultSize
 				>
 					{ label }
 				</Button>
@@ -158,6 +162,7 @@ export default function SaveHub() {
 					showTooltip={ false }
 					icon={ disabled && ! isSaving ? check : null }
 					defaultLabel={ label }
+					__next40pxDefaultSize
 				/>
 			) }
 		</HStack>

package/src/components/save-hub/style.scss

@@ -3,7 +3,7 @@
 	border-top: 1px solid $gray-800;
 	flex-shrink: 0;
 	margin: 0;
-	padding: $canvas-padding;
+	padding: $grid-unit-20 + $grid-unit-05 $canvas-padding;
 }
 
 .edit-site-save-hub__button {

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

@@ -39,13 +39,19 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 		activateSaveLabel = __( 'Activate' );
 	}
 
-	const { getTheme } = useSelect( coreStore );
-	const theme = getTheme( currentlyPreviewingTheme() );
+	const themeName = useSelect( ( select ) => {
+		const theme = select( coreStore ).getTheme(
+			currentlyPreviewingTheme()
+		);
+
+		return theme?.name?.rendered;
+	}, [] );
+
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				'Saving your changes will change your active theme to  %1$s.',
-				theme?.name?.rendered
+				'Saving your changes will change your active theme to %s.',
+				themeName
 			) }
 		</p>
 	);

package/src/components/sidebar-edit-mode/page-panels/page-content.js

@@ -6,22 +6,24 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
 import { unlock } from '../../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
 export default function PageContent() {
-	const clientIds = useSelect(
+	const clientIdsTree = useSelect(
 		( select ) =>
-			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
-				PAGE_CONTENT_BLOCK_TYPES
-			),
+			unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
 		[]
 	);
+	const clientIds = useMemo(
+		() => clientIdsTree.map( ( { clientId } ) => clientId ),
+		[ clientIdsTree ]
+	);
 	return <BlockQuickNavigation clientIds={ clientIds } />;
 }

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -212,13 +212,10 @@ export default function PageStatus( {
 													} )
 												}
 												value={ password }
-												/* eslint-disable jsx-a11y/no-autofocus */
-												autoFocus={ ! password }
-												/* eslint-enable jsx-a11y/no-autofocus */
 												placeholder={ __(
-													'Enter a secure password'
+													'Use a secure password'
 												) }
-												type="password"
+												type="text"
 											/>
 										) }
 									</BaseControl>

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

@@ -7,7 +7,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
-import { navigation as navigationIcon } from '@wordpress/icons';
+import { navigation, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,11 +18,13 @@ import TemplateAreas from './template-areas';
 import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
 
+const CARD_ICONS = {
+	wp_block: symbol,
+	wp_navigation: navigation,
+};
+
 export default function TemplatePanel() {
-	const {
-		info: { title, description, icon },
-		record,
-	} = useSelect( ( select ) => {
+	const { title, description, icon, record } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -31,10 +33,14 @@ export default function TemplatePanel() {
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 		const _record = getEditedEntityRecord( 'postType', postType, postId );
+		const info = getTemplateInfo( _record );
 
-		const info = _record ? getTemplateInfo( _record ) : {};
-
-		return { info, record: _record };
+		return {
+			title: info.title,
+			description: info.description,
+			icon: info.icon,
+			record: _record,
+		};
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -46,9 +52,7 @@ export default function TemplatePanel() {
 			<SidebarCard
 				className="edit-site-template-card"
 				title={ decodeEntities( title ) }
-				icon={
-					record?.type === 'wp_navigation' ? navigationIcon : icon
-				}
+				icon={ CARD_ICONS[ record?.type ] ?? icon }
 				description={ decodeEntities( description ) }
 				actions={ <TemplateActions template={ record } /> }
 			>

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

@@ -11,6 +11,10 @@
 	&[aria-current] {
 		color: $gray-200;
 		background: $gray-800;
+
+		.edit-site-sidebar-navigation-item__drilldown-indicator {
+			fill: $gray-200;
+		}
 	}
 
 	&[aria-current] {
@@ -19,18 +23,7 @@
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
-		fill: $gray-700;
-	}
-
-	&:is(a) {
-		text-decoration: none;
-		display: flex;
-		align-items: center;
-
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
+		fill: $gray-600;
 	}
 
 	&.with-suffix {

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

@@ -1,10 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -12,6 +16,7 @@ import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -24,6 +29,8 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -32,7 +39,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
-	backPath,
+	backPath: backPathProp,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -41,14 +48,20 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
-	const { goTo } = useNavigator();
+	const location = useLocation();
+	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
 	return (
 		<>
 			<VStack
-				className="edit-site-sidebar-navigation-screen__main"
+				className={ classnames(
+					'edit-site-sidebar-navigation-screen__main',
+					{
+						'has-footer': !! footer,
+					}
+				) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
@@ -57,17 +70,19 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot && ! backPath && (
-						<NavigatorToParentButton
-							as={ SidebarButton }
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							label={ __( 'Back' ) }
-							showTooltip={ false }
-						/>
-					) }
-					{ ! isRoot && backPath && (
+					{ ! isRoot && (
 						<SidebarButton
-							onClick={ () => goTo( backPath, { isBack: true } ) }
+							onClick={ () => {
+								const backPath =
+									backPathProp ?? location.state?.backPath;
+								if ( backPath ) {
+									navigator.goTo( backPath, {
+										isBack: true,
+									} );
+								} else {
+									navigator.goToParent();
+								}
+							} }
 							icon={ icon }
 							label={ __( 'Back' ) }
 							showTooltip={ false }
@@ -78,7 +93,7 @@ export default function SidebarNavigationScreen( {
 							icon={ icon }
 							label={
 								! isPreviewingTheme()
-									? __( 'Go back to the Dashboard' )
+									? __( 'Go to the Dashboard' )
 									: __( 'Go back to the theme showcase' )
 							}
 							href={

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

@@ -9,6 +9,10 @@
 	// Ensure the sidebar is always at least as tall as the viewport.
 	// This allows the footer section to be sticky at the bottom of the viewport.
 	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content {
@@ -98,6 +102,20 @@
 	border-top: 1px solid $gray-800;
 }
 
+.edit-site-sidebar__notice {
+	background: $gray-800;
+	color: $gray-300;
+	margin: $grid-unit-30 0;
+	&.is-dismissible {
+		padding-right: $grid-unit-10;
+	}
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
+		color: $gray-100;
+	}
+}
+
 /* In general style overrides are discouraged.
  * This is a temporary solution to override the InputControl component's styles.
  * The `Theme` component will potentially be the more appropriate approach

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

@@ -18,6 +18,7 @@
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
 	width: 100px;
+	flex-shrink: 0;
 }
 
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {