@automattic/data-stores 3.0.1 → 3.1.0-rc.1

package/src/site/actions.ts

@@ -1,4 +1,6 @@
-import { Design } from '@automattic/design-picker/src/types';
+import { isEnabled } from '@automattic/calypso-config';
+import { __ } from '@wordpress/i18n';
+import { SiteGoal } from '../onboard';
 import { wpcomRequest } from '../wpcom-request-controls';
 import {
 	SiteLaunchError,
@@ -6,8 +8,10 @@ import {
 	LatestAtomicTransferError,
 	AtomicSoftwareStatusError,
 	AtomicSoftwareInstallError,
+	GlobalStyles,
+	AssembleSiteOptions,
 } from './types';
-import type { WpcomClientCredentials } from '../shared-types';
+import { createCustomHomeTemplateContent } from './utils';
 import type {
 	CreateSiteParams,
 	NewSiteErrorResponse,
@@ -24,7 +28,12 @@ import type {
 	AtomicSoftwareInstallError as AtomicSoftwareInstallErrorType,
 	AtomicSoftwareStatus,
 	SiteSettings,
+	ActiveTheme,
+	CurrentTheme,
 } from './types';
+import type { WpcomClientCredentials } from '../shared-types';
+import type { RequestTemplate } from '../templates';
+import type { Design, DesignOptions } from '@automattic/design-picker/src/types'; // Import from a specific file directly to avoid the circular dependencies
 
 export function createActions( clientCreds: WpcomClientCredentials ) {
 	const fetchSite = () => ( {
@@ -106,7 +115,7 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		verticalId,
 	} );
 
-	const receiveSiteFailed = ( siteId: number, response: SiteError | undefined ) => ( {
+	const receiveSiteFailed = ( siteId: number, response: SiteError ) => ( {
 		type: 'RECEIVE_SITE_FAILED' as const,
 		siteId,
 		response,
@@ -166,6 +175,12 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		domains,
 	} );
 
+	const receiveSiteTheme = ( siteId: number, theme: CurrentTheme ) => ( {
+		type: 'RECEIVE_SITE_THEME' as const,
+		siteId,
+		theme,
+	} );
+
 	const receiveSiteSettings = ( siteId: number, settings: SiteSettings ) => ( {
 		type: 'RECEIVE_SITE_SETTINGS' as const,
 		siteId,
@@ -188,11 +203,89 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		return success;
 	}
 
+	const receiveSiteGlobalStyles = ( siteId: number, globalStyles: GlobalStyles ) => ( {
+		type: 'RECEIVE_SITE_GLOBAL_STYLES' as const,
+		siteId,
+		globalStyles,
+	} );
+
+	function* getGlobalStyles( siteId: number, stylesheet: string ) {
+		const globalStyles: GlobalStyles = yield wpcomRequest( {
+			path: `/sites/${ siteId }/global-styles/themes/${ stylesheet }`,
+			apiNamespace: 'wp/v2',
+		} );
+
+		yield receiveSiteGlobalStyles( siteId, globalStyles );
+
+		return globalStyles;
+	}
+
+	function* setGlobalStyles(
+		siteIdOrSlug: number | string,
+		stylesheet: string,
+		globalStyles: GlobalStyles,
+		activatedTheme?: ActiveTheme
+	) {
+		// only update if there settings or styles to update
+		if (
+			Object.keys( globalStyles.settings ?? {} ).length ||
+			Object.keys( globalStyles.styles ?? {} ).length
+		) {
+			const globalStylesId: number =
+				activatedTheme?.global_styles_id || ( yield getGlobalStylesId( siteIdOrSlug, stylesheet ) );
+
+			const updatedGlobalStyles: GlobalStyles = yield wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteIdOrSlug ) }/global-styles/${ globalStylesId }`,
+				apiNamespace: 'wp/v2',
+				method: 'POST',
+				body: {
+					id: globalStylesId,
+					settings: globalStyles.settings ?? {},
+					styles: globalStyles.styles ?? {},
+				},
+			} );
+
+			return updatedGlobalStyles;
+		}
+	}
+
+	function* getGlobalStylesId( siteIdOrSlug: number | string, stylesheet: string ) {
+		const theme: ActiveTheme = yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent( siteIdOrSlug ) }/themes/${ stylesheet }`,
+			method: 'GET',
+			apiNamespace: 'wp/v2',
+		} );
+
+		const globalStylesUrl = theme?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href;
+		if ( globalStylesUrl ) {
+			// eslint-disable-next-line no-useless-escape
+			const match = globalStylesUrl.match( /global-styles\/(?<id>[\/\w-]+)/ );
+			if ( match && match.groups ) {
+				return match.groups.id;
+			}
+		}
+
+		return null;
+	}
+
+	function* getGlobalStylesVariations( siteIdOrSlug: number | string, stylesheet: string ) {
+		const variations: GlobalStyles[] = yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent(
+				siteIdOrSlug
+			) }/global-styles/themes/${ stylesheet }/variations`,
+			method: 'GET',
+			apiNamespace: 'wp/v2',
+		} );
+
+		return variations;
+	}
+
 	function* saveSiteSettings(
 		siteId: number,
 		settings: {
 			blogname?: string;
 			blogdescription?: string;
+			launchpad_screen?: string;
 			site_vertical_id?: string;
 			woocommerce_store_address?: string;
 			woocommerce_store_address_2?: string;
@@ -234,6 +327,28 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		} catch ( e ) {}
 	}
 
+	function* setStaticHomepageOnSite( siteID: number, pageId: number ) {
+		try {
+			yield wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteID ) }/homepage`,
+				apiVersion: '1.1',
+				body: { is_page_on_front: true, page_on_front_id: pageId },
+				method: 'POST',
+			} );
+		} catch ( e ) {}
+	}
+
+	function* setGoalsOnSite( siteSlug: string, goals: SiteGoal[] ) {
+		try {
+			yield wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteSlug ) }/site-goals`,
+				apiNamespace: 'wpcom/v2',
+				body: { site_goals: goals },
+				method: 'POST',
+			} );
+		} catch ( e ) {}
+	}
+
 	function* saveSiteTitle( siteId: number, blogname: string | undefined ) {
 		yield saveSiteSettings( siteId, { blogname } );
 	}
@@ -242,41 +357,163 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		yield saveSiteSettings( siteId, { blogdescription } );
 	}
 
-	function* setDesignOnSite( siteSlug: string, selectedDesign: Design, siteVerticalId: string ) {
-		const { theme, recipe } = selectedDesign;
+	function* installTheme( siteSlugOrId: string | string, themeSlug: string ) {
+		yield wpcomRequest( {
+			path: `/sites/${ siteSlugOrId }/themes/${ themeSlug }/install`,
+			apiVersion: '1.1',
+			method: 'POST',
+		} );
+	}
 
+	function* runThemeSetupOnSite( siteSlug: string ) {
 		yield wpcomRequest( {
-			path: `/sites/${ siteSlug }/themes/mine`,
+			path: `/sites/${ encodeURIComponent( siteSlug ) }/theme-setup/?_locale=user`,
+			apiNamespace: 'wpcom/v2',
+			method: 'POST',
+		} );
+	}
+
+	function* setDesignOnSite(
+		siteSlug: string,
+		selectedDesign: Design,
+		options: DesignOptions = {}
+	) {
+		const themeSlug =
+			selectedDesign.slug ||
+			selectedDesign.recipe?.stylesheet?.split( '/' )[ 1 ] ||
+			selectedDesign.theme;
+		const { styleVariation, globalStyles } = options;
+		const activatedTheme: ActiveTheme = yield wpcomRequest( {
+			path: `/sites/${ siteSlug }/themes/mine?_locale=user`,
 			apiVersion: '1.1',
-			body: { theme: recipe?.stylesheet?.split( '/' )[ 1 ] || theme, dont_change_homepage: true },
+			body: {
+				theme: themeSlug,
+			},
 			method: 'POST',
 		} );
 
-		/*
-		 * Anchor themes are set up directly via Headstart on the server side
-		 * so exclude them from theme setup.
-		 */
-		const anchorDesigns = [ 'hannah', 'gilbert', 'riley' ];
-		if ( anchorDesigns.indexOf( selectedDesign.template ) < 0 ) {
+		// @todo Always use the global styles for consistency
+		if ( styleVariation?.slug ) {
+			const variations: GlobalStyles[] = yield* getGlobalStylesVariations(
+				siteSlug,
+				activatedTheme.stylesheet
+			);
+			const currentVariation = variations.find(
+				( variation ) =>
+					variation.title &&
+					variation.title.split( ' ' ).join( '-' ).toLowerCase() === styleVariation?.slug
+			);
+
+			if ( currentVariation ) {
+				yield* setGlobalStyles(
+					siteSlug,
+					activatedTheme.stylesheet,
+					currentVariation,
+					activatedTheme
+				);
+			}
+		}
+
+		if ( globalStyles ) {
+			yield* setGlobalStyles( siteSlug, activatedTheme.stylesheet, globalStyles, activatedTheme );
+		}
+
+		// Potentially runs Headstart.
+		// E.g. if the homepage has a Query Loop block, we insert placeholder posts on the new site.
+		yield* runThemeSetupOnSite( siteSlug );
+
+		return activatedTheme;
+	}
+
+	function* createCustomTemplate(
+		siteSlug: string,
+		stylesheet: string,
+		slug: string,
+		title: string,
+		content: string
+	) {
+		const templateId = `${ stylesheet }//${ slug }`;
+		let existed = true;
+		try {
 			yield wpcomRequest( {
-				path: `/sites/${ encodeURIComponent( siteSlug ) }/theme-setup`,
-				apiNamespace: 'wpcom/v2',
-				body: {
-					trim_content: true,
-					pattern_ids: recipe?.pattern_ids,
-					vertical_id: siteVerticalId || undefined,
-				},
-				method: 'POST',
+				path: `/sites/${ encodeURIComponent( siteSlug ) }/templates/${ templateId }`,
+				apiNamespace: 'wp/v2',
+				method: 'GET',
 			} );
+		} catch {
+			existed = false;
 		}
 
-		const data: { is_fse_active: boolean } = yield wpcomRequest( {
-			path: `/sites/${ siteSlug }/block-editor`,
-			apiNamespace: 'wpcom/v2',
-			method: 'GET',
+		const templatePath = `templates/${ existed ? templateId : '' }`;
+		yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent( siteSlug ) }/${ templatePath }`,
+			apiNamespace: 'wp/v2',
+			body: {
+				slug,
+				theme: stylesheet,
+				title,
+				content,
+				status: 'publish',
+				is_wp_suggestion: true,
+			},
+			method: 'POST',
 		} );
+	}
 
-		return data?.is_fse_active ?? false;
+	function* assembleSite(
+		siteSlug: string,
+		stylesheet = '',
+		{
+			homeHtml,
+			headerHtml,
+			footerHtml,
+			pages,
+			globalStyles,
+			canReplaceContent,
+			siteSetupOption,
+		}: AssembleSiteOptions = {}
+	) {
+		const templates = [
+			{
+				type: 'wp_template' as const,
+				slug: 'home',
+				title: __( 'Home' ),
+				content: createCustomHomeTemplateContent(
+					stylesheet,
+					!! headerHtml,
+					!! footerHtml,
+					!! homeHtml,
+					homeHtml
+				),
+			},
+			headerHtml && {
+				type: 'wp_template_part' as const,
+				slug: 'header',
+				title: __( 'Header' ),
+				content: headerHtml,
+			},
+			footerHtml && {
+				type: 'wp_template_part' as const,
+				slug: 'footer',
+				title: __( 'Footer' ),
+				content: footerHtml,
+			},
+		].filter( Boolean ) as RequestTemplate[];
+
+		const endpointSuffix = isEnabled( 'pattern-assembler/perf-test' ) ? '-perf-test' : '';
+
+		yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent( siteSlug ) }/site-assembler${ endpointSuffix }`,
+			apiNamespace: 'wpcom/v2',
+			body: {
+				templates,
+				pages,
+				global_styles: globalStyles,
+				can_replace_content: canReplaceContent,
+				site_setup_option: siteSetupOption,
+			},
+			method: 'POST',
+		} );
 	}
 
 	const setSiteSetupError = ( error: string, message: string ) => ( {
@@ -290,16 +527,26 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		siteId,
 	} );
 
-	const atomicTransferStart = ( siteId: number, softwareSet: string | undefined ) => ( {
+	const atomicTransferStart = (
+		siteId: number,
+		softwareSet: string | undefined,
+		transferIntent: string | undefined
+	) => ( {
 		type: 'ATOMIC_TRANSFER_START' as const,
 		siteId,
 		softwareSet,
+		transferIntent,
 	} );
 
-	const atomicTransferSuccess = ( siteId: number, softwareSet: string | undefined ) => ( {
+	const atomicTransferSuccess = (
+		siteId: number,
+		softwareSet: string | undefined,
+		transferIntent: string | undefined
+	) => ( {
 		type: 'ATOMIC_TRANSFER_SUCCESS' as const,
 		siteId,
 		softwareSet,
+		transferIntent,
 	} );
 
 	const atomicTransferFailure = (
@@ -313,22 +560,26 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		error,
 	} );
 
-	function* initiateAtomicTransfer( siteId: number, softwareSet: string | undefined ) {
-		yield atomicTransferStart( siteId, softwareSet );
+	function* initiateAtomicTransfer(
+		siteId: number,
+		softwareSet: string | undefined,
+		transferIntent: string | undefined
+	) {
+		yield atomicTransferStart( siteId, softwareSet, transferIntent );
 		try {
+			const body = {
+				context: softwareSet || 'unknown',
+				software_set: softwareSet ? encodeURIComponent( softwareSet ) : undefined,
+				transfer_intent: transferIntent ? encodeURIComponent( transferIntent ) : undefined,
+			};
+
 			yield wpcomRequest( {
 				path: `/sites/${ encodeURIComponent( siteId ) }/atomic/transfers`,
 				apiNamespace: 'wpcom/v2',
 				method: 'POST',
-				...( softwareSet
-					? {
-							body: {
-								software_set: encodeURIComponent( softwareSet ),
-							},
-					  }
-					: {} ),
+				body,
 			} );
-			yield atomicTransferSuccess( siteId, softwareSet );
+			yield atomicTransferSuccess( siteId, softwareSet, transferIntent );
 		} catch ( _ ) {
 			yield atomicTransferFailure( siteId, softwareSet, AtomicTransferError.INTERNAL );
 		}
@@ -453,19 +704,31 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		}
 	}
 
+	const setBundledPluginSlug = ( siteSlug: string, pluginSlug: string ) => ( {
+		type: 'SET_BUNDLED_PLUGIN_SLUG' as const,
+		siteSlug,
+		pluginSlug,
+	} );
+
 	return {
 		receiveSiteDomains,
 		receiveSiteSettings,
+		receiveSiteTheme,
 		saveSiteTitle,
 		saveSiteSettings,
 		setIntentOnSite,
+		setStaticHomepageOnSite,
+		setGoalsOnSite,
 		receiveSiteTitle,
 		fetchNewSite,
 		fetchSite,
 		receiveNewSite,
 		receiveNewSiteFailed,
 		resetNewSiteFailed,
+		installTheme,
 		setDesignOnSite,
+		createCustomTemplate,
+		assembleSite,
 		createSite,
 		receiveSite,
 		receiveSiteFailed,
@@ -480,6 +743,9 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		launchSiteFailure,
 		getCart,
 		setCart,
+		getGlobalStyles,
+		setGlobalStyles,
+		receiveSiteGlobalStyles,
 		setSiteSetupError,
 		clearSiteSetupError,
 		initiateAtomicTransfer,
@@ -498,6 +764,7 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		atomicSoftwareInstallStart,
 		atomicSoftwareInstallSuccess,
 		atomicSoftwareInstallFailure,
+		setBundledPluginSlug,
 	};
 }
 
@@ -509,6 +776,7 @@ export type Action =
 			| ActionCreators[ 'fetchSite' ]
 			| ActionCreators[ 'receiveSiteDomains' ]
 			| ActionCreators[ 'receiveSiteSettings' ]
+			| ActionCreators[ 'receiveSiteTheme' ]
 			| ActionCreators[ 'receiveNewSite' ]
 			| ActionCreators[ 'receiveSiteTitle' ]
 			| ActionCreators[ 'receiveNewSiteFailed' ]
@@ -517,6 +785,7 @@ export type Action =
 			| ActionCreators[ 'receiveSite' ]
 			| ActionCreators[ 'receiveSiteFailed' ]
 			| ActionCreators[ 'updateSiteSettings' ]
+			| ActionCreators[ 'receiveSiteGlobalStyles' ]
 			| ActionCreators[ 'reset' ]
 			| ActionCreators[ 'resetNewSiteFailed' ]
 			| ActionCreators[ 'launchSiteStart' ]
@@ -534,6 +803,7 @@ export type Action =
 			| ActionCreators[ 'atomicSoftwareInstallStart' ]
 			| ActionCreators[ 'atomicSoftwareInstallSuccess' ]
 			| ActionCreators[ 'atomicSoftwareInstallFailure' ]
+			| ActionCreators[ 'setBundledPluginSlug' ]
 	  >
 	// Type added so we can dispatch actions in tests, but has no runtime cost
 	| { type: 'TEST_ACTION' };

package/src/site/constants.ts

@@ -1 +1,8 @@
+import { isEnabled } from '@automattic/calypso-config';
+
 export const STORE_KEY = 'automattic/site';
+
+export const getPlaceholderSiteID = () =>
+	isEnabled( 'pattern-assembler/v2' )
+		? '226011606' // assemblerdemo
+		: '224076220'; // creatio2demo

package/src/site/index.ts

@@ -1,33 +1,39 @@
 import { registerStore } from '@wordpress/data';
+import { registerPlugins } from '../plugins';
 import { controls } from '../wpcom-request-controls';
-import { createActions } from './actions';
+import { createActions, ActionCreators } from './actions';
 import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
-import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import type { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
-export type { State };
+export type { State, ActionCreators as SiteActions };
 export { STORE_KEY };
 
 let isRegistered = false;
 export function register( clientCreds: WpcomClientCredentials ): typeof STORE_KEY {
 	if ( ! isRegistered ) {
+		registerPlugins();
+
 		isRegistered = true;
-		registerStore< State >( STORE_KEY, {
+		registerStore( STORE_KEY, {
 			actions: createActions( clientCreds ),
-			controls: controls as any,
+			controls,
 			reducer,
 			resolvers,
 			selectors,
+			persist: [ 'bundledPluginSlug' ],
 		} );
 	}
 	return STORE_KEY;
 }
 
-declare module '@wordpress/data' {
-	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< ReturnType< typeof createActions > >;
-	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
-}
+/**
+ * Queries
+ */
+export { default as useSite } from './queries/use-site';
+export { default as useSiteFeatures } from './queries/use-site-features';
+export { default as useSiteMediaStorage } from './queries/use-site-media-storage';
+export { default as useSiteUser } from './queries/use-site-user-query';

package/src/site/queries/lib/use-query-keys-factory.ts

@@ -0,0 +1,15 @@
+const useQueryKeysFactory = () => ( {
+	site: ( siteIdOrSlug?: string | number | null ) => [ 'site', siteIdOrSlug ],
+	siteFeatures: ( siteIdOrSlug?: string | number | null ) => [ 'site-features', siteIdOrSlug ],
+	siteMediaStorage: ( siteIdOrSlug?: string | number | null ) => [
+		'site-media-storage',
+		siteIdOrSlug,
+	],
+	siteUser: ( siteId: number | null | undefined, userId: number | null | undefined ) => [
+		'site-user',
+		siteId,
+		userId,
+	],
+} );
+
+export default useQueryKeysFactory;

package/src/site/queries/use-site-features.ts

@@ -0,0 +1,28 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import useQueryKeysFactory from './lib/use-query-keys-factory';
+import type { SiteFeatures } from '../types';
+
+interface Props {
+	siteIdOrSlug: string | number | null | undefined;
+}
+
+/**
+ * Site details from `/sites/[ siteIdOrSlug ]/features` endpoint
+ */
+function useSiteFeatures( { siteIdOrSlug }: Props ): UseQueryResult< SiteFeatures | undefined > {
+	const queryKeys = useQueryKeysFactory();
+
+	return useQuery( {
+		queryKey: queryKeys.siteFeatures( siteIdOrSlug ),
+		queryFn: async (): Promise< SiteFeatures | undefined > => {
+			return await wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteIdOrSlug as string ) }/features`,
+				apiVersion: '1.1',
+			} );
+		},
+		enabled: !! siteIdOrSlug,
+	} );
+}
+
+export default useSiteFeatures;

package/src/site/queries/use-site-media-storage.ts

@@ -0,0 +1,36 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import useQueryKeysFactory from './lib/use-query-keys-factory';
+import type { SiteMediaStorage, RawSiteMediaStorage } from '../types';
+
+interface Props {
+	siteIdOrSlug: string | number | null | undefined;
+}
+
+/**
+ * Site media storage from `/sites/[ siteIdOrSlug ]/media-storage` endpoint
+ * transposed to camelCase format
+ */
+function useSiteMediaStorage( {
+	siteIdOrSlug,
+}: Props ): UseQueryResult< SiteMediaStorage | undefined > {
+	const queryKeys = useQueryKeysFactory();
+
+	return useQuery( {
+		queryKey: queryKeys.siteMediaStorage( siteIdOrSlug ),
+		queryFn: async (): Promise< SiteMediaStorage | undefined > => {
+			const mediaStorage = await wpcomRequest< RawSiteMediaStorage >( {
+				path: `/sites/${ encodeURIComponent( siteIdOrSlug as string ) }/media-storage`,
+				apiVersion: '1.1',
+			} );
+
+			return {
+				maxStorageBytes: Number( mediaStorage.max_storage_bytes ),
+				storageUsedBytes: Number( mediaStorage.storage_used_bytes ),
+			};
+		},
+		enabled: !! siteIdOrSlug,
+	} );
+}
+
+export default useSiteMediaStorage;

package/src/site/queries/use-site-user-query.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import { Member } from '../../users/types';
+import useQueryKeysFactory from './lib/use-query-keys-factory';
+
+export function getUseSiteUserQueryOptions(
+	siteId: number | null | undefined,
+	userId: number | undefined,
+	queryKey: ( string | number | null | undefined )[]
+) {
+	return {
+		queryKey,
+		queryFn: async (): Promise< Member > =>
+			wpcomRequest( { path: `/sites/${ siteId }/users/${ userId }`, apiVersion: '1.1' } ),
+		enabled: !! ( siteId && userId ),
+	};
+}
+
+const useSiteUserQuery = ( siteId?: number | null, userId?: number ) => {
+	const queryKeys = useQueryKeysFactory();
+	return useQuery< Member >(
+		getUseSiteUserQueryOptions( siteId, userId, queryKeys.siteUser( siteId, userId ) )
+	);
+};
+
+export default useSiteUserQuery;

package/src/site/queries/use-site.ts

@@ -0,0 +1,28 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import useQueryKeysFactory from './lib/use-query-keys-factory';
+import type { SiteDetails } from '../types';
+
+interface Props {
+	siteIdOrSlug: string | number | null | undefined;
+}
+
+/**
+ * Site details from `/sites/[ siteId ]` endpoint
+ */
+function useSite( { siteIdOrSlug }: Props ): UseQueryResult< SiteDetails | undefined > {
+	const queryKeys = useQueryKeysFactory();
+
+	return useQuery( {
+		queryKey: queryKeys.site( siteIdOrSlug ),
+		queryFn: async (): Promise< SiteDetails | undefined > => {
+			return await wpcomRequest( {
+				path: `/sites/${ encodeURIComponent( siteIdOrSlug as string ) }`,
+				apiVersion: '1.1',
+			} );
+		},
+		enabled: !! siteIdOrSlug,
+	} );
+}
+
+export default useSite;