@wordpress/edit-site 6.0.0 → 6.1.0

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -3,7 +3,12 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
-import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -14,7 +19,11 @@ export default function CategoryItem( {
 	type,
 } ) {
 	const linkInfo = useLink( {
-		categoryId: id,
+		categoryId:
+			id !== TEMPLATE_PART_ALL_AREAS_CATEGORY &&
+			id !== PATTERN_DEFAULT_CATEGORY
+				? id
+				: undefined,
 		postType:
 			type === TEMPLATE_PART_POST_TYPE
 				? TEMPLATE_PART_POST_TYPE

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

@@ -106,8 +106,12 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
 		params: { postType, categoryId },
 	} = useLocation();
-	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const currentType = postType || PATTERN_TYPES.user;
+	const currentCategory =
+		categoryId ||
+		( currentType === PATTERN_TYPES.user
+			? PATTERN_DEFAULT_CATEGORY
+			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();

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

@@ -7,19 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useReducedMotion } from '@wordpress/compose';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo } from '@wordpress/element';
+import { memo, forwardRef } from '@wordpress/element';
 import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
@@ -32,14 +24,10 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 
-const HUB_ANIMATION_DURATION = 0.3;
-
-const SiteHub = memo( ( { isTransparent, className } ) => {
-	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getSettings } = unlock(
-				select( editSiteStore )
-			);
+const SiteHub = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
 
 			const {
 				getSite,
@@ -47,7 +35,6 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 			} = select( coreStore );
 			const _site = getSite();
 			return {
-				canvasMode: getCanvasMode(),
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
 				homeUrl: getUnstableBase()?.home,
@@ -56,141 +43,63 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 						? filterURLForDisplay( _site?.url )
 						: _site?.title,
 			};
-		},
-		[]
-	);
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-
-	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink,
-				label: __( 'Go to the Dashboard' ),
-		  }
-		: {
-				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
-				role: 'button',
-				label: __( 'Open Navigation' ),
-				onClick: ( event ) => {
-					event.preventDefault();
-					if ( canvasMode === 'edit' ) {
-						clearSelectedBlock();
-						setDeviceType( 'Desktop' );
-						setCanvasMode( 'view' );
-					}
-				},
-		  };
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	return (
-		<motion.div
-			className={ clsx( 'edit-site-site-hub', className ) }
-			variants={ {
-				isDistractionFree: { x: '-100%' },
-				isDistractionFreeHovering: { x: 0 },
-				view: { x: 0 },
-				edit: { x: 0 },
-			} }
-			initial={ false }
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
-			<HStack justify="flex-start" spacing="0">
-				<motion.div
-					className={ clsx(
-						'edit-site-site-hub__view-mode-toggle-container',
-						{
-							'has-transparent-background': isTransparent,
-						}
-					) }
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
-				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 					>
-						<motion.div
-							initial={ false }
-							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
-							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
-								ease: 'easeOut',
+						<Button
+							ref={ ref }
+							href={ dashboardLink }
+							label={ __( 'Go to the Dashboard' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
 							} }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</motion.div>
-					</Button>
-				</motion.div>
+						</Button>
+					</div>
 
-				<AnimatePresence initial={ false }>
-					{ canvasMode === 'view' && (
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
 						<HStack
-							as={ motion.div }
-							initial={ { opacity: 0 } }
-							animate={ {
-								opacity: isTransparent ? 0 : 1,
-							} }
-							exit={ { opacity: 0 } }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
-								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
-							} }
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
 						>
-							<div className="edit-site-site-hub__title">
-								<Button
-									variant="link"
-									href={ homeUrl }
-									target="_blank"
-									label={ __(
-										'View site (opens in a new tab)'
-									) }
-									aria-label={ __(
-										'View site (opens in a new tab)'
-									) }
-								>
-									{ decodeEntities( siteTitle ) }
-								</Button>
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
-								<Button
-									className="edit-site-site-hub_toggle-command-center"
-									icon={ search }
-									onClick={ () => openCommandCenter() }
-									label={ __( 'Open command palette' ) }
-									shortcut={ displayShortcut.primary( 'k' ) }
-								/>
-							</HStack>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
 						</HStack>
-					) }
-				</AnimatePresence>
-			</HStack>
-		</motion.div>
-	);
-} );
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);
 
 export default SiteHub;

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

@@ -3,6 +3,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+	margin-right: $grid-unit-15;
 }
 
 .edit-site-site-hub__actions {
@@ -14,10 +15,6 @@
 	width: $header-height;
 	flex-shrink: 0;
 
-	.edit-site-layout__view-mode-toggle-icon {
-		background: $gray-900;
-	}
-
 	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
 		background: transparent;
 	}

package/src/components/site-icon/style.scss

@@ -1,8 +1,5 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
-	// Matches SiteIcon motion, smoothing out the transition.
-	transition: padding 0.3s ease-out;
-	@include reduce-motion("transition");
 
 	.edit-site-layout.is-full-canvas & {
 		// Make the WordPress icon not so big in full canvas.
@@ -13,7 +10,6 @@
 .edit-site-site-icon__image {
 	width: 100%;
 	height: 100%;
-	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;
 

package/src/hooks/commands/use-set-command-context.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useCommandContext } = unlock( commandsPrivateApis );
+
+/**
+ * React hook used to set the correct command context based on the current state.
+ */
+export default function useSetCommandContext() {
+	const { hasBlockSelected, canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getBlockSelectionStart } = select( blockEditorStore );
+		return {
+			canvasMode: getCanvasMode(),
+			hasBlockSelected: getBlockSelectionStart(),
+		};
+	}, [] );
+	// Sets the right context for the command palette
+	let commandContext = 'site-editor';
+	if ( canvasMode === 'edit' ) {
+		commandContext = 'entity-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
+	useCommandContext( commandContext );
+}

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

@@ -287,7 +287,7 @@ function PushChangesToGlobalStylesControl( {
 			// notification.
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( newBlockAttributes );
-			setUserConfig( () => newUserConfig, { undoIgnore: true } );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the block e.g. 'Heading'.
@@ -302,7 +302,7 @@ function PushChangesToGlobalStylesControl( {
 							onClick() {
 								__unstableMarkNextChangeAsNotPersistent();
 								setAttributes( attributes );
-								setUserConfig( () => userConfig, {
+								setUserConfig( userConfig, {
 									undoIgnore: true,
 								} );
 							},
@@ -339,6 +339,7 @@ function PushChangesToGlobalStylesControl( {
 			<Button
 				__next40pxDefaultSize
 				variant="secondary"
+				__experimentalIsFocusable
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>