diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx
index 764de30434bc3..5f62e7d0898d0 100644
--- a/client/landing/gutenboarding/components/domain-picker-button/index.tsx
+++ b/client/landing/gutenboarding/components/domain-picker-button/index.tsx
@@ -7,6 +7,7 @@ import { useSelect } from '@wordpress/data';
import { Icon, chevronDown } from '@wordpress/icons';
import { sprintf } from '@wordpress/i18n';
import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -22,7 +23,8 @@ import { DOMAIN_SUGGESTIONS_STORE } from '../../stores/domain-suggestions';
import './style.scss';
const DomainPickerButton: React.FunctionComponent = () => {
- const { __, i18nLocale } = useI18n();
+ const { __ } = useI18n();
+ const locale = useLocale();
const makePath = usePath();
const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( ( select ) =>
select( ONBOARD_STORE ).getState()
@@ -43,7 +45,7 @@ const DomainPickerButton: React.FunctionComponent = () => {
include_wordpressdotcom: false,
include_dotblogsubdomain: false,
quantity: 1, // this will give the recommended domain only
- locale: i18nLocale,
+ locale,
} );
},
[ suggestionQuery ]
diff --git a/client/landing/gutenboarding/components/header/index.tsx b/client/landing/gutenboarding/components/header/index.tsx
index e462b4c20d5b9..9b1d48637cccf 100644
--- a/client/landing/gutenboarding/components/header/index.tsx
+++ b/client/landing/gutenboarding/components/header/index.tsx
@@ -6,6 +6,7 @@ import { useI18n } from '@automattic/react-i18n';
import { Icon, wordpress } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { Button } from '@wordpress/components';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -23,7 +24,8 @@ import Link from '../link';
import './style.scss';
const Header: React.FunctionComponent = () => {
- const { __, i18nLocale } = useI18n();
+ const { __ } = useI18n();
+ const locale = useLocale();
const currentStep = useCurrentStep();
const { siteTitle } = useSelect( ( select ) => select( ONBOARD_STORE ).getState() );
@@ -53,7 +55,7 @@ const Header: React.FunctionComponent = () => {
{ __( 'Site Language' ) }
- { i18nLocale }
+ { locale }
);
diff --git a/client/landing/gutenboarding/components/locale-context/index.tsx b/client/landing/gutenboarding/components/locale-context/index.tsx
index 0ecf3ae8e322b..91d5ec7023abf 100644
--- a/client/landing/gutenboarding/components/locale-context/index.tsx
+++ b/client/landing/gutenboarding/components/locale-context/index.tsx
@@ -14,6 +14,7 @@ import { getLanguageSlugs } from '../../../../lib/i18n-utils';
import { getUrlParts } from '../../../../lib/url/url-parts';
import config from '../../../../config';
import type { User } from '@automattic/data-stores';
+import { LocaleProvider } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -90,9 +91,11 @@ export const LocaleContext: React.FunctionComponent = ( { children } ) => {
return (
-
- { localeDataLoaded ? children : null }
-
+
+
+ { localeDataLoaded ? children : null }
+
+
);
};
diff --git a/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx b/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx
index c2fef5f2cd589..c3a32077bcc00 100644
--- a/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx
+++ b/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx
@@ -4,9 +4,11 @@
import { switchWebpackCSS } from '../../../../lib/i18n-utils/switch-locale';
import { useI18n } from '@automattic/react-i18n';
import * as React from 'react';
+import { useLocale } from '@automattic/i18n-utils';
export const WindowLocaleEffectManager: React.FunctionComponent = () => {
- const { __, isRTL, i18nLocale } = useI18n();
+ const { __, isRTL } = useI18n();
+ const locale = useLocale();
// Some languages may need to set an html lang attribute that is different from their slug
let lang = __( 'html_lang_attribute' );
@@ -14,7 +16,7 @@ export const WindowLocaleEffectManager: React.FunctionComponent = () => {
// Some languages don't have the translation for html_lang_attribute
// or maybe we are dealing with the default `en` locale. Return the general purpose locale slug
if ( lang === 'html_lang_attribute' ) {
- lang = i18nLocale;
+ lang = locale;
}
React.useEffect( () => {
diff --git a/client/landing/gutenboarding/hooks/use-on-login.ts b/client/landing/gutenboarding/hooks/use-on-login.ts
index 60f5ad14be36c..114224a841de1 100644
--- a/client/landing/gutenboarding/hooks/use-on-login.ts
+++ b/client/landing/gutenboarding/hooks/use-on-login.ts
@@ -3,7 +3,7 @@
*/
import * as React from 'react';
import { useDispatch, useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -19,7 +19,7 @@ import { useNewQueryParam } from '../path';
**/
export default function useOnSignup() {
- const { i18nLocale } = useI18n();
+ const locale = useLocale();
const { createSite } = useDispatch( ONBOARD_STORE );
const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() );
const isCreatingSite = useSelect( ( select ) => select( SITE_STORE ).isFetchingSite() );
@@ -30,14 +30,14 @@ export default function useOnSignup() {
React.useEffect( () => {
if ( ! isCreatingSite && ! newSite && currentUser && shouldTriggerCreate ) {
- createSite( currentUser.username, i18nLocale, undefined, visibility );
+ createSite( currentUser.username, locale, undefined, visibility );
}
}, [
createSite,
currentUser,
isCreatingSite,
newSite,
- i18nLocale,
+ locale,
shouldTriggerCreate,
visibility,
] );
diff --git a/client/landing/gutenboarding/hooks/use-on-signup.ts b/client/landing/gutenboarding/hooks/use-on-signup.ts
index 4709d9f1f5546..835d596c97d3e 100644
--- a/client/landing/gutenboarding/hooks/use-on-signup.ts
+++ b/client/landing/gutenboarding/hooks/use-on-signup.ts
@@ -3,7 +3,7 @@
*/
import * as React from 'react';
import { useDispatch, useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -18,7 +18,7 @@ import { useNewSiteVisibility } from './use-selected-plan';
**/
export default function useOnSignup() {
- const { i18nLocale } = useI18n();
+ const locale = useLocale();
const { createSite } = useDispatch( ONBOARD_STORE );
const newUser = useSelect( ( select ) => select( USER_STORE ).getNewUser() );
@@ -27,14 +27,14 @@ export default function useOnSignup() {
const handleCreateSite = React.useCallback(
( username: string, bearerToken?: string, isPublicSite?: number ) => {
- createSite( username, i18nLocale, bearerToken, isPublicSite );
+ createSite( username, locale, bearerToken, isPublicSite );
},
- [ createSite, i18nLocale ]
+ [ createSite, locale ]
);
React.useEffect( () => {
if ( newUser && newUser.bearerToken && newUser.username && ! newSite ) {
handleCreateSite( newUser.username, newUser.bearerToken, visibility );
}
- }, [ newSite, newUser, i18nLocale, handleCreateSite, visibility ] );
+ }, [ newSite, newUser, locale, handleCreateSite, visibility ] );
}
diff --git a/client/landing/gutenboarding/hooks/use-selected-plan.ts b/client/landing/gutenboarding/hooks/use-selected-plan.ts
index e69b0c1b440c6..349a14cc27b3f 100644
--- a/client/landing/gutenboarding/hooks/use-selected-plan.ts
+++ b/client/landing/gutenboarding/hooks/use-selected-plan.ts
@@ -3,7 +3,7 @@
*/
import { Site } from '@automattic/data-stores';
import { useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -20,9 +20,9 @@ export function usePlanFromPath() {
}
export function useSelectedPlan() {
- const { i18nLocale } = useI18n();
+ const locale = useLocale();
// Pre-load the plans details to ensure the plans are fetched early from the API endpoint.
- useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( i18nLocale ) );
+ useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( locale ) );
const selectedFeatures = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedFeatures() );
const selectedPlan = useSelect( ( select ) => select( ONBOARD_STORE ).getPlan() );
diff --git a/client/landing/gutenboarding/hooks/use-step-navigation.ts b/client/landing/gutenboarding/hooks/use-step-navigation.ts
index e85c54c034853..440d4f9948564 100644
--- a/client/landing/gutenboarding/hooks/use-step-navigation.ts
+++ b/client/landing/gutenboarding/hooks/use-step-navigation.ts
@@ -3,7 +3,7 @@
*/
import { useHistory } from 'react-router-dom';
import { useSelect, useDispatch } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -29,7 +29,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () =>
const makePath = usePath();
const history = useHistory();
const currentStep = useCurrentStep();
- const { i18nLocale } = useI18n();
+ const locale = useLocale();
let steps: StepType[];
@@ -59,7 +59,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () =>
const { onSignupDialogOpen } = useSignup();
const handleSiteCreation = () =>
currentUser
- ? createSite( currentUser.username, i18nLocale, undefined, newSiteVisibility )
+ ? createSite( currentUser.username, locale, undefined, newSiteVisibility )
: onSignupDialogOpen();
// Logic necessary to skip Domains or Plans steps
diff --git a/client/landing/gutenboarding/onboarding-block/domains/index.tsx b/client/landing/gutenboarding/onboarding-block/domains/index.tsx
index add355a058b2d..8ff1245505744 100644
--- a/client/landing/gutenboarding/onboarding-block/domains/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/domains/index.tsx
@@ -15,6 +15,7 @@ import {
NextButton,
SkipButton,
} from '@automattic/onboarding';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -40,7 +41,8 @@ interface Props {
}
const DomainsStep: React.FunctionComponent< Props > = ( { isModal } ) => {
- const { __, i18nLocale: locale } = useI18n();
+ const { __ } = useI18n();
+ const locale = useLocale();
const history = useHistory();
const { goBack, goNext } = useStepNavigation();
diff --git a/client/landing/gutenboarding/onboarding-block/plans/index.tsx b/client/landing/gutenboarding/onboarding-block/plans/index.tsx
index 0c59a29fe57fc..247e86a23bb56 100644
--- a/client/landing/gutenboarding/onboarding-block/plans/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/plans/index.tsx
@@ -8,6 +8,7 @@ import { useI18n } from '@automattic/react-i18n';
import PlansGrid from '@automattic/plans-grid';
import type { Plans } from '@automattic/data-stores';
import { Title, SubTitle, ActionButtons, BackButton } from '@automattic/onboarding';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -27,7 +28,8 @@ interface Props {
}
const PlansStep: React.FunctionComponent< Props > = ( { isModal } ) => {
- const { __, i18nLocale: locale } = useI18n();
+ const { __ } = useI18n();
+ const locale = useLocale();
const history = useHistory();
const makePath = usePath();
const { goBack, goNext } = useStepNavigation();
diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
index 6eeda0e174873..3feb69b7b265c 100644
--- a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
+++ b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { addQueryArgs } from '@wordpress/url';
import { useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
/**
* Internal dependencies
@@ -55,7 +55,7 @@ interface Props {
viewport: Viewport;
}
const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
- const { i18nLocale } = useI18n();
+ const language = useLocale();
const [ previewHtml, setPreviewHtml ] = React.useState< string >();
const { selectedDesign, selectedFonts, siteTitle } = useSelect( ( select ) =>
select( STORE_KEY ).getState()
@@ -73,7 +73,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
selectedDesign.theme
) }/${ encodeURIComponent( selectedDesign.template ) }/`;
const url = addQueryArgs( templateUrl, {
- language: i18nLocale,
+ language,
site_title: siteTitle,
...( selectedFonts && {
font_headings: selectedFonts.headings,
@@ -105,7 +105,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
eff();
},
// Disable reason: We'll handle font change elsewhere.
- [ i18nLocale, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps
+ [ language, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps
);
React.useEffect( () => {
diff --git a/package.json b/package.json
index 5a08937b68b2e..d0e59ce0712c2 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
"@automattic/color-studio": "^2.3.0",
"@automattic/components": "^1.0.0-alpha.1",
"@automattic/data-stores": "^1.0.0-alpha.1",
+ "@automattic/i18n-utils": "^1.0.0",
"@automattic/languages": "^1.0.0",
"@automattic/typography": "^1.0.0",
"@automattic/viewport": "^1.0.0",